The Direct Relationship Between Image Size and Rankings
Google's Core Web Vitals became a ranking signal in 2021. Two of the three vitals are directly affected by images:Largest Contentful Paint (LCP) measures how long it takes for the largest visible element on the page to finish loading. For most content pages, the LCP element is the hero image. If your hero image is 1.8 MB, LCP on a 4G connection (~15 Mbps) is roughly 1 second just for that image's download.
Cumulative Layout Shift (CLS) measures visual stability. When an image loads without explicit width and height attributes in the HTML, the browser does not know how much space to reserve. When the image loads, it pushes content down, causing a layout shift that contributes to CLS.
The Compression Impact: Real Numbers
| Format | Quality | File size | Download on 4G |
|---|---|---|---|
| PNG (uncompressed) | Lossless | ~4.2 MB | ~2.2 seconds |
| JPEG | q=85 | ~820 KB | ~0.44 seconds |
| WebP | q=80 | ~380 KB | ~0.20 seconds |
| WebP | q=70 | ~240 KB | ~0.13 seconds |
The Optimization Checklist
1. Compress hero images to under 200 KB. Use the Image Compressor at 80% quality, then convert to WebP with the Format Converter.2. Always specify width and height on img elements.
``html
`
3. Use loading=lazy for below-fold images.
`html
`
4. Use fetchpriority=high on the LCP image.
`html
``