Image format checker. WebP + AVIF audit.
Paste HTML. We scan every <img> tag for format (JPG / PNG / WebP / AVIF / SVG), lazy-loading attribute, srcset / sizes presence, and dimension attributes. Surfaces modern-format adoption + CLS-prevention readiness.
Paste HTML. We scan every <img> tag for format (JPG / PNG / WebP / AVIF / SVG / GIF), loading="lazy" attribute, srcset/sizes presence, and width/height attributes for CLS prevention.
Sources used
- web.dev WebP guide
- web.dev lazy-loading images
- web.dev optimize CLS (width/height impact)
- MDN img attribute reference
Parsing happens entirely in your browser.
Privacy: parsing happens in your browser. Nothing is sent or logged.
Modern formats cut bytes 30-50%.
AVIF compresses 25-50% better than WebP. WebP compresses 25-35% better than JPG. Both are universally supported in modern browsers (WebP since 2020, AVIF since late 2022). Beyond format, three other img-tag attributes are critical: loading=lazy (free LCP improvement on below-fold images), srcset (responsive serving prevents mobile from downloading desktop images), and width+height (CLS prevention since browsers compute aspect ratio from these). The checker above audits all four signals in pasted HTML.
Three image-optimization rules. One, ship WebP minimum (AVIF if your CDN supports it cheaply). Two, lazy-load every below-the-fold image — never lazy-load the LCP candidate. Three, always include width+height attributes — CLS prevention is free with this single attribute pair.
Tools in the same cluster: Image Compression Calculator for the byte-savings projection. Page Weight Analyzer for the byte breakdown. Image Alt Checker for the alt-attribute audit.
Five answers.
WebP vs AVIF — which should I use?
AVIF compresses 25-50% better than WebP at equivalent quality. WebP compresses 25-35% better than JPG. Both are universally supported in modern browsers (WebP since 2020, AVIF since late 2022). Modern picture-element setup ships AVIF first with WebP fallback then JPG fallback for ancient browsers. For most sites, the bigger win is moving off JPG/PNG to WebP — a 30% byte reduction across 100+ images is meaningful. AVIF is the next-step optimization; the encode cost is higher so most CDNs charge extra for it.
Why do I need width and height on every img?
width and height attributes let the browser reserve layout space before the image loads, preventing Cumulative Layout Shift (CLS) — one of three Core Web Vitals. Pages with un-sized images commonly fail CLS's 0.1 good threshold because content jumps when each image loads. The fix is trivial: set width + height (browsers compute aspect ratio automatically since 2019) on every img. The checker above flags every img missing dimensions.
When should I use loading='lazy'?
loading='lazy' tells the browser to defer image fetch until the image is near the viewport. Apply to ALL below-the-fold images; it's a free LCP improvement (less competing fetches during initial load). NEVER apply to above-the-fold hero images or LCP candidate images — lazy-loading the LCP image directly hurts LCP timing. Most sites should be at 80%+ of img tags lazy; the checker above shows your adoption percentage.
What about srcset for responsive images?
srcset + sizes lets the browser choose the right image size for the device, preventing mobile users from downloading desktop-sized images. A 2000px hero downscaled to 400px on mobile wastes 90% of the bytes. The pattern: srcset='hero-400.jpg 400w, hero-800.jpg 800w, hero-1600.jpg 1600w' sizes='(max-width: 768px) 400px, (max-width: 1200px) 800px, 1600px'. Modern image CDNs (Cloudflare Images, Vercel Image Optimization, Shopify CDN) generate the variants automatically. The checker above shows srcset adoption per img.
Does this tool save my data?
No. Parsing happens in your browser. Nothing is sent to any server.
Still on JPG-only?
Our web development engagements ship WebP/AVIF migration via image CDN, lazy-loading discipline, srcset for responsive serving, and width/height for CLS prevention.
Published · Last updated .