How to Optimize Images for Google PageSpeed Insights

Few things frustrate website owners more than running a page through Google PageSpeed Insights and seeing a red score with warnings about images. Messages like “Properly size images,” “Serve images in next-gen formats,” “Efficiently encode images,” and “Defer offscreen images” show up on a huge share of websites, and for good reason. Images are usually the heaviest assets on a page, so they are also the biggest opportunity.

This guide explains what PageSpeed Insights actually measures, what each image-related warning means, and exactly how to fix it. Whether you run WordPress, Shopify, or a custom site, you will find practical steps that move your score and, more importantly, make your pages feel faster to real visitors.

Note: Google updates PageSpeed Insights, Lighthouse, and its scoring over time. Audit names and thresholds below reflect common current behavior, so confirm details in Google’s documentation.

What PageSpeed Insights Measures

PageSpeed Insights (PSI) reports two kinds of data:

Field data comes from real Chrome users visiting your site over the previous 28 days (from the Chrome User Experience Report). This is what Google’s page experience signals are based on.
Lab data comes from Lighthouse, which loads your page once in a simulated environment, usually a mid-range mobile device on a throttled connection. This is the source of the 0-100 score and the specific audit recommendations.

The three Core Web Vitals are the metrics that matter most:

Largest Contentful Paint (LCP): How quickly the largest visible element, often an image, renders. A good LCP is 2.5 seconds or less.
Interaction to Next Paint (INP): How quickly the page responds to user input.
Cumulative Layout Shift (CLS): How much content jumps around while loading. A good CLS is 0.1 or less.

Images affect LCP and CLS directly, and they influence overall load time through their weight. That makes image optimization one of the highest-leverage fixes available.

Decoding the Image Warnings in PageSpeed Insights

Here is what each common image audit means and the fix that clears it.

PSI Warning	What It Means	Main Fix
Properly size images	Images are larger than the space they display in	Resize and serve responsive images
Serve images in next-gen formats	You are using JPEG/PNG where WebP or AVIF would be smaller	Convert to WebP or AVIF
Efficiently encode images	Images could be compressed further	Apply better compression
Defer offscreen images	Images below the fold load too early	Lazy-load them
Image elements do not have explicit width and height	Missing dimensions cause layout shift	Add width and height attributes
Largest Contentful Paint image was lazily loaded	Your hero image is delayed	Remove lazy loading from it
Preload Largest Contentful Paint image	The key image is discovered late	Preload or prioritize it

Work through these in order of impact, starting with whichever shows the largest estimated savings.

Step 1: Resize Images to Their Display Size

The most common and most costly mistake is uploading a 4000-pixel camera original for a container that displays it at 800 pixels. The browser downloads every unnecessary pixel and then shrinks the image visually, which wastes bandwidth and slows rendering.

How to fix it

Find the display size. Use your browser’s developer tools to see how wide an image actually renders on desktop and mobile.
Resize to roughly that width. For sharp results on high-density (retina) screens, export at up to about two times the display size, but not beyond what is needed.
Serve responsive versions. Use the srcset and sizes attributes so phones receive smaller files than desktops.

<img
  src="product-800.webp"
  srcset="product-400.webp 400w, product-800.webp 800w, product-1600.webp 1600w"
  sizes="(max-width: 600px) 100vw, 800px"
  width="800" height="800"
  alt="Blue ceramic coffee mug">

Resizing alone often produces the largest savings of any single step.

Step 2: Convert to Next-Gen Formats (WebP and AVIF)

The “Serve images in next-gen formats” audit flags JPEG and PNG files that would be smaller as WebP or AVIF.

WebP typically produces files roughly 25-35% smaller than JPEG at similar quality, supports transparency, and works in all modern browsers.
AVIF often compresses even further, frequently beating WebP, and now has broad browser support. Encoding can be slower, so it suits images you generate once and serve many times.

How to implement it

