Image optimization is the single most impactful performance improvement you can make for any website. Images typically account for 50-80% of page weight, yet they're often the last thing developers optimize. This comprehensive checklist walks you through every stage of image optimization—from initial capture to production delivery—ensuring your images load fast, look great, and provide excellent user experience across all devices.

Pre-Production: Image Capture & Selection

Optimization begins before you even open an image editor. Following these practices from the start saves time and produces better results:

Before Shooting/Selection

☐ Capture at highest resolution needed: Know your maximum display size (e.g., 1920px for hero images) and shoot at 2x that resolution for sharp retina displays
☐ Use appropriate camera settings: For JPEG output, use highest quality setting (fine/ superfine quality)
☐ Consider RAW for complex edits: RAW files preserve more detail for significant editing, but convert to JPEG for web use
☐ Choose correct color space: Ensure images are in sRGB color space (standard for web)
☐ Remove dust and imperfections: Clean lenses and sensors prevent post-production cleanup

Format Selection Guide

Choosing the right format is foundational to optimization. Use this decision framework:

Image Type	Best Format	Alternative	Avoid
Photography (products, people)	WebP (80% quality)	JPEG (80% quality)	PNG, BMP
Graphics with text	WebP or SVG	PNG-24	JPEG
Logos & icons	SVG	PNG-8	JPEG, BMP
Screenshots	PNG or WebP	JPEG (if photographic)	BMP, TIFF
Diagrams & charts	SVG	PNG	JPEG
Transparent graphics	WebP with alpha	PNG-24	JPEG

Format Decision Tree:

Does image have text or sharp lines? → Yes → Use SVG or PNG. No → Is it a photograph? → Yes → Use WebP or JPEG. No → Use SVG or PNG.

Image Resize Checklist

Never serve images larger than they display. Resizing is the easiest win in image optimization:

☐ Hero/banner images: 1920px wide max for desktop, 960px for mobile
☐ Content images: 1200px wide max for full-width content
☐ Half-width images: 600px wide (fits side-by-side layouts)
☐ Thumbnails: 150-300px depending on UI design
☐ Card images: 400px wide for consistent card grids
☐ Social sharing: 1200x630px for OG images, 1080x1080px for feed posts
☐ Email images: 600px wide max for email compatibility

Critical Rule:

Always resize to the exact display dimensions, not just "smaller". A 4000px image resized to "medium" is still 4000px file size if dimensions aren't changed in the export.

Compression Quality Settings

Finding the right quality balance saves bytes without visible quality loss:

Image Type	JPEG/WebP Quality	Target File Size	Notes
Hero images	75-80%	Under 150KB	Most visible, prioritize size
Blog post images	75-80%	Under 100KB	Balance quality and speed
Product images	80%	Under 100KB	Detail important for purchase decisions
Thumbnails	70%	Under 20KB	Small size, lower detail OK
Background images	65-70%	Under 200KB	Decorative, content still readable

Responsive Images Implementation

Serving the right size for each device prevents wasted bandwidth on mobile:

srcset Syntax Checklist

<img src="hero-800.jpg" 
    srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1600.jpg 1600w"
    sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1600px"
    alt="Description" width="800" height="400">

☐ Generate 1x, 2x, and 3x variants for retina displays
☐ Use width descriptors (w) in srcset for proper selection
☐ Define sizes attribute matching your layout breakpoints
☐ Always include fallback src for browsers without srcset support
☐ Use fetchpriority="high" on hero/LCP images

Lazy Loading Implementation

Defer off-screen images to improve initial load time:

Native Lazy Loading (Recommended)

<img src="photo.jpg" loading="lazy" alt="description" width="400" height="300">

Supported in all modern browsers. Simple, no JavaScript required.

JavaScript Fallback (Legacy Support)

If you need support for very old browsers (IE11), use Intersection Observer API. However, native loading="lazy" is preferred for 95%+ of use cases.

Do NOT Lazy Load:

• Above-the-fold images (LCP impact)
• First viewport images
• Hero banners and featured images
• Primary content images visible without scrolling

CLS Prevention Checklist

