The 5 Image Audits PageSpeed Flags
Google PageSpeed Insights (powered by Lighthouse) runs several image-specific audits. These are the ones that most commonly reduce scores on real-world sites:
- Serve images in next-gen formats — JPG and PNG are being served where WebP or AVIF should be used.
- Properly size images — Images are larger (in pixels) than they are displayed on screen.
- Defer offscreen images — Images below the fold are loaded eagerly, delaying the initial page load.
- Largest Contentful Paint (LCP) image is slow — The hero image is discovered or downloaded too late.
- Avoid large layout shifts (CLS) from images — Images without dimensions cause the page to reflow when they load.
Each of these has a specific, actionable fix. Work through them in order for maximum impact.
Fix: Serve Images in Next-Gen Formats (WebP / AVIF)
Why it fires
Your page serves JPG or PNG images. WebP achieves the same perceptual quality at ~30% smaller file size; AVIF achieves ~50% smaller. Google flags this because smaller images = less bandwidth = faster LCP and lower total page weight.
<picture> element fallback.HTML implementation
<picture> <source srcset="hero.avif" type="image/avif"> <source srcset="hero.webp" type="image/webp"> <img src="hero.jpg" alt="Hero image" width="1200" height="630"> </picture>
Browsers that support AVIF use hero.avif. Browsers that support WebP but not AVIF use hero.webp. All others fall back to hero.jpg. All major browsers have supported WebP since 2020 and AVIF since 2023.
Server-side conversion (recommended for CMS sites)
If you use WordPress, Cloudflare, or a CDN, you can enable automatic WebP/AVIF conversion at the server level. This avoids maintaining multiple file versions manually:
- Cloudflare: Enable "Polish" in the Speed → Optimization panel. It auto-converts images to WebP on the CDN edge.
- WordPress: Plugins like ShortPixel, Imagify, or Smush convert and serve WebP automatically.
- Netlify/Vercel: Use image transformation APIs or edge functions to convert on request.
<picture> elements) achieves the same result.
Fix: Properly Size Images
Why it fires
You're serving a 4000×3000 image in a 800×600 display slot. The browser downloads 25x more pixels than it renders, wasting bandwidth and slowing the page load.
How to find the correct dimensions
- Open Chrome DevTools (F12) and go to the Elements panel
- Hover over the
<img>element — the tooltip shows rendered size vs intrinsic size - Export the image at rendered size × 2 (for retina/HiDPI displays) using IMGVO Resize
Use srcset for responsive images
<img src="photo-800.webp" srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1600.webp 1600w" sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1600px" alt="Photo description" width="800" height="533" >
This serves a 400px image to mobile users and a 1600px image to large desktop retina displays — each user gets exactly the resolution they need.
Fix: Defer Offscreen Images (Lazy Loading)
Why it fires
Images below the visible viewport are downloaded immediately on page load, competing for bandwidth with above-the-fold content and delaying the LCP image.
loading="lazy" to all images that appear below the fold.<!-- Above the fold (hero) — do NOT lazy load --> <img src="hero.webp" alt="Hero" width="1200" height="630" fetchpriority="high"> <!-- Below the fold — lazy load these --> <img src="card.webp" alt="Card image" width="400" height="300" loading="lazy">
loading="lazy" to your hero/LCP image. Lazy loading delays when the browser starts downloading the image, which directly worsens your LCP score. Apply it only to images that appear below the fold.
Fix: Slow LCP Image
The Largest Contentful Paint (LCP) is usually the hero/banner image — the largest element visible when the page first loads. A slow LCP score (above 2.5 seconds) is the most common Core Web Vitals failure.
Preload the LCP image
Add a <link rel="preload"> in the <head> to tell the browser to start downloading the LCP image immediately, before it parses the rest of the page:
<link rel="preload" as="image" href="/hero.webp" imagesrcset="/hero-400.webp 400w, /hero-800.webp 800w, /hero-1600.webp 1600w" imagesizes="(max-width:600px) 400px, (max-width:1200px) 800px, 1600px" >
Add fetchpriority="high"
<img src="/hero.webp" alt="Hero" width="1200" height="630" fetchpriority="high">
This signals to the browser that this image is the most important resource on the page. Use it on the LCP image only — applying it to multiple images reduces its effect.
fetchpriority="high" typically reduces LCP by 0.3–1.5 seconds on image-heavy pages, which is often enough to move from "Needs improvement" to "Good".
Fix: Image-Caused Layout Shift (CLS)
When a browser doesn't know an image's dimensions before it loads, the page reserves no space for it. When the image loads, the page jumps — this is a Cumulative Layout Shift (CLS) event, which harms both user experience and PageSpeed score.
Always specify width and height
<!-- Bad: no dimensions, page jumps when image loads --> <img src="photo.webp" alt="Photo"> <!-- Good: dimensions declared, browser reserves space --> <img src="photo.webp" alt="Photo" width="800" height="533">
Use CSS aspect-ratio as a fallback
img {
aspect-ratio: 16 / 9;
width: 100%;
height: auto;
}
The aspect-ratio property achieves the same space-reservation effect and works for responsive images where you can't hardcode pixel dimensions.
Expected Score Improvement
Here's a realistic breakdown of PageSpeed score gains from each image optimization on a typical blog or landing page:
- Convert JPG → WebP: +5 to +15 points (proportional to image payload on the page)
- Resize to display dimensions: +5 to +20 points (biggest gain if images are severely oversized)
- Lazy loading below-fold images: +3 to +10 points
- Preload LCP image: +5 to +20 points (highest impact for LCP score specifically)
- Add width/height (fix CLS): +5 to +15 points (if CLS was the main failure)
Combined, these optimizations regularly move pages from scores in the 40–60 range to 85–100 on mobile PageSpeed, where images are the primary bottleneck.
Frequently Asked Questions
What image format does Google PageSpeed recommend?
PageSpeed Insights recommends WebP and AVIF under the "Serve images in next-gen formats" audit. WebP is ~30% smaller than JPG; AVIF is ~50% smaller at equivalent quality.
How much can image optimization improve my PageSpeed score?
For image-heavy pages, the combination of next-gen formats, proper sizing, and LCP preloading typically improves scores by 15–40 points. The exact gain depends on how large and numerous the images are.
What does "Properly size images" mean in PageSpeed?
It means you're serving an image at a higher resolution than it's displayed — wasting bandwidth. Fix it by resizing images to their display dimensions before uploading, and use srcset to serve different sizes to different screen widths.
Does lazy loading improve PageSpeed score?
Yes for below-the-fold images. Never apply lazy loading to the LCP/hero image — it delays the LCP metric and hurts your score.
How do I fix the LCP image score?
Add <link rel="preload" as="image"> in the head and fetchpriority="high" on the LCP image element. Also ensure it's converted to WebP/AVIF and sized correctly. These combined changes typically reduce LCP by 0.5–1.5 seconds.