Image Optimization Checklist

Why Image Optimization Matters

Images account for an average of 42% of a web page's total weight in 2026. Unoptimized images are the single largest contributor to slow page loads, poor Core Web Vitals scores, and degraded user experience. Google's Largest Contentful Paint (LCP) metric, which directly affects search rankings, is most frequently bottlenecked by oversized hero images. A 500KB JPEG that could be a 120KB WebP adds nearly 400KB of unnecessary transfer, costing mobile users 1-2 additional seconds of load time on 4G connections.

The performance impact compounds across pages. An e-commerce site with 50 product images per category page can easily accumulate 10MB+ of image weight without optimization. This not only slows initial page load but also increases bandwidth costs, drains mobile device batteries faster, and penalizes users on metered data plans. Modern image formats like AVIF and WebP, combined with responsive image delivery via srcset, can reduce total image weight by 60-80% without any perceptible quality loss.

Understanding Image Formats

JPEG: The Legacy Standard

JPEG remains the most widely used image format on the web, but it is increasingly outperformed by modern alternatives. JPEG uses lossy DCT-based compression optimized for photographs. Quality settings between 80-85% offer the best balance — below 75%, compression artifacts become visible in gradients and fine details. JPEG does not support transparency or animation. Its primary advantage is universal compatibility: every browser, device, and application can display JPEG files without any issues.

WebP: The Modern Default

WebP, developed by Google, provides 25-35% smaller file sizes than JPEG at equivalent visual quality. It supports both lossy and lossless compression, transparency (alpha channel), and animation. Browser support has reached 97%+ globally, making WebP a safe default for most applications. WebP lossy compression at quality 75-80% produces files roughly equivalent to JPEG at quality 85%, saving significant bandwidth. The format's only limitation is that some older image editing tools do not support it natively.

AVIF: The Next Generation

AVIF (AV1 Image Format) delivers 50% smaller files than JPEG and 20% smaller than WebP at the same visual quality. It is based on the AV1 video codec and supports HDR, wide color gamut, transparency, and animation. Browser support reached 92% globally by early 2026. AVIF encoding is significantly slower than WebP or JPEG, making it less suitable for real-time conversion but ideal for static assets that can be pre-processed during build time. Use AVIF as the primary source in a picture element with WebP and JPEG fallbacks.

The Optimization Checklist Explained

This tool evaluates your images against ten key optimization criteria. Each check contributes to the overall optimization score. Here is what each check evaluates and why it matters.

File Size Check: Compares your image's file size against recommended budgets based on its likely use case. Hero images should be under 200KB, content images under 100KB, and thumbnails under 30KB. Files exceeding these thresholds are flagged for compression or format conversion.

Format Check: Evaluates whether you are using the most efficient format. A PNG photograph is flagged because WebP or AVIF would be dramatically smaller. An SVG raster-traced from a photo is flagged because it produces unnecessarily large files. The ideal format depends on the image content: SVG for icons and illustrations, AVIF/WebP for photographs, PNG only for lossless requirements with transparency.

Dimension Check: Verifies that the image's pixel dimensions are appropriate for web use. An image wider than 2000px is rarely needed on the web — even on 4K displays, most content areas are 800-1200 CSS pixels wide, requiring at most 2400 physical pixels at 2x DPR. Oversized dimensions waste both bandwidth and device memory, as the browser must decode and store the full-resolution image.

Compression Quality: Estimates the compression level and flags images that appear to be saved at unnecessarily high quality. A JPEG saved at quality 100 is often 3-4x larger than quality 85 with no visible difference on screen. This check identifies opportunities for meaningful size reduction through re-compression alone.

Responsive Image Best Practices

Serving a single image to all devices wastes bandwidth on mobile and may appear blurry on high-DPR screens. The HTML <picture> element and srcset attribute solve this by letting the browser select the most appropriate image source based on viewport width and device pixel ratio.

A complete responsive image setup looks like this: define multiple sizes of each image (e.g., 400w, 800w, 1200w, 1600w), provide them in multiple formats (AVIF, WebP, JPEG), and use the sizes attribute to tell the browser the image's display width at each breakpoint. The browser then selects the optimal combination of format and resolution, downloading only one file. This approach can reduce image payload by 50-70% compared to serving a single large image to all devices.

For the Largest Contentful Paint image, always add fetchpriority="high" and avoid lazy loading. For all images below the fold, use native lazy loading with loading="lazy". Always include explicit width and height attributes to prevent Cumulative Layout Shift (CLS). These three attributes — fetchpriority, loading, and dimensions — are the most impactful single-line changes you can make for image performance.

Build-Time vs Runtime Optimization

There are two approaches to image optimization: build-time processing and runtime (CDN-based) transformation. Build-time optimization uses tools like Sharp, squoosh, or imagemin during your build pipeline to pre-generate optimized images in multiple formats and sizes. This approach produces the smallest possible files because you can spend more time on compression and manually verify quality. The downside is that adding new images requires a rebuild.

Runtime optimization uses an image CDN (Cloudflare Images, Imgix, Cloudinary, Vercel Image Optimization) to transform images on-the-fly based on request parameters. You upload a single high-resolution source, and the CDN generates the appropriate format, size, and quality for each request. This approach is more flexible and requires no build changes, but adds a per-request processing cost and may produce slightly larger files than carefully tuned build-time optimization. For most teams, a hybrid approach works best: optimize critical above-the-fold images at build time and use a CDN for the rest.