Use the <picture> element to serve the best format each browser supports, with a safe fallback:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" width="1200" height="600" alt="Storefront interior">
</picture>

Tools that help

Squoosh (free, browser-based) for manual conversion and quality comparison
ShortPixel, Imagify, EWWW, and Smush for WordPress
Cloudinary and imgix for automatic format selection via URL
Shopify serves modern formats automatically through its CDN
ImageMagick or Sharp for scripted, automated conversion

Step 3: Compress Images Efficiently

“Efficiently encode images” appears when files could be smaller without a visible difference.

Lossy vs lossless

Lossy compression discards data the eye barely notices, giving the biggest savings. Use it for photographs.
Lossless compression removes metadata and redundant data without altering pixels. Use it when exact fidelity matters, such as for some logos and graphics.

Practical targets

Aim for photos in the range of roughly 100-200KB where possible, and avoid anything much larger unless it is a full-width hero that demands detail.
Start at a quality setting around 75-85 for JPEG and WebP, then test. AVIF often looks good at lower numerical settings.
Zoom in on critical areas such as textures, text, and faces to confirm quality holds.

Remember to compress after resizing. Reaching the right dimensions first gives better results and smaller files than compressing an oversized original.

Step 4: Lazy-Load Offscreen Images (But Not the Hero)

The “Defer offscreen images” audit flags images below the fold that load before the visitor scrolls to them. Lazy loading postpones those downloads, freeing bandwidth for what the visitor sees first.

Modern browsers support native lazy loading with a single attribute:

<img src="gallery-3.webp" loading="lazy" width="800" height="600" alt="Gallery photo">

The critical exception: never lazy-load your LCP image. If your main banner or hero photo carries loading="lazy", the browser delays it, your LCP gets worse, and PSI will tell you so. Many themes and plugins apply lazy loading to every image by default, so verify that your above-the-fold images are excluded.

For the hero image, do the opposite:

<img src="hero.webp" fetchpriority="high" width="1600" height="800" alt="Summer collection">

The fetchpriority="high" attribute tells the browser to download this image early.

Step 5: Set Explicit Width and Height to Prevent Layout Shift

When an image has no declared dimensions, the browser does not know how much space to reserve. The page renders, the image loads, and everything below it jumps downward. That jump is counted in Cumulative Layout Shift.

The fix is simple: add width and height attributes that match the image’s intrinsic dimensions. Modern browsers use them to calculate the aspect ratio and reserve the right space before the image loads.

<img src="photo.webp" width="1200" height="800" alt="Team photo">

Pair this with responsive CSS so the image still scales fluidly:

img { max-width: 100%; height: auto; }

You can also use the CSS aspect-ratio property for containers and background images.

Step 6: Optimize the Largest Contentful Paint Image

On many pages, LCP is an image, so improving it can transform your score. Beyond the points above, try these tactics:

Make the LCP image discoverable in the HTML. If it is loaded through CSS background properties or injected by JavaScript, the browser finds it late. Use a real <img> tag where possible.

Preload it when it is not discoverable early:

<link rel="preload" as="image" href="hero.webp" fetchpriority="high">

Avoid sliders and carousels for the first image. They often load heavy scripts before showing the main image.
Serve it from a fast origin or CDN so the first byte arrives quickly.
Keep it light. The LCP image deserves the most careful compression and sizing on the page.

Use the “LCP breakdown” in PSI or Chrome DevTools to see whether the delay comes from server time, discovery, download, or rendering, then fix the right stage.

Step 7: Use a CDN and Strong Caching

Even a perfectly optimized image loads slowly if it travels halfway around the world, and repeat visitors should not download it twice.

Use a CDN so images are delivered from servers near each visitor. Image CDNs such as Cloudinary and imgix also resize and convert on the fly.
Set long cache lifetimes. PSI flags “Serve static assets with an efficient cache policy” when images lack caching headers. A common approach is a cache lifetime of a year for versioned or fingerprinted files.
Use HTTP/2 or HTTP/3, which most modern hosts and CDNs provide, to download many images efficiently in parallel.

