The connection between load time and success
The numbers are clear: according to a Google study, 53% of mobile users abandon a page that takes longer than 3 seconds to load. Every additional second of load time lowers the conversion rate by 7% (Akamai). And since 2021 Core Web Vitals are a direct Google ranking factor.
In most cases, images are the biggest lever: they make up 50–65% of the transferred data volume and are often the reason LCP values (Largest Contentful Paint) miss Google's target of 2.5 seconds.
Step 1: measure before you optimize
Before you start compressing images, you should know where you stand. Free tools:
- Google PageSpeed Insights (pagespeed.web.dev) — analyzes your URL and shows concrete image recommendations
- GTmetrix — a detailed waterfall analysis of all loaded resources
- Chrome DevTools → Network — shows image sizes, load times, and whether images above the fold have to load
- WebPageTest — professional performance measurement with a filmstrip
Pay special attention to: uncompressed images, missing width/height attributes (CLS), images that drive the LCP value, and images that should be lazy-loaded but aren't.
Step 2: identify and prioritize the LCP image
The LCP (Largest Contentful Paint) is often determined by an image — typically the hero image at the top of the page. This image is the most important for load speed:
- Compress the LCP image as much as possible (target: under 80–100 KB)
- Prioritize with
fetchpriority="high"or<link rel="preload"> - No
loading="lazy"for the LCP image - Preferably in WebP format
Step 3: lazy-load all other images
Images not visible on first page view (below the fold) should be lazy-loaded. That saves initial data volume and improves time-to-interactive:
- Native lazy loading:
<img loading="lazy" />— works in all modern browsers - Framework-specific: Next.js
<Image />lazy-loads automatically - On long pages with many images: often 60–80% less initial data
Step 4: serve responsive images
Sending a 1200 px wide image to a smartphone with a 390 px screen width means: you transfer 3× more data than needed. The srcset attribute solves this:
- Create 2–3 size variants of your images (e.g. 400 px, 800 px, 1200 px)
- Compress each variant separately
- Use
srcsetandsizesin the HTML - Next.js
<Image />does this automatically
Step 5: use modern formats
Switching from JPG/PNG to WebP saves 30–50% of image volume for most websites with no visible quality loss. With the <picture> element you can offer WebP with JPG/PNG as a fallback:
- Browsers that know WebP take the WebP version
- Older browsers fall back to JPG/PNG
- Works correctly in 100% of browsers
Step 6: prevent layout shifts from images (CLS)
If images have no fixed dimensions, other elements jump out of position while loading — that considerably worsens the CLS value. The solution is simple:
- Always specify
widthandheightattributes - Alternatively: define
aspect-ratioin CSS - CSS:
img { max-width: 100%; height: auto; }— prevents overflow in responsive layouts
Expected improvements
| Measure | Typical LCP improvement | Data volume |
|---|---|---|
| Compress images (75–85%) | 0.5–2 s | −60–80% |
| WebP instead of JPG/PNG | 0.3–1 s | −25–50% |
| Lazy loading | 0.5–1.5 s (initial) | −50–80% initial |
| Responsive srcset | 0.2–0.8 s (mobile) | −50–70% mobile |
| Preload the LCP image | 0.3–0.8 s | No change |
📊 Real example: A typical blog page with 6 uncompressed JPGs (8 MB total) can be reduced after optimization to under 800 KB — an improvement of over 90%. Load-time improvement on mobile devices: often 3–5 seconds faster.
Conclusion
Image optimization is the single biggest lever for faster websites. Compression, the right format (WebP), correct resolution, and lazy loading together can reduce the load time of most websites to a fraction — with a direct impact on SEO rankings, bounce rate, and conversion. Start by compressing your largest images and measure the effect with PageSpeed Insights.