Cumulative Layout Shift frustrates users and hurts Core Web Vitals. Prevent it with proper image sizing:

☐ Always specify width and height attributes: Browser reserves space before image loads
☐ Use aspect-ratio CSS property: For responsive images with unknown dimensions
☐ Set minimum-height on containers: Prevents collapse during load
☐ Font-display: swap: Prevents FOUT causing layout shift
☐ Reserve ad space: Fixed dimensions for dynamically loaded ads
☐ Stable embeds: Iframes and embedded content need fixed dimensions

Aspect Ratio Calculation:

padding-bottom = (height / width) * 100%

Example: 400x300 image = (300/400)*100 = 75% padding-bottom

Modern Format Adoption

WebP and AVIF offer significant improvements over legacy formats:

WebP (Recommended Now)

• 25-35% smaller than JPEG at same quality
• Supports transparency (alpha channel)
• 97%+ browser support globally
• Use as primary format for modern browsers
• Provide JPEG fallback for IE11

AVIF (Emerging)

• 50% smaller than JPEG at same quality
• Still gaining browser support
• Best for new projects with modern audience
• Fallback to WebP for unsupported browsers

CDN and Caching Strategy

☐ Use CDN for global delivery: Serve from edge locations closest to users
☐ Set long cache headers: Immutable assets with versioned filenames (app-abc123.js)
☐ Image CDN features: Use cloud-based image resizing (Cloudflare Images, Cloudinary, imgix)
☐ Preconnect to image origins: <link rel="preconnect" href="https://cdn.example.com">
☐ Cache transformed images: Store resized/converted variants to avoid reprocessing

Performance Testing Checklist

Verify your optimizations with these testing steps:

Speed Testing Tools

• Google PageSpeed Insights - Core Web Vitals
• WebPageTest - Detailed waterfall analysis
• GTmetrix - Historical performance tracking
• Chrome DevTools - Real-time profiling

Visual Validation

• Compare original vs compressed quality
• Test on multiple devices (phone, tablet, desktop)
• Check retina vs standard displays
• Verify lazy loading works on 3G throttled connection

Pro Tip: Batch Process

Use image optimization tools that support batch processing to optimize hundreds of images at once. Our bulk compression tool handles this efficiently.

Complete Image Optimization Checklist

Format & Quality

☐ Choose correct format (WebP > JPEG > PNG)
☐ Use appropriate compression quality (70-85%)
☐ Convert to sRGB color space
☐ Strip unnecessary EXIF metadata

Dimensions & Size

☐ Resize to exact display dimensions
☐ Generate responsive variants (1x, 2x, 3x)
☐ Target file sizes (hero <150KB, content <100KB)
☐ Verify final file sizes in production

HTML Implementation

☐ Add width/height attributes to prevent CLS
☐ Implement srcset for responsive images
☐ Use loading="lazy" for off-screen images
☐ Preload hero/LCP images
☐ Set fetchpriority="high" on critical images

Delivery & Performance

☐ Serve from CDN for global performance
☐ Enable browser caching with immutable headers
☐ Test with PageSpeed Insights (LCP < 2.5s, CLS < 0.1)

Frequently Asked Questions

Q: What is the ideal file size for web images?

A: Target under 100KB for content images and under 150KB for hero images. Larger images significantly impact load times, especially on mobile connections.

Q: How do I check if my images need optimization?

A: Use Google PageSpeed Insights. If your LCP is over 2.5 seconds or images are flagged as opportunities, your images need optimization.

Q: What quality setting should I use for JPEG?

A: 80% quality is the sweet spot for most images. For images with text or sharp lines, use 85%. For decorative or background images, 70% is often sufficient.

Q: Does image optimization affect SEO?

A: Yes, page speed is a Google ranking factor, and images are the biggest contributor to page weight. Optimized images improve Core Web Vitals which directly impact SEO.

Q: Should I use responsive images on all websites?

A: Yes, responsive images prevent serving large images to mobile devices, saving bandwidth and improving load times. srcset allows browsers to select the appropriate size.

Image Optimization Checklist: Complete Guide