Images on the web: formats, sizes and why they matter most
Images are most of the bytes on most pages. The formats to use, how sizing per screen works, why dimensions prevent jumping, and the pipeline that does it all.
The short answer
On most web pages, images are most of the bytes. A single photo uploaded straight from a camera into a slot a few hundred pixels wide can weigh more than the rest of the page combined, and it is the most common reason a page is slow on phones. The fixes are well understood: the right format, the right size for each screen, dimensions declared so nothing jumps, and lazy loading below the fold. The important part is that none of it should be done by hand.
Formats
| Format | Use it for | Notes |
|---|---|---|
| AVIF | Photos and complex images | Smallest files at good quality; supported by modern browsers |
| WebP | Photos and graphics | Much smaller than JPEG and PNG; near-universal support |
| JPEG | Fallback for photos | Older, larger; still fine as a fallback |
| PNG | Graphics that need lossless quality or transparency | Large for photos; avoid for them |
| SVG | Logos, icons, diagrams, illustrations | Scales to any size, tiny, editable; not for photographs |
Sizing per screen
A hero image shown full width on a desktop monitor and full width on a phone needs very different files. Without responsive images, every visitor downloads the desktop version. With them, the browser is told which sizes exist and picks the smallest that fills the slot sharply on that device. The saving on phones is typically most of the image’s weight.
Dimensions and layout stability
An image without declared width and height is a surprise to the browser: it lays out the text, the image arrives, everything below it moves. That movement is what the layout shift metric measures and what makes visitors tap the wrong thing. Declaring dimensions on every image reserves the space before the file arrives.
Loading order
- The hero image loads first and eagerly. It is usually the largest visible element, so its arrival is the page’s speed as visitors perceive it. Never lazy-load it.
- Everything below the first screen loads lazily. The sixth product in a grid does not need to load until the visitor scrolls towards it.
- Decorative images are marked as such. Empty alt text tells screen readers to skip them; meaningful images get real alt text.
The pipeline that does it for you
None of this should depend on an editor remembering rules. A modern build takes the original image once and produces the formats, the sizes, the dimensions and the loading attributes automatically at build time. An editor uploads a photo; the visitor receives a right-sized modern file with reserved space, every time. That is how this site handles images, and it is why the question “which format should I export” never has to be asked.
What this means for you
Images are the largest lever for page speed and one of the easiest to pull, provided the work is done by the system rather than by people. Ask whether your site generates modern formats and multiple sizes automatically, declares dimensions, and loads the hero eagerly and the rest lazily. If it does not, that pipeline is a normal part of a rebuild, and it fixes every page at once.
Frequently asked questions
Which format should we use?
You should not have to choose per image. A modern build produces WebP or AVIF versions with a fallback, and the browser takes the best it supports. If your platform makes you pick one format and one size by hand, that is the limitation to fix, not a decision to agonise over.
How large should an image be?
As large as the slot it fills on the largest screen, and no larger, with smaller versions generated for smaller screens. A hero image might need a wide version for desktop and a narrow one for phones; a thumbnail never needs more than its display size. Uploading the original is fine; the system should generate the rest.
Do images affect our search ranking?
Indirectly through speed, since Largest Contentful Paint is usually an image, and directly through image search and accessibility: alt text describes the image to search engines and to screen readers. Well-sized images with good alt text help on both counts.
What about SVG?
For logos, icons and diagrams, SVG is ideal: it scales to any size without pixels and is usually tiny. For photographs it is the wrong tool. This knowledge base uses SVG for every diagram for exactly that reason.
Sources
- Google web.dev: Learn Images (accessed 2026-09-11)
- MDN Web Docs: Responsive images (accessed 2026-09-11)