Unoptimized Images

What is this?

You need to mail a one-page letter. Do you put it in a regular envelope or pack it in a massive moving box with styrofoam peanuts? That is what serving unoptimized images does — you are sending vastly more data than needed. A 4000x3000 PNG screenshot at 4MB looks identical to a properly compressed WebP at 50KB. Your visitors cannot tell the difference, but their browser and data plan absolutely can.

Why it matters

• For your visitors: Images are typically the heaviest resources on a webpage, often accounting for over 50% of total page weight. Unoptimized images mean longer load times, more data consumption (expensive on mobile plans), and a sluggish experience — especially on anything slower than a fast broadband connection.
• For your business: Page speed directly impacts SEO rankings, bounce rates, and conversions. Shopify found that a 1-second improvement in load time increased mobile conversions by 27%. If your images are the bottleneck, optimizing them is the single highest-impact thing you can do.
• The standard: Use modern formats (WebP or AVIF) instead of PNG/JPEG. Serve images at the size they are displayed — never load a 4000px wide image if it renders at 400px. Compress images to the appropriate quality level (80% for photos, lossless for icons).

<picture>
  <source srcset="/hero.avif" type="image/avif" />
  <source srcset="/hero.webp" type="image/webp" />
  <img
    src="/hero.jpg"
    alt="Hero banner"
    width="1200"
    height="630"
    loading="eager"
  />
</picture>

<img
  src="/screenshot-original.png"
  alt="Hero banner"
/>
<!-- 4.2 MB, 4000x3000px, displayed at 600px wide -->

How to fix it

React / Next.js

The Next.js Image component automatically optimizes images — converting to WebP, resizing on demand, and serving responsive sizes.

import Image from "next/image";

// Automatic optimization: Next.js converts, resizes, and caches
<Image
  src="/hero.jpg"
  alt="Hero banner"
  width={1200}
  height={630}
  priority
  quality={80} // default is 75, which is usually fine
/>

// Responsive images: serve different sizes for different screens
<Image
  src="/product.jpg"
  alt="Product photo"
  width={800}
  height={600}
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
/>

For static assets you control, pre-optimize them at build time:

# Convert PNG to WebP (requires cwebp or sharp-cli)
npx sharp-cli -i public/images/*.png -o public/images/ -f webp -q 80

# Or use squoosh for a visual GUI
npx @aspect-build/rules_js squoosh-cli --webp '{"quality": 80}' image.png

Plain HTML

Use the <picture> element to serve modern formats with fallbacks, and srcset for responsive sizing.

<!-- Modern format with fallbacks -->
<picture>
  <source srcset="/photo.avif" type="image/avif" />
  <source srcset="/photo.webp" type="image/webp" />
  <img src="/photo.jpg" alt="Photo" width="800" height="600" />
</picture>

<!-- Responsive: serve different sizes based on viewport -->
<img
  src="/photo-800.webp"
  srcset="/photo-400.webp 400w, /photo-800.webp 800w, /photo-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Photo"
  width="800"
  height="600"
/>

Quick checklist for image optimization:

• Use WebP or AVIF instead of PNG/JPEG
• Resize images to 2x the display size (for retina), not larger
• Compress photos to 75-85% quality
• Use SVG for logos and icons (infinitely scalable, tiny file size)
• Remove EXIF metadata from photos

How the cat scores this

The scanner checks image file sizes, formats, and whether images are served at appropriate dimensions relative to their display size. Images over 200KB get flagged. PNGs that should be WebPs are noted. Images served at 3x or more their display size are called out. The scanner also checks for missing srcset attributes on images that could benefit from responsive sizing.

Further reading

• web.dev: Use modern image formats — why WebP and AVIF matter
• Squoosh — Google's free image compression tool with visual comparison
• Next.js Image optimization — how Next.js handles images automatically