--- title: "Image Optimization Checker — WebP, AVIF, Lazy-Load Audit" description: "Free image optimization checker. Find oversized, uncompressed images and missing modern formats. See exact KB savings from WebP/AVIF." canonical: "https://lemwatch.com/tools/image-optimization-checker" source: "https://lemwatch.com" --- # Image Optimization Checker > Find oversized, uncompressed, or wrong-format images on any page. Get exact byte savings for WebP/AVIF conversion. 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 `` element with `` and `` fallbacks delivers each browser its best supported option and degrades to JPEG everywhere else. ## Why lazy loading is finally safe `loading="lazy"` on `` 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. ## What this tool checks - Images served at larger dimensions than displayed - Missing modern formats (WebP, AVIF) - Uncompressed JPEG/PNG payloads - Missing `srcset` for responsive delivery - Lazy-loading attribute on offscreen images - Total image weight per page ## Why it matters On a typical site, images are 50–70% of total page weight and the single biggest LCP and INP killer. A hero image served at 3× the displayed size on a Moto G eats 800ms of LCP and burns 2× the user's data plan. ## How to fix what it finds - Convert JPEG/PNG to WebP (25–35% smaller) or AVIF (50%+ smaller) - Resize images server-side to the displayed dimensions - Use `` with `srcset` for responsive delivery - Set `loading="lazy"` on every below-the-fold image - Set explicit `width` and `height` to prevent CLS ## Methodology We crawl the URL with a headless browser, record every ``, ``, and CSS background-image, then measure displayed dimensions vs. natural dimensions, content-type, file size, and presence of `srcset`, `sizes`, `loading`, `width`, `height`, and `fetchpriority` attributes. For each image we estimate the byte savings of converting to WebP and AVIF at perceived-quality-equivalent settings (cq-level 30 for AVIF, quality 80 for WebP). We do not modify or re-upload your images — the savings figure is a projection based on published format benchmarks across your file sizes. ## Frequently asked questions ### Should I use WebP or AVIF? Both. Serve AVIF via `` for browsers that support it, WebP for the rest, and a JPEG/PNG fallback. AVIF is smaller but slower to encode; WebP encodes faster and is universally supported. ### How do I implement responsive images? Use `srcset` with multiple resolutions and a `sizes` attribute that tells the browser the displayed width at each breakpoint. The browser picks the smallest image that satisfies the displayed size and the device pixel ratio. ### Can I lazy-load the hero image? No. Lazy-loading the LCP element defers the very thing CWV measures. Use `fetchpriority="high"` on the hero and `loading="lazy"` on everything below the fold. ### What dimensions should my images be? The displayed CSS dimensions multiplied by the maximum device pixel ratio you support (usually 2× or 3×). A hero displayed at 800px CSS should have a 1600px or 2400px source — never 4,000. ### Why does CLS care about images? Without `width` and `height`, the browser doesn't know how tall the image will be and reserves no space. When it finally loads, the page jumps — that's layout shift, and it costs ranking points. ## Related - [All free tools](https://lemwatch.com/tools) - [Lazy Loading Checker](https://lemwatch.com/tools/lazy-loading-checker) - [core web vitals checker](https://lemwatch.com/tools/core-web-vitals-checker) - [Font Loading Checker](https://lemwatch.com/tools/font-loading-checker) - [Lemwatch pricing](https://lemwatch.com/pricing) - [All monitoring checks](https://lemwatch.com/features) - [noindex checker](https://lemwatch.com/tools/indexability-checker) - [HTML Validator](https://lemwatch.com/tools/html-validator)