FreeTinyImage
intermediateTool: compress

How to Optimize Images for Google PageSpeed Insights

Images are the number-one cause of low PageSpeed scores. This guide covers every image-related optimisation Google tests for — and how to fix each one.

Why PageSpeed Scores Matter

Google's PageSpeed Insights tool measures your page against a set of web performance metrics called Core Web Vitals. These scores directly influence your position in search results as of Google's 2021 Page Experience update.

Images trigger four of the most common PageSpeed warnings:

  1. Properly size images — images larger than they appear on screen
  2. Serve images in next-gen formats — JPEG/PNG instead of WebP/AVIF
  3. Efficiently encode images — images that could be further compressed
  4. Defer offscreen images — images loaded before they're visible

This guide addresses each one.

1. Properly Size Images

PageSpeed flags this when you serve a 2000 × 1500 px image in a 400 × 300 px container. The browser downloads all those extra pixels and throws them away.

How to fix it:

Determine the largest size the image will ever be displayed (check on a wide desktop monitor) and export at 2× that size for retina screens. A 400 × 300 px display area → export at 800 × 600 px.

For responsive layouts where the image width varies, use the srcset attribute to provide multiple sizes:

<img
  src="photo-800w.jpg"
  srcset="photo-400w.jpg 400w, photo-800w.jpg 800w, photo-1200w.jpg 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 900px) 800px, 1200px"
  alt="Description"
>

The browser will download only the size it needs.

2. Serve Images in Next-Gen Formats

PageSpeed recommends WebP and AVIF because they achieve the same visual quality as JPEG at significantly smaller file sizes. This is one of the easiest wins available.

How to fix it:

Convert your images using the Convert tool. Select WebP as the output format and use quality 80 for photographs.

If you're using a CMS or framework, check whether it handles this automatically:

  • Next.js — automatic WebP/AVIF conversion via the <Image> component
  • WordPress — plugins like Imagify or ShortPixel
  • Shopify — automatic WebP serving built in
  • Static sites — use the <picture> element with WebP source and JPEG fallback

3. Efficiently Encode Images

Even if you're already using the right format, images may not be compressed optimally. Camera exports at 100% quality, screenshots saved as PNG, and stock photos often have significant room for compression.

How to fix it:

Run every image through the Compress tool before publishing:

  • JPEG: quality 80 is the standard starting point
  • WebP: quality 80–85
  • PNG: lossless compression only — use the compression tool to strip metadata and optimise encoding

Target file sizes for typical web images:

Image type Recommended max size
Hero/banner 200 KB
Blog post feature image 150 KB
Product photo 100 KB
Thumbnail 40 KB
Icon 10 KB

4. Defer Offscreen Images (Lazy Loading)

Images below the fold are loaded as soon as the page opens, wasting bandwidth on content the user may never scroll to. Lazy loading defers these loads until the image is about to enter the viewport.

How to fix it:

Add loading="lazy" to any image that isn't in the initial viewport:

<img src="photo.webp" loading="lazy" alt="Description">

Browser support is universal for modern browsers. The browser natively handles when to load the image.

Do not lazy-load your hero image or any image above the fold — this will harm your Largest Contentful Paint (LCP) score.

5. Preload Your Largest Image (LCP)

The Largest Contentful Paint metric measures how quickly the largest visible element loads. If that element is an image, you can improve your LCP score by preloading it:

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

Place this in your <head> before any stylesheets. The browser will start downloading the image immediately rather than waiting for the HTML parser to discover it.

Putting It Together: A Publishing Checklist

Before publishing any page with images, run through this checklist:

  • Images resized to the maximum display dimensions × 2 (for retina)
  • Converted to WebP or AVIF
  • Compressed to quality 80 (lossy) or lossless PNG compression applied
  • File size under the target for each image type
  • loading="lazy" added to all below-fold images
  • Hero/LCP image preloaded with <link rel="preload">
  • Run PageSpeed Insights and confirm image warnings are resolved

Following this checklist consistently will keep your image-related PageSpeed scores in the green and provide a measurable improvement in both load times and search visibility.