Step 8: Choose the Right Format for Each Image Type

Picking the correct format avoids waste before compression even begins.

Photographs: AVIF or WebP, with JPEG as a fallback.
Logos and icons: SVG, which is tiny and scales perfectly.
Graphics needing transparency: WebP, AVIF, or PNG.
Screenshots with sharp text: WebP lossless or PNG.
Animations: Use short video (MP4 or WebM) instead of large GIFs. GIFs are often many times heavier.

Platform-Specific Tips

WordPress

Install an optimizer such as ShortPixel, Imagify, EWWW, or Smush to compress, convert to WebP/AVIF, and handle bulk optimization.
Check that your theme or a performance plugin does not lazy-load the hero image.
Upload appropriately sized images rather than relying on WordPress to shrink huge originals.
Use a caching plugin and a CDN for delivery.

Shopify

Shopify’s CDN serves modern formats and resized versions automatically, so focus on uploading well-prepared, correctly sized originals.
Use your theme’s responsive image settings, and review any app that injects extra image scripts.
Remove unused apps, since each can add scripts that slow rendering.

Custom or headless sites

Use a build-time pipeline with tools like Sharp, or a framework image component that generates responsive sizes, formats, and lazy loading for you.
Consider an image CDN for on-demand transformation.

A Practical Optimization Workflow

Here is a repeatable process you can follow on any site:

Run a baseline test. Test your key pages in PSI on mobile and record the score, LCP, and the image audit savings.
Fix the biggest wins first. Usually this means resizing oversized images and converting to WebP or AVIF.
Compress what remains. Apply sensible quality settings and verify visually.
Fix loading behavior. Lazy-load below-the-fold images, prioritize the LCP image, and add width and height attributes.
Add a CDN and caching. Make sure delivery is fast and repeat visits are cheap.
Retest. Run PSI again, ideally more than once, since lab scores vary slightly between runs.
Monitor field data. Check the real-user data over the following weeks, because it updates on a 28-day window.

Common Mistakes to Avoid

Lazy-loading the hero image. This is the most frequent self-inflicted LCP problem.
Scaling images with CSS only. Shrinking a huge file in the browser does not reduce its download size.
Over-compressing. Blurry or blocky images hurt trust and conversions, so check quality visually.
Using PNG for photos. The files are far larger than WebP or JPEG.
Skipping fallbacks. Provide JPEG or PNG for any browser that lacks WebP or AVIF support.
Chasing a perfect 100. The score is a diagnostic tool, not the goal. Real-user speed and Core Web Vitals matter more.
Ignoring mobile. PSI’s mobile test is stricter, and most traffic comes from phones.
Forgetting alt text. It does not affect speed, but it matters for accessibility and image search.
Optimizing once and stopping. New uploads need an automatic process, or your gains will slowly erode.

Quick Checklist

Images resized to their display dimensions
Responsive srcset and sizes in place
Photos served as AVIF or WebP with a fallback
Sensible compression applied and visually checked
Below-the-fold images lazy-loaded
Hero or LCP image not lazy-loaded, with fetchpriority="high"
width and height attributes on every image
CDN and long cache lifetimes enabled
GIFs replaced with video where possible
Retested in PSI and monitored in field data

Final Thoughts

Optimizing images for PageSpeed Insights is not about gaming a number. It is about delivering the right pixels, in the right format, at the right moment. Resize to fit, convert to modern formats, compress with care, lazy-load what is offscreen, and give your hero image priority. Those few habits clear most of the warnings PSI throws at you and make your site feel noticeably faster.

Start with the page that matters most, whether that is your homepage, your top product page, or your best-ranking article. Fix its images, measure the difference, and then apply the same workflow everywhere else. Faster pages mean happier visitors, better engagement, and a stronger foundation for search performance.