How to Pass Google PageSpeed Image Audits

PageSpeed Insights flags five image-related audits. If your site is image-heavy, these are likely the difference between a passing and failing score. Here's how to fix each one.

Audit 1: Properly size images

PageSpeed flags any image where the rendered dimensions are much smaller than the source dimensions. You're shipping bytes the browser will downscale and never display.

Fix:

• Resize each source image to the maximum display width across your responsive breakpoints.
• Use srcset to serve smaller variants on smaller viewports.
• Don't ship a 4000×3000 source if the largest displayed size is 1600×1200.

Example srcset:

<img src="hero-800.jpg"
     srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw, 50vw">

Audit 2: Serve images in next-gen formats

PageSpeed flags JPEG / PNG that could be served as WebP or AVIF.

Fix:

• Convert your images to WebP via PNG to WebP or Image Compressor.
• Add AVIF for additional savings via AVIF Converter.
• Serve via <picture> with <source> fallbacks.

See How to Use the HTML Picture Element for the syntax.

Audit 3: Efficiently encode images

PageSpeed flags images that could be encoded at a lower quality without visible loss.

Fix:

• Compress every image at quality 80-85 before upload.
• Run Image Compressor at default settings, already tuned for this audit.
• For very large hero images, consider quality 75 and check the result visually.

Audit 4: Defer offscreen images

PageSpeed flags images outside the initial viewport that aren't lazy-loaded.

Fix:

• Add loading="lazy" to every <img> below the fold.
• The hero image (LCP candidate) gets loading="eager", NOT loading="lazy".

<img src="below-fold.webp" alt="..." loading="lazy">

Audit 5: Image elements do not have explicit width and height

PageSpeed flags images without width and height attributes because they cause layout shift (bad CLS).

Fix:

• Always set width and height on every <img>.
• These don't override CSS. They tell the browser the aspect ratio so it can reserve space before the image loads.

<img src="image.webp" alt="..." width="1600" height="900">

A 10-minute fix workflow

For a typical site failing all five audits:

Pre-process every image

1. Resize sources to the maximum needed display width (usually 1600 or 2000px).
2. Convert to WebP (or AVIF if you need maximum performance).
3. Set explicit width and height on every <img> tag.

Markup pattern

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="..."
       width="1600" height="900"
       loading="lazy">
</picture>

Hero exception

For the LCP image: loading="eager" + fetchpriority="high".

Tools

• Image Compressor: batch compress, multiple format outputs.
• PNG to WebP: single-purpose, fastest for PNG batches.
• AVIF Converter: for maximum savings.
• Social Media Image Resizer: resize sources to target dimensions.

All run client-side via WASM, no uploads.

Beyond the audits

PageSpeed score is a leading indicator, not the goal. The real metrics are LCP, INP, and CLS, measured by real Chrome users via the CrUX report. Pass the audits AND measure field data to ensure your fixes actually moved the needle.

Related

• What Is LCP and Why Images Are the Main Cause
• How Image Compression Improves Core Web Vitals
• Image Optimization Checklist for Web Developers