Fix Image Issues in Google PageSpeed Insights

Updated February 2026 · 11 min read

PageSpeed Insights flags image problems more than any other category. Here is exactly how to fix every image warning — with code examples.

Warning 1: "Serve images in next-gen formats"

This is the most common warning. PageSpeed wants WebP or AVIF instead of JPEG or PNG. The fix: convert all images before deploying.

Quick fix with ImageCompress Pro: upload your JPEG/PNG, download WebP. Done in under 10 seconds per image.

Automated fix with Sharp (Node.js):

const sharp = require("sharp");
sharp("input.jpg")
  .webp({ quality: 80 })
  .toFile("output.webp");

Always use a <picture> element with fallback so older browsers still get JPEG:

<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"  loading="lazy"/>
</picture>

Warning 2: "Properly size images"

This warning appears when you serve a 2000px image to display it at 400px. The browser downloads all the extra pixels and throws them away — pure waste.

Fix: generate multiple sizes and use srcset:

<img
  srcset="img-400.webp 400w,
          img-800.webp 800w,
          img-1200.webp 1200w"
  sizes="(max-width: 640px) 400px,
         (max-width: 1024px) 800px,
         1200px"
  src="img-800.webp"
  alt="Description"
 loading="lazy"/>

In Next.js, the Image component handles this automatically:

import Image from "next/image";
<Image src="/photo.jpg" alt="Description" width={800} height={600} />

Warning 3: "Defer offscreen images"

Images below the fold are loaded immediately, blocking faster resources. Fix: add loading="lazy" to every image that is not in the initial viewport.

<!-- Above fold: no lazy (loads immediately) -->
<img src="hero.webp" alt="Hero" width="1200" height="600"  loading="lazy"/>

<!-- Below fold: lazy -->
<img src="product.webp" alt="Product" width="400" height="400" loading="lazy" />

Important: never add loading="lazy" to your LCP image (the largest image in the viewport). This will make your LCP score worse.

Warning 4: "Image elements do not have explicit width and height"

Without explicit dimensions, the browser cannot reserve space for the image before it loads. This causes Cumulative Layout Shift (CLS) — content jumps around as images load.

<!-- Bad: no dimensions -->
<img src="photo.webp" alt="Photo"  loading="lazy"/>

<!-- Good: explicit dimensions -->
<img src="photo.webp" alt="Photo" width="800" height="600"  loading="lazy"/>

You can also use CSS aspect-ratio as a fallback:

img {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
}

Warning 5: "Efficiently encode images"

Even WebP images can be over-compressed or under-compressed. PageSpeed wants JPEG quality ≤ 85 and WebP quality ≤ 85. For most photos, quality 80 is visually identical to quality 100 but 40% smaller.

Target sizes for common use cases:

• Hero image (LCP): under 75 KB
• Product thumbnail: under 30 KB
• Blog featured image: under 50 KB
• Profile avatar: under 10 KB

Warning 6: "Preload Largest Contentful Paint image"

Your LCP image should be preloaded so the browser fetches it as early as possible. Add a preload hint in your document head:

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

In Next.js App Router, add this to your root layout metadata:

// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        <link rel="preload" as="image" href="/hero.webp" type="image/webp" />
      </head>
      <body>{children}</body>
    </html>
  );
}

PageSpeed Image Checklist

• Convert all images to WebP (or AVIF + WebP fallback)
• Generate multiple sizes and use srcset
• Add loading="lazy" to all below-fold images
• Always specify width and height attributes
• Keep LCP image under 75 KB
• Preload your LCP image
• Never lazy-load the LCP image