Image Optimization Analysis
Checks
Alt Text
Present on all
elements (except decorative:
role="presentation"
)
Descriptive: describes the image content, not "image.jpg" or "photo"
Includes relevant keywords where natural, not keyword-stuffed
Length: 10-125 characters
Good examples:
"Professional plumber repairing kitchen sink faucet"
"Red 2024 Toyota Camry sedan front view"
"Team meeting in modern office conference room"
Bad examples:
"image.jpg" (filename, not description)
"plumber plumbing plumber services" (keyword stuffing)
"Click here" (not descriptive)
File Size
Tiered thresholds by image category:
Image Category
Target
Warning
Critical
Thumbnails
< 50KB
100KB 200KB Content images < 100KB 200KB 500KB Hero/banner images < 200KB 300KB 700KB Recommend compression to target thresholds where possible without quality loss. Format Format Browser Support Use Case WebP 97%+ Default recommendation AVIF 92%+ Best compression, newer JPEG 100% Fallback for photos PNG 100% Graphics with transparency SVG 100% Icons, logos, illustrations Recommend WebP/AVIF over JPEG/PNG. Check for
element with format fallbacks. Recommended Element Pattern Use progressive enhancement with the most efficient format first: < picture < source srcset = " image.avif " type = " image/avif "
< source srcset = " image.webp " type = " image/webp "
< img src = " image.jpg " alt = " Descriptive alt text " width = " 800 " height = " 600 " loading = " lazy " decoding = " async "
</ picture
The browser will use the first supported format. Current browser support: AVIF 93.8%, WebP 95.3%. JPEG XL — Emerging Format In November 2025, Google's Chromium team reversed its 2022 decision and announced it will restore JPEG XL support in Chrome using a Rust-based decoder. The implementation is feature-complete but not yet in Chrome stable. JPEG XL offers lossless JPEG recompression (~20% savings with zero quality loss) and competitive lossy compression. Not yet practical for web deployment, but worth monitoring for future adoption. Responsive Images srcset attribute for multiple sizes sizes attribute matching layout breakpoints Appropriate resolution for device pixel ratios < img src = " image-800.jpg " srcset = " image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w " sizes = " (max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px " alt = " Description "
Lazy Loading loading="lazy" on below-fold images Do NOT lazy-load above-fold/hero images (hurts LCP) Check for native vs JavaScript-based lazy loading
< img src = " photo.jpg " loading = " lazy " alt = " Description "
< img src = " hero.jpg " alt = " Hero image "
fetchpriority="high" for LCP Images Add fetchpriority="high" to your hero/LCP image to prioritize its download in the browser's network queue: < img src = " hero.webp " fetchpriority = " high " alt = " Hero image description " width = " 1200 " height = " 630 "
Critical: Do NOT lazy-load above-the-fold/LCP images. Using loading="lazy" on LCP images directly harms LCP scores. Reserve loading="lazy" for below-the-fold images only. decoding="async" for Non-LCP Images Add decoding="async" to non-LCP images to prevent image decoding from blocking the main thread: < img src = " photo.webp " alt = " Description " width = " 600 " height = " 400 " loading = " lazy " decoding = " async "
CLS Prevention width and height attributes set on all
elements aspect-ratio CSS as alternative Flag images without dimensions
< img src = " photo.jpg " width = " 800 " height = " 600 " alt = " Description "
< img src = " photo.jpg " style = " aspect-ratio : 4 / 3 " alt = " Description "
< img src = " photo.jpg " alt = " Description "
File Names Descriptive: blue-running-shoes.webp not IMG_1234.jpg Hyphenated, lowercase, no special characters Include relevant keywords CDN Usage Check if images served from CDN (different domain, CDN headers) Recommend CDN for image-heavy sites Check for edge caching headers Output Image Audit Summary Metric Status Count Total Images - XX Missing Alt Text ❌ XX Oversized (>200KB) ⚠️ XX Wrong Format ⚠️ XX No Dimensions ⚠️ XX Not Lazy Loaded ⚠️ XX Prioritized Optimization List Sorted by file size impact (largest savings first): Image Current Size Format Issues Est. Savings ... ... ... ... ... Recommendations Convert X images to WebP format (est. XX KB savings) Add alt text to X images Add dimensions to X images Enable lazy loading on X below-fold images Compress X oversized images