How to Optimize Images for Google PageSpeed

Why Image Optimization Matters for PageSpeed

Google PageSpeed Insights measures how fast your website loads and how well it performs for users. Images typically account for 50-70% of a webpage's total size, making them the single biggest opportunity for performance improvement. A slow-loading website frustrates users and hurts your search rankings since Google uses Core Web Vitals as a ranking factor.

When you run PageSpeed Insights on an image-heavy page, you'll likely see recommendations like "Serve images in next-gen formats," "Properly size images," and "Defer offscreen images." Addressing these issues can improve your score by 20-40 points and dramatically reduce page load times.

Understanding Core Web Vitals

Core Web Vitals are Google's metrics for measuring real-world user experience. Three key metrics determine your PageSpeed score, and images directly impact all of them. Learn more in Google's Core Web Vitals guide.

LCP is the most image-dependent metric. If your hero image or main content image loads slowly, your LCP score will suffer. Similarly, images without defined dimensions cause layout shifts that hurt your CLS score. Large, unoptimized images also slow down the browser, affecting INP.

LCP Optimization: The Most Critical Factor

The Largest Contentful Paint measures when the largest element in the viewport becomes visible. For most websites, this is an image, usually a hero banner, product photo, or featured article image. Optimizing your LCP image is the single most impactful thing you can do for PageSpeed.

Strategies to Improve LCP

Modern Image Formats: WebP and AVIF

Google PageSpeed specifically recommends serving images in "next-gen formats" like WebP and AVIF. These formats use advanced compression algorithms to deliver smaller files without visible quality loss.

WebP: The Recommended Standard

WebP is the best all-around choice for web images in 2026. Developed by Google, it offers 25-35% smaller file sizes compared to JPG while supporting both lossy and lossless compression, plus transparency. With 97% browser support, WebP works for virtually all visitors.

AVIF: Maximum Compression

AVIF offers even better compression than WebP, reducing file sizes by 50% compared to JPG. However, browser support is at 93%, and encoding is slower. Use AVIF with WebP fallback for maximum performance where compatibility allows.

Implementing Multi-Format Support

Use the HTML <picture> element to serve different formats to different browsers. The browser automatically selects the best supported format.

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description" width="800" height="600">
</picture>

Lazy Loading: Defer Offscreen Images

Lazy loading delays the loading of images until they're about to enter the viewport. This reduces initial page load time and saves bandwidth for users who don't scroll the entire page. PageSpeed Insights specifically flags sites that don't defer offscreen images.

Native Browser Lazy Loading

Modern browsers support native lazy loading with the loading="lazy" attribute. This is the simplest and most performant approach since it requires no JavaScript.

<!-- Lazy load images below the fold -->
<img
  src="product.webp"
  alt="Product photo"
  width="400"
  height="300"
  loading="lazy"
>

Lazy Loading Best Practices

Properly Size Your Images

Serving images larger than needed wastes bandwidth and slows down your page. PageSpeed flags images that are significantly larger than their display size. The solution is responsive images that serve different sizes to different devices.

Responsive Images with srcset

The srcset attribute tells the browser about available image sizes. The browser then selects the most appropriate size based on the device's screen width and pixel density.

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

Image Size Guidelines

Preventing Layout Shifts (CLS)

Layout shifts occur when images load without reserved space, causing content to jump around. This frustrates users and hurts your CLS score. The solution is simple: always specify image dimensions.

Always Include Width and Height

When you include width and height attributes, the browser reserves the correct space before the image loads. This prevents layout shifts entirely.

<!-- Good: Dimensions specified -->
<img src="photo.webp" alt="Photo" width="800" height="600">

<!-- Also good: CSS aspect-ratio -->
<img src="photo.webp" alt="Photo" style="aspect-ratio: 4/3; width: 100%;">

Compression Best Practices

Even with modern formats, compression settings matter. The goal is finding the sweet spot between file size and visual quality. Over-compression creates visible artifacts while under-compression wastes bandwidth.

Recommended Quality Settings

Step-by-Step PageSpeed Image Audit

Follow this checklist to systematically optimize images for PageSpeed. Work through each step to maximize your score improvement.

Common PageSpeed Image Issues

These are the most frequent image-related warnings in PageSpeed Insights and how to fix them.

"Serve images in next-gen formats"

Solution: Convert images to WebP using Pictey's WebP converter. Use the <picture> element with JPG fallback.

"Properly size images"

Solution: Resize images to match their display size. Don't serve a 3000px image that displays at 800px. Create multiple sizes for responsive design.

"Defer offscreen images"

Solution: Add loading="lazy" to all images below the fold. Don't lazy load the LCP image.

"Efficiently encode images"

Solution: Compress images more aggressively. Pictey's compressor lets you adjust quality to find the optimal balance.

Measuring Results

After optimizing your images, measure the impact using multiple tools to get a complete picture of performance improvements.

Conclusion

Image optimization is the most impactful way to improve your Google PageSpeed score. By converting to WebP, compressing appropriately, implementing lazy loading, and properly sizing images, you can achieve a 20-40 point improvement in your score.

The key principles are simple: use modern formats like WebP for smaller files, compress images to 75-85% quality for photos, lazy load below-the-fold images, and always specify dimensions to prevent layout shifts. Following these practices ensures fast-loading pages that rank well in search results and provide a great user experience.

Start by running PageSpeed Insights on your site, identifying the LCP image, and working through the optimization checklist. The tools you need are free and browser-based, requiring no software installation or technical expertise.