Image Optimization Checker

Images are the easiest performance win and the most consistently neglected. This checker scans every image on the page, measures the gap between displayed and delivered size, and tells you exactly how many kilobytes each fix returns.

The displayed-size gap

The number-one image issue we see is the 3,000-pixel-wide hero served to a phone displaying it at 360px. Browsers happily download the full thing, decode it, then throw 90% of the pixels away. The fix is server-side resizing tied to the displayed dimensions, delivered via srcset so each device gets the closest match. CDNs like Cloudflare Images, Imgix, and Cloudinary do this on the fly; a custom Next.js or Astro image component handles it at build time.

Modern formats are not optional anymore

WebP is now supported in every browser back to Safari 14, and AVIF works everywhere except very old Safari. A WebP version of a typical photographic JPEG is 25–35% smaller at the same perceived quality; AVIF is 50%+ smaller. There is no reason to ship a 600KB JPEG when a 200KB AVIF looks identical — except that nobody set up the build pipeline. The <picture> element with <source type="image/avif"> and <source type="image/webp"> fallbacks delivers each browser its best supported option and degrades to JPEG everywhere else.

Why lazy loading is finally safe

loading="lazy" on <img> is supported in every modern browser, requires no JavaScript, and defers offscreen images until the user scrolls near them. The only catch: never put loading="lazy" on the LCP image — you'll tank your Largest Contentful Paint score. The LCP image should be fetchpriority="high" and ideally preloaded.

CLS — the silent image killer

An image with no width and height attributes occupies zero space until it loads, then suddenly pushes the rest of the page down. That's Cumulative Layout Shift, and it tanks both your CWV score and your user's confidence. Always declare intrinsic dimensions so the browser reserves the box. Aspect-ratio CSS is the modern fallback when dimensions are unknown.

The CDN multiplier

Even with perfect image markup, serving from a single origin in one region means transatlantic latency for half your audience. An image CDN cuts the first byte by 100–300ms globally and handles format negotiation, resizing, and compression in one pipeline. For most sites it's the single highest-ROI infrastructure change available.