Run any slow website through Google PageSpeed Insights and the suggestions list almost always includes some variation of: "Serve images in next-gen formats," "Properly size images," "Efficiently encode images," and "Defer offscreen images." Images are the single biggest performance liability on most websites — and fixing them is also the single fastest way to improve your score.

This guide walks through every image-related PageSpeed recommendation, what it actually means, the exact settings to use, and the tools to implement the changes.

Why Images Destroy PageSpeed Scores

Images fail PageSpeed for three separate reasons, each caught by a different metric:

LCP (Largest Contentful Paint): The largest image on screen is too slow to load. Target: under 2.5 seconds. Fix: compress and serve in WebP/AVIF.
CLS (Cumulative Layout Shift): Images load without reserved space, pushing content down the page. Target: under 0.1. Fix: always include width and height attributes.
Total Blocking Time / INP: Excessive image decode work blocks the main thread. Fix: resize images to display size, use loading="lazy" below the fold.

Fix 1: Serve Images in Next-Gen Formats (AVIF/WebP)

This is the most common PageSpeed suggestion and usually the highest-impact fix. "Next-gen formats" means WebP or AVIF instead of JPEG or PNG.

How to fix: Convert all images to WebP at quality 80 using ImageOptimizer's bulk compressor. For hero/featured images, convert to AVIF for maximum compression. A 600KB JPEG typically becomes a 150KB WebP and a 90KB AVIF — cutting LCP load time by 60–75%.

Fix 2: Properly Size Images

PageSpeed flags images that are served larger than their display size. If your hero image is 3000px wide but displays at 1200px, you're sending 6× more pixels than needed.

How to fix:

Identify the actual display size (right-click → Inspect → see rendered dimensions in DevTools)
Serve images at 2× the display size for retina displays (a 600px wide column needs a 1200px image)
Use ImageOptimizer's resizer to batch-resize all images to their correct dimensions
Use the HTML srcset attribute to serve different sizes to different devices

Fix 3: Eliminate Cumulative Layout Shift from Images

CLS happens when the browser doesn't know an image's dimensions before it loads, causing page elements to shift position as images appear. The fix is simple and takes seconds:

<img 
  src="product.webp" 
  alt="Blue running shoes"
  width="800" 
  height="800"
  loading="lazy"
>

Always include explicit width and height attributes. Modern browsers use these to reserve space before the image loads, eliminating layout shift entirely.

Fix 4: Defer Offscreen Images (Lazy Loading)

Images below the fold don't need to load immediately — loading them lazily frees up bandwidth for above-the-fold content, directly improving LCP.

Add loading="lazy" to every image that isn't immediately visible on page load. Use loading="eager" (or omit the attribute) only for above-the-fold images. Never lazy-load your LCP element.

PageSpeed Issue	Score Impact	Fix	Effort
Next-gen formats	High	Convert to WebP/AVIF	Low (bulk tool)
Properly size images	High	Resize to display dimensions	Low (bulk resize)
Cumulative layout shift	Medium	Add width/height attributes	Low
Defer offscreen images	Medium	Add loading="lazy"	Very low
Preload LCP image	Medium	Add <link rel="preload">	Medium

Preloading Your LCP Image

For your hero image (which is usually the LCP element), add a preload hint in the <head> to tell the browser to fetch it immediately:

<link 
  rel="preload" 
  as="image" 
  href="/hero.webp" 
  type="image/webp"
>

This moves your hero image to the front of the browser's download queue, typically shaving 200–500ms off LCP.

What Score to Expect After Image Optimization

For most content websites and e-commerce stores, fixing the image issues outlined above brings the PageSpeed mobile score from the 40–60 range to 85–95. Hitting 100 requires additional work (font loading, JavaScript deferral, server response time) but images are always the first and highest-impact fix. Start here, measure the improvement, then tackle the remaining issues in order of their score impact.

Use ImageOptimizer's free bulk compressor to handle the conversion and compression step — process your entire image library to WebP in a single session, then run PageSpeed Insights again to see the improvement.

How to Get 100/100 PageSpeed Score: The Image Optimization Guide (2026)