Ask anyone who has profiled a slow page what they found, and images are usually the answer. On a typical content page, images account for 60–70% of total transferred bytes.
The frustrating part: most of those bytes are wasted.
Start with dimensions, not quality
The instinct is to lower the quality setting. That is the second-most effective lever. The first is asking whether you need the pixels at all.
<img src="hero-4000px.jpg" width="1200" height="630">That downloads a 4000-pixel-wide image to display it in a 1200-pixel slot. The browser scales it down, and the extra detail is thrown away.
Serve the size you actually need:
<img
src="hero-1200.jpg"
srcset="hero-600.jpg 600w, hero-1200.jpg 1200w, hero-2000.jpg 2000w"
sizes="(max-width: 700px) 100vw, 700px"
width="1200"
height="630"
alt="..."
>Resizing from 4000px to 1200px removes roughly 91% of the pixels. No quality slider comes close.
Always set width and height
The width and height attributes let the browser reserve space before the image loads. Without them, the page reflows when each image arrives — and that reflow is a Cumulative Layout Shift, one of the Core Web Vitals that determines your search ranking.
Modern browsers compute the aspect ratio from these attributes automatically. You need real numbers, not placeholders.
Pick the right format
| Format | Use for | Typical saving vs JPEG |
|---|---|---|
| WebP | Almost everything | 25–35% |
| AVIF | Photos, where encode time is not an issue | 40–50% |
| JPEG | Legacy fallback, photographs | baseline |
| PNG | Screenshots, logos, transparency | large |
| SVG | Icons, logos, simple graphics | tiny |
WebP is supported by every current browser. Use <picture> with an AVIF source and a WebP fallback, and keep a JPEG for anything older.
Lazy loading, carefully
loading="lazy" prevents offscreen images from loading immediately. It is a clear win for long pages.
One exception: do not lazy-load the Largest Contentful Paint element. The LCP image is the one the visitor is waiting for, and lazy loading it delays the metric it is supposed to improve.
<img src="hero.jpg" alt="..." width="1200" height="630" fetchpriority="high">A realistic workflow
- Resize to the largest size you will actually display.
- Export as WebP at quality 75–80.
- Set explicit
widthandheight. - Add
loading="lazy"to everything below the fold. - Set
fetchpriority="high"on the LCP image.
Most pages built this way see a 50–70% reduction in image bytes, and it usually needs no engineering work beyond the build step.
A useful threshold
A rough rule of thumb: if an image on a content page exceeds 200 KB, it is worth a look. If it exceeds 500 KB, it is almost certainly a problem.
To find them, sort the Network tab by size and look for the biggest transfers. You will usually find a handful of files accounting for most of the page weight.
Related
The image compressor handles steps one and two entirely in your browser, so nothing is uploaded.