Image Optimization.

Performance Core Web Vitals & Page Load

Unoptimized images are the #1 cause of slow page loads

What does this check test?

This check evaluates whether images are properly optimized for web delivery. Optimization includes serving correctly sized images (not downloading a 4000px image to display at 400px), using modern compression, applying appropriate quality settings, and using responsive images for different screen sizes. The HTTP Archive reports that images account for roughly 50% of a typical page's total bytes. Unoptimized images are the single most common performance problem on the web and often the easiest to fix.

Why does it matter?

Images are typically the heaviest resources on a page. A single unoptimized hero image can be 2-5MB — larger than all other page resources combined. This wastes bandwidth, delays LCP (since the LCP element is often an image), and creates a poor experience on mobile networks. Properly optimized images can reduce page weight by 50-80% with no visible quality loss. Image optimization often provides the best return on investment of any performance optimization because the savings are so large.

Who is affected?

E-commerce sites with product catalogs, media-heavy content sites, portfolio and photography sites, and any site with user-uploaded content are most affected. Sites using CMS platforms that don't automatically optimize uploaded images (or have optimization disabled) are common offenders. Marketing landing pages with large hero images and background images are frequently impacted.

Where does this apply?

Check all `<img>` tags, CSS `background-image` properties, and `<picture>` elements. Common issues: images served at full camera resolution (4000x3000px) displayed at 400x300px, JPEG/PNG images that should be WebP/AVIF, images without width/height attributes causing layout shifts, and images above the fold that are lazy-loaded when they should be eagerly loaded. Use Chrome DevTools Network panel filtered to 'Img' to see image sizes and dimensions.

How to fix it

Use responsive images with `srcset` and `sizes` to serve appropriately sized images. Serve responsive images with srcset:

html

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

Serve modern formats with fallbacks using the picture element:

html

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

Use an image CDN (Cloudinary, imgix, Vercel Image Optimization) for automatic resizing and format negotiation. Set JPEG quality to 75-85 and WebP quality to 75-80 — the visual difference is negligible. Always include `width` and `height` attributes to prevent CLS. Use `loading="lazy"` on below-the-fold images but NOT on the LCP image.

References

AppVet checks Image Optimization automatically

Run a free performance scan and get a full report with actionable fixes, including a Fix with AI prompt you can paste into any coding tool.

Run Audit

← All checks