Why images decide your page speed
Images typically account for around half of a web page's total bytes — more than scripts, styles and fonts combined. They are also usually the Largest Contentful Paint element, the Core Web Vitals metric Google uses in ranking. An unoptimized 3 MB hero image alone can push LCP past the 2.5-second "good" threshold on mobile connections.
The fix is mechanical, not mysterious: right dimensions, right format, right quality.
| Image role | Max dimensions | Format | Size budget |
|---|---|---|---|
| Hero / full-width banner | 1920 px wide | WebP | ≤ 200 KB |
| In-content / blog image | 1200 px wide | WebP | ≤ 100 KB |
| Thumbnail / card | 600 px wide | WebP | ≤ 40 KB |
| Logo / icon | Actual display size ×2 | SVG or WebP | ≤ 20 KB |
| og:image (social preview) | 1200 × 630 | JPG | ≤ 300 KB |
Beyond compression: serve images right
Compression is step one; delivery is step two. The essentials:
- Set width/height attributes on every <img> — prevents layout shift (CLS).
- loading="lazy" on below-the-fold images; never on the LCP hero.
- srcset for responsive sizes so phones don't download desktop images.
- WebP as your default format — 25–35% smaller than JPG at equal quality. Details in WebP vs JPG.
Running WordPress or Shopify? Both have platform-specific pitfalls — see WordPress and Shopify guides.