What PageSpeed actually checks for images
Google PageSpeed Insights evaluates several image-related metrics. 'Properly size images' flags images that are larger in pixel dimensions than they're displayed on screen — a 2000×1500 photo shown at 400×300 wastes bandwidth loading pixels nobody sees.
'Serve images in next-gen formats' recommends WebP or AVIF instead of JPG or PNG. These formats produce smaller files at the same visual quality. 'Efficiently encode images' flags files that could be compressed further without visible quality loss.
These recommendations feed directly into Core Web Vitals. Largest Contentful Paint (LCP) measures how long the largest visible element — often a hero image — takes to render. Cumulative Layout Shift (CLS) can be caused by images without explicit width and height attributes. Both improve when images are properly optimized.
Step 1 — resize to display dimensions
Before compressing, resize every image to the largest size it will actually be displayed. Check your CSS — if a hero image renders at 1200px wide on desktop, export it at 1200px (or 2400px for retina at 2x), not at the camera's native 4000px.
Use the Image Resizer to set exact pixel dimensions. For responsive images, create two or three sizes — a mobile version at 640px, a tablet version at 1024px, and a desktop version at 1440px — and serve the appropriate one with srcset attributes.
Resizing alone can reduce file size by 60–80% before any compression is applied, because file size scales with the number of pixels. A 4000×3000 image has twelve million pixels. At 1200×900, that's only 1.08 million — a 91% reduction in pixel data.
Step 2 — compress and convert format
After resizing, compress with the Image Compressor. For web photos, 75–85% JPG quality is the standard range. Check the output at the actual display size — artifacts visible at full resolution may disappear when the image renders smaller on the page.
Convert JPGs and PNGs to WebP for an additional 25–35% size reduction. WebP has universal browser support in 2026. Use the JPG to WebP or PNG to WebP converter, or the Image Converter for batch processing.
For images with text, logos, or flat colors, PNG or WebP lossless may outperform JPG. For photographs, WebP lossy or JPG at 80% quality is almost always the best choice.
Step 3 — fix layout and loading behavior
Add explicit width and height attributes to every img tag. This reserves space in the layout before the image loads, preventing Cumulative Layout Shift. Modern browsers calculate aspect ratio from these attributes even when CSS overrides the display size.
Use lazy loading for images below the fold. Add loading='lazy' to img tags that aren't visible on initial page load. The hero image — your LCP candidate — should NOT be lazy loaded. Load it eagerly with fetchpriority='high'.
Consider using a CDN with automatic format negotiation if your hosting supports it. Some CDNs serve WebP to browsers that support it and JPG to those that don't, without you maintaining two file sets.
Measuring improvement
Run PageSpeed Insights before and after optimization on the same URL. Focus on the Opportunities section — it lists specific images with estimated savings in kilobytes.
Real-world LCP improvement depends on your hosting, CDN, and network conditions, not just file size. But shrinking a 2 MB hero image to 150 KB WebP routinely cuts LCP by one to three seconds on mobile connections.
Make image optimization part of your publishing workflow rather than a one-time fix. Every new image uploaded to your CMS should be resized and compressed before it goes live. Batch tools make this fast — process an entire folder of blog images in one session.