Images are usually the largest thing on a web page by a wide margin, which makes them the fastest thing to fix. Preset below to WebP at 1920px — the combination that suits most sites.
Preset to WebP, fitted to 1920px — sensible defaults for most websites.
On a typical content site images account for the majority of total page weight — routinely more than scripts, stylesheets, fonts and markup put together.
That makes them unusually good value to optimise. Cutting your JavaScript in half is a serious engineering project. Cutting your image weight by 70% is an afternoon, changes no code, and carries no risk of breaking anything.
Largest Contentful Paint is the metric images affect most directly, and on most pages the largest contentful element is an image. LCP is a ranking signal and it is measured on real visitors, not in a lab — so a hero image that takes four seconds on a mid-range phone is hurting you regardless of how fast it feels on your laptop.
Cumulative Layout Shift is not about weight but is worth fixing at the same time: always put width and height attributes on your <img> tags so the browser reserves the space before the image arrives.
loading="lazy" on every image except the hero.Compression only helps if the browser actually receives the small file. Two things to check once you have optimised.
First, make sure your CMS is not regenerating its own versions from the original and serving those instead — many do, silently. Upload the compressed file as the source, not the camera original.
Second, set a long cache lifetime on image URLs so returning visitors do not re-download them. A perfectly compressed image fetched on every page view is still wasted bandwidth.
WebP for almost everything — it is 25–35% smaller than JPEG at the same quality and is supported by every current browser. Keep PNG only where you need lossless graphics or transparency and cannot use WebP.
A quality setting around 75 combined with resizing to the displayed dimensions gives the best balance. Resizing matters more than the quality number — most images are served far larger than they are ever displayed.
Indirectly but meaningfully. Largest Contentful Paint is a ranking signal and is usually determined by an image, so lighter images improve a metric Google measures on real visitors.
1920px wide for full-width hero images, 1200px for images inside an article column, and 800px or less for thumbnails. Serving anything larger sends data that is never displayed.