Optimizing Images for Web Performance

Web Image Optimization Guide

Images typically account for 40-60% of total page weight on most websites. Optimizing them is often the single most impactful performance improvement you can make.

The Optimization Checklist

1. Choose the Right Format

• Photos: WebP (or AVIF) > JPEG
• Graphics/icons: SVG > WebP lossless > PNG
• Animations: WebP/AVIF > GIF (never use GIF for video-like content)

2. Set Appropriate Quality

• Web photos: 75-85% for JPEG, 75-85% for WebP
• Thumbnails: 60-70% is usually sufficient
• High-detail images: 85-92%

3. Resize to Display Dimensions Never serve a 4000x3000 photo if it displays at 800x600. Resize first, then compress.

4. Use Responsive Images

<img srcset="photo-400.webp 400w,
             photo-800.webp 800w,
             photo-1200.webp 1200w"
     sizes="(max-width: 600px) 400px,
            (max-width: 1000px) 800px,
            1200px"
     src="photo-800.webp"
     alt="Description"
     loading="lazy"
     decoding="async">

5. Implement Lazy Loading Add loading="lazy" to images below the fold. This defers loading until the image is near the viewport.

6. Add Proper Dimensions Always include width and height attributes to prevent layout shift (CLS):

<img src="photo.webp" width="800" height="600" alt="...">

Impact by Optimization Step

Step	Typical Savings	Effort
Format conversion (JPEG to WebP)	25-35%	Low
Quality optimization	30-60%	Low
Proper sizing	50-90%	Medium
Lazy loading	0% transfer, faster initial load	Low
CDN + caching	Faster delivery	Medium
Responsive images	40-70% on mobile	High

Measuring Results

Use these tools to verify your optimizations:

• Lighthouse: Performance score and image audit
• WebPageTest: Waterfall analysis of image loading
• Chrome DevTools: Network tab for individual image sizes
• Core Web Vitals: LCP (Largest Contentful Paint) impact