A photographer sends a 4,000-pixel-wide image. It gets uploaded. It displays in a 600-pixel-wide space and looks perfect.
Every visitor downloads all 4,000 pixels of it. Their browser then does the work of shrinking it to 600. The result is visually identical to the correctly sized version and costs several times as much to deliver.
Understanding image size and website performance is mostly understanding that “looks right” and “is right” are different tests, and only one of them is visible.
Image Size and Website Performance: A Practical Guide
1. Three separate things called size
Confusing them is why image advice often fails to help.
- Dimensions are the pixel width and height. This is what determines whether the browser has to resize anything.
- File size is the bytes transferred. Affected by dimensions, format and compression together.
- Display size is the space the image occupies in your layout, which varies by device.
The mismatch between dimensions and display size is the most common and most expensive error on the web, and it costs nothing to fix.
2. Serve the right dimensions
Match the image to the space it fills, allowing for high-density screens which need roughly twice the pixel dimensions of the display size.
Use responsive images so different devices receive appropriate versions. A phone should not be downloading a desktop hero image, and the markup to prevent that has been supported for years.
Always set explicit width and height attributes. This lets the browser reserve the space before the image arrives, which prevents content jumping as things load. That jumping is measured as Cumulative Layout Shift and causes mis-taps.
3. Choose the format deliberately
- WebP compresses substantially better than JPEG or PNG at comparable quality and is supported across current browsers. It should be your default for photographs.
- AVIF compresses further, with slightly less universal support. Worth using with a fallback.
- SVG is right for logos, icons and simple illustrations, since it scales to any size from one small file.
- PNG is frequently used for photographs, where it produces files several times larger than necessary. Reserve it for images genuinely needing transparency or sharp-edged graphics.
4. Compress with judgement
Compression quality is a trade-off, and the right setting depends on the image.
Photographs with detail and texture tolerate more compression than flat graphics, where artefacts show. Somewhere around 75 to 85 per cent quality is a reasonable starting point for photographs, adjusted by eye.
Check the result at the size it will display rather than at full magnification. Artefacts visible when zoomed in are frequently invisible in situ, and optimising for a view nobody has wastes bytes.
5. Load them at the right moment
Lazy-load everything below the fold so images download only as somebody scrolls towards them. Most content management systems now do this by default.
The exception matters: your main above-the-fold image should load eagerly. Lazy-loading it delays the element that Largest Contentful Paint measures, which makes your headline metric worse for the sake of a rule applied without thinking.
Gallery and zoom images should load on interaction rather than on arrival. A gallery of twenty products loading all twenty at full resolution is a common and avoidable failure.
What this changes
LCP improves, because the largest element arrives sooner. CLS improves, because dimensions are reserved. Total page weight falls, frequently by more than everything else combined.
The web.dev guidance on Core Web Vitals covers how these are measured and what the thresholds are.
Where performance and environmental impact both apply, treat them as the same lever: reducing unnecessary data transfer and processing supports a faster experience while lowering estimated digital carbon, though environmental figures remain modelled rather than directly measured.
Stopping it recurring
Most regression arrives through the content management system rather than the codebase, when somebody uploads a photograph straight from a camera or phone.
Give editors a maximum dimension and a simple tool for resizing. Configure your platform to generate appropriately sized versions automatically where it can.
Our sustainable web development work configures that pipeline so correct sizing happens without anybody remembering.