Image Optimization Checklist
A practical, prioritized checklist for optimizing images on any website. Start with the high-impact items — they typically yield the biggest performance gains with the least effort.
First step: Scan your website to see current image sizes and identify which items on this checklist need attention.
Sizing
Images are no larger than 2x their rendered display size
HighWidth and height attributes set on all <img> tags (prevents CLS)
Highsrcset used for key images to serve size-appropriate versions
MediumNo images rendered at 0x0 (hidden but still downloaded)
LowFormat
WebP used for photographs (25-35% smaller than JPEG)
HighSVG used for icons, logos, and simple graphics
MediumAVIF considered for browsers that support it (50%+ savings)
Medium<picture> element used with format fallbacks
MediumCompression
JPEG/WebP quality set to 80-85 (visually identical, half the size)
HighPNG images run through a lossless optimizer
MediumNo uncompressed images served directly from camera/editor
HighLoading
Below-fold images use loading="lazy"
HighHero/LCP image is NOT lazy loaded (needs immediate load)
HighLCP image has fetchpriority="high"
MediumCritical images preloaded with <link rel="preload">
MediumDelivery
Images served from a CDN or optimized hosting
MediumProper cache headers set (long max-age for hashed filenames)
MediumHTTP/2 or HTTP/3 enabled for parallel loading
LowSEO & Accessibility
Descriptive alt text on all meaningful images
HighDecorative images use alt="" (empty, not missing)
MediumDescriptive file names (photo-sunset-beach.jpg, not IMG_4532.jpg)
LowStart your audit — scan any page to check sizing and visibility.
Scan Your Website