The Complete Website Image Optimization Checklist for 2026

Pre-Upload Checklist

Before adding any image to your website, verify these items:

Dimensions

• Image dimensions match display size (do not serve 4000px for a 800px display)
• Retina versions available (2x for high-DPI screens)
• Responsive versions created for different breakpoints

Format

• Using WebP as primary format (25-34% smaller than JPEG)
• JPEG fallback available for older browsers
• SVG used for logos, icons, and simple graphics
• PNG only where transparency is actually needed

Compression

• JPEG quality 75-85% (invisible quality loss)
• WebP quality 75-80%
• PNG optimized with lossless compression
• No image exceeds 300 KB (aim for under 150 KB)

Metadata

• EXIF data stripped (saves 10-100 KB per image)
• No GPS location data in public images

HTML Implementation

• Alt text on every image (accessibility + SEO)
• Width and height attributes set (prevents layout shift)
• Loading="lazy" on below-fold images
• Srcset with multiple sizes for responsive loading
• Sizes attribute specifying display width at breakpoints

Performance

• Largest Contentful Paint (LCP) image is preloaded
• Above-fold images are NOT lazy loaded
• Images served from CDN
• Cache headers set for static images

Quick Wins

If you are short on time, these three changes give the biggest impact:

1. Convert to WebP (30% smaller instantly)
2. Resize to actual display dimensions (often 50-80% smaller)
3. Compress at quality 80% (barely visible difference)

Tools Needed

You can do everything on this checklist with browser-based tools:

• Image compressor for quality reduction
• Image resizer for dimension changes
• Image converter for format changes
• Bulk compressor for processing entire image folders
• EXIF remover for stripping metadata