Web Image Optimization Checklist - 15 Actionable Items for Production

Why You Need a Systematic Image Optimization Checklist

Images account for over 50% of total page weight on average. According to HTTP Archive's 2024 data, the median image transfer size on mobile pages is approximately 1,000KB, representing 52% of total page weight. Systematic image optimization can reduce page load times by 40-60% in many real-world scenarios.

However, image optimization is not simply about compression. It spans multiple layers: format selection, resolution management, delivery methods, loading strategies, and cache design. Missing a single item can negate the benefits of other optimizations. A hero image with loading="lazy" accidentally applied will degrade LCP regardless of how well-compressed it is.

This checklist is designed as a reusable production tool. Use it during new site builds, existing site audits, and pre-release reviews. Each item includes specific numeric targets and verification methods, providing clear criteria for "what's good enough."

In Google's Core Web Vitals, LCP must be under 2.5 seconds at the 75th percentile to be rated "good." Research shows that over 70% of LCP elements are images. This makes image optimization the single most impactful lever for SEO rankings. Sites that systematically address all 15 items in this checklist typically see LCP improvements of 1-3 seconds, often moving from "needs improvement" to "good" territory.

Format and Compression Optimization - Items 1 Through 5

The first five items focus on optimizing the image files themselves.

• Item 1: Correct Format Selection - Use AVIF/WebP/JPEG for photographs, SVG/WebP/PNG for illustrations and logos. Photos saved as PNG without transparency waste 60-80% of bandwidth. Build a fallback chain with <picture>: AVIF → WebP → JPEG for maximum compression with universal compatibility.
• Item 2: Quality Parameter Tuning - JPEG quality 75-85, WebP quality 75-80, and AVIF quality 50-65 represent optimal ranges. The visual difference between quality 100 and quality 80 is imperceptible to human eyes, yet file sizes differ by 2-3x. Use tools like butteraugli or SSIM scores to validate that quality reduction doesn't cross perceptual thresholds.
• Item 3: Metadata Removal - Strip EXIF, XMP, and ICC profiles (when sRGB). Smartphone photos carry 10-50KB of metadata including GPS coordinates. Run exiftool -all= image.jpg for batch removal. For privacy compliance (GDPR), metadata stripping should be mandatory in your upload pipeline.
• Item 4: Lossless Compression Optimization - Re-compress PNGs with oxipng or pngquant. Quantization to 256 colors with pngquant achieves 60-80% size reduction with no visible degradation for most web graphics. Optimize SVGs with svgo to remove unnecessary attributes, comments, and editor metadata.
• Item 5: Animated Image Optimization - Convert GIF animations to WebP animation or MP4 video. A 5MB 10-second GIF becomes approximately 1MB as WebP animation or 300KB as MP4. For content above the fold, <video autoplay muted loop playsinline> with MP4 provides the best compression ratio.

Responsive and Resolution Optimization - Items 6 Through 9

These items ensure optimal images are delivered based on device screen size and pixel density.

• Item 6: srcset and sizes Configuration - Specify breakpoint-aware display widths: <img srcset="img-400.jpg 400w, img-800.jpg 800w, img-1200.jpg 1200w" sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 600px">. Without sizes, browsers assume 100vw and download unnecessarily large images. This single attribute can save 200-500KB per page on mobile devices.
• Item 7: Retina Display Optimization - For 2x displays, provide images at exactly 2x the display dimensions. 3x images for all users is excessive. A 600px display-width image needs a 1200px source for Retina sharpness. The 3x variant (1800px) doubles file size compared to 2x with diminishing perceptual returns.
• Item 8: Oversized Image Detection - Verify no images are served larger than their display size. A 4000px CMS upload displayed at 800px wastes 96% of bandwidth. Use Chrome DevTools' "Properly size images" audit to identify offenders. Implement server-side or build-time resizing based on max-width requirements.
• Item 9: Art Direction - When mobile and desktop require different crops or aspect ratios, use <picture> with <source media="..."> to serve device-appropriate images. A wide banner with text becomes unreadable when simply scaled down on mobile. Art direction solves this by serving a tighter crop on small screens.

Properly implementing items 6-9 reduces mobile transfer sizes by 50-70%. Item 8 is frequently overlooked but often yields the largest single improvement. For WordPress sites, reviewing auto-generated thumbnail size settings can produce dramatic bandwidth savings across hundreds of images.

Loading Strategy Optimization - Items 10 Through 12

When and how images load directly impacts perceived performance and Core Web Vitals scores.

• Item 10: Lazy Loading Application - Apply loading="lazy" to below-the-fold images. However, never apply loading="lazy" to LCP candidate images in the viewport. This is a common mistake that degrades LCP by 300-500ms because the browser delays the fetch until the image enters the viewport. Use Chrome DevTools Performance panel to identify LCP elements and ensure they use loading="eager" (the default).
• Item 11: fetchpriority Configuration - Set fetchpriority="high" explicitly on LCP images. This promotes the image in the browser's resource priority queue, improving LCP by 100-300ms. Conversely, set fetchpriority="low" on decorative backgrounds and icons to preserve bandwidth for critical resources.
• Item 12: Preload for Critical Images - CSS background images and JavaScript-injected images are invisible to the browser's preload scanner. Add <link rel="preload" as="image" href="hero.avif" type="image/avif"> in <head> to initiate early downloads. Limit preload to 1-2 LCP images maximum; overuse delays other critical resources.

The combination of items 10-12 provides precise control over image loading priority. Measured data shows sites with proper implementation achieve an average 800ms LCP improvement compared to unoptimized sites. The effect is most pronounced on slow connections (3G equivalent), where prioritization prevents bandwidth contention between dozens of simultaneous image requests.

Delivery and Caching Optimization - Items 13 Through 15

The final items address image delivery infrastructure and caching strategy.

• Item 13: CDN Utilization - Serve images through a CDN to respond from the nearest edge server. Without CDN, round-trip time from Tokyo to New York is approximately 200ms; with CDN, it drops below 20ms. Services like Cloudflare, CloudFront, and Fastly also offer automatic image optimization (format conversion, resizing) at the edge, eliminating the need for build-time processing.
• Item 14: Cache Header Configuration - Set long-term caching for image files: Cache-Control: public, max-age=31536000, immutable (1 year). Include content hashes in filenames (e.g., hero-a3f2b1.webp) to ensure cache invalidation on content updates. The immutable directive eliminates conditional requests (304 responses), further accelerating repeat visits.
• Item 15: HTTP/2+ Protocol - HTTP/2 multiplexing enables parallel image downloads without the 6-connection limit of HTTP/1.1. Upgrading to HTTP/2 alone can reduce image loading completion time by 30-50%. HTTP/3 (QUIC) further eliminates Head-of-Line Blocking during packet loss, improving stability on mobile networks with variable connectivity.

Delivery infrastructure optimization works independently of individual file optimization. Sites that have already maximized compression can still achieve 20-40% additional speed improvements through CDN deployment and cache configuration. The effect is dramatic for sites with international audiences, where geographic distance to origin servers creates significant latency.

Find web optimization books on Amazon

Operationalizing the Checklist - Prioritization and Automation

You don't need to implement all 15 items simultaneously. Prioritize based on impact magnitude and implementation cost.

Quick wins (implementable in 1 day): Items 2 (quality parameters), 3 (metadata removal), and 10 (lazy loading) can be batch-applied to existing images with immediate effect. These three items alone typically reduce transfer size by 30-50%.

Medium-term improvements (1 week): Items 1 (format selection), 6 (srcset/sizes), and 11 (fetchpriority) require template or build pipeline changes but automatically apply to all future images once implemented.

Infrastructure improvements (1 month): Items 13 (CDN), 14 (caching), and 15 (HTTP/2) involve server configuration or infrastructure changes but benefit the entire site holistically.

For automation, integrate image optimization checks into your CI/CD pipeline. Use lighthouse ci to monitor LCP scores and block deployments when thresholds are breached. Integrate sharp or squoosh-cli into build processes to automate resizing, format conversion, and compression, removing the need for developers to manually optimize each image. For periodic audits, leverage unlighthouse (site-wide Lighthouse scanning) or WebPageTest's API to detect performance regressions early. Establish a quarterly review cadence where you re-run the full checklist against production, catching drift from new content additions or CMS changes that bypass optimization pipelines.