The Complete Image Optimization Checklist for 2026

Resize to display dimensions (not original resolution)

Never upload an image larger than its maximum display size. If an image displays at 800px wide on desktop, serving a 4000px original wastes bandwidth and processing time. 28% of image bytes on the web are wasted by oversized dimensions (HTTP Archive 2025). Account for 2x DPR for Retina displays: if the display size is 800px, serve a 1600px image. Going beyond 2x provides no visible benefit on any current display.

Choose the right format (WebP for photos, PNG for graphics, SVG for icons)

Format selection has a dramatic impact on file size. WebP is 25-34% smaller than JPEG at equivalent quality with 97%+ browser support. AVIF is up to 50% smaller than JPEG but has slower decode times and 93% browser support. For a detailed comparison, read WebP vs AVIF vs JPEG: which format to use.

Compress at quality 78-82 for web

For lossy formats (JPEG, lossy WebP), quality 78-82 is the sweet spot. Below 75, compression artifacts become noticeable. Above 85, file size increases significantly with minimal visual improvement. Quality 80 is the best general-purpose setting, providing 50-70% file size reduction with imperceptible quality loss on screen-sized displays. For a complete guide, read how to compress images without losing quality.

Convert to WebP or AVIF for modern browsers

If your images are still in JPEG or PNG, converting to WebP is the single easiest win. WebP delivers 25-34% smaller files with no visible quality loss and supports transparency. AVIF pushes savings even further at up to 50% smaller than JPEG, but encode/decode is slower and browser support is at 93%. Use the picture element to serve AVIF with WebP and JPEG fallbacks. For details, read the best image format for web in 2026.

Strip EXIF metadata for privacy and file size

Every photo from a smartphone or camera contains EXIF metadata: GPS coordinates, device model, camera settings, timestamps, and sometimes even the owner's name. This data typically adds 10-50KB per image and creates serious privacy risks. A photo posted online with GPS data reveals the exact location where it was taken. Strip all EXIF data before uploading images to any public-facing website. For a complete guide, read how to remove EXIF data to protect privacy.

Generate descriptive filenames (not IMG_4521.jpg)

Search engines use filenames as a signal for image content. A file named golden-retriever-playing-fetch.webp tells Google far more than IMG_4521.jpg. Use descriptive, lowercase, hyphen-separated filenames that include relevant keywords naturally. For large batches, AI-powered renaming tools can analyze image content and generate SEO-friendly names automatically. Read the AI image renaming guide for SEO for the full workflow.

Write meaningful alt text for every image

Alt text serves three purposes: accessibility (screen readers), SEO (search engines use it to understand image content), and fallback display when images fail to load. Every informational image should have descriptive alt text under 125 characters. Decorative images should have an empty alt attribute (alt=""). Good alt text describes the content, not the image itself. "Golden retriever catching a frisbee in a park" is better than "dog photo."

Create multiple sizes for responsive srcset

A single image size cannot serve every device optimally. A 1600px hero image is overkill for a 375px mobile screen. Generate multiple sizes- typically 400w, 800w, 1200w, and 1600w- so the browser can select the best match via srcset. This can reduce image downloads by 40-60% on mobile devices compared to serving a single large image.

Add width and height attributes on every img element

Always include width and height attributes on img elements. This prevents Cumulative Layout Shift (CLS) by allowing the browser to reserve the correct space before the image loads. Without these attributes, the page layout jumps when each image finishes loading, creating a jarring experience. Combine with CSS max-width: 100%; height: auto; for responsive behavior while maintaining the aspect ratio reservation. See web.dev's CLS optimization guide for details.

Use srcset and sizes for responsive images

The srcset attribute tells the browser which image sizes are available, and the sizes attribute tells it how large the image will display at each viewport width. Together, they allow the browser to select the optimal image for the user's device, downloading only the pixels needed. A common pattern: generate images at 400w, 800w, 1200w, and 1600w. The browser selects the best match based on viewport width and device pixel ratio.

Use the picture element for format switching

The HTML picture element allows you to serve modern formats (AVIF, WebP) with automatic fallback to JPEG for older browsers. The browser evaluates source elements in order and uses the first format it supports. List AVIF first (smallest), then WebP, then JPEG as the final fallback. This ensures every user gets the best format their browser can handle without any JavaScript.

Add loading="lazy" to below-fold images

Native lazy loading defers loading until the image is near the viewport, saving bandwidth and improving initial load time. Add loading="lazy" to all images below the fold. Critical rule: never lazy load the LCP image (usually the hero image above the fold). Lazy loading the LCP image is one of the most common performance mistakes and directly harms your Core Web Vitals score.

Add fetchpriority="high" to the LCP image

The fetchpriority attribute tells the browser to prioritize downloading the LCP image over other resources. Since 72% of mobile pages have an image as their LCP element, adding fetchpriority="high" to that image directly improves LCP time. Combine this with loading="eager" (or simply omit the loading attribute, which defaults to eager). For a complete guide to optimizing LCP, read how to optimize images for Core Web Vitals.

Set max-width: 100% and height: auto on all images

This is the foundation of responsive images in CSS. Without max-width: 100%, images overflow their containers on small screens. Without height: auto, the image distorts when the width is constrained. Together with the HTML width and height attributes from step 9, this preserves the aspect ratio while allowing the image to scale down responsively.

Use aspect-ratio or padding-bottom hack for placeholders

While the image loads, the browser needs to reserve the correct amount of space. The modern approach is the CSS aspect-ratio property (e.g., aspect-ratio: 16 / 9), which is supported in all modern browsers. The legacy approach uses the padding-bottom percentage hack (e.g., padding-bottom: 56.25% for 16:9). Both approaches eliminate CLS by reserving the exact space before the image arrives. Combine with a low-contrast background color or a blurred placeholder for a polished loading experience.

Use content-visibility: auto for off-screen images

The content-visibility: auto CSS property tells the browser to skip rendering elements that are far off-screen. When applied to image containers, the browser defers layout and paint work until the container is near the viewport. This reduces the initial rendering workload, especially on long pages with many images. Pair it with contain-intrinsic-size to provide a size estimate and prevent layout shifts when the element enters the viewport.

Set Cache-Control headers (max-age=31536000 for hashed filenames)

Images rarely change after upload. Set aggressive cache headers: Cache-Control: public, max-age=31536000, immutable for versioned image URLs (URLs that include a hash or version number). This tells browsers and CDN edge servers to cache the image for one year without revalidation, eliminating repeat downloads entirely. If your image URLs are not versioned, use shorter max-age values with ETag-based revalidation.

Enable content negotiation (Accept header) for automatic format serving

Configure your server or CDN to serve different image formats based on the browser's Accept header. When a browser sends Accept: image/avif, serve AVIF. When it sends Accept: image/webp, serve WebP. Fall back to JPEG otherwise. Cloudflare, AWS CloudFront, and most modern CDNs support this natively through image transformation features. This approach serves optimal formats without requiring the picture element on every image.

Use a CDN for global delivery

A Content Delivery Network serves images from edge servers geographically close to the user, dramatically reducing latency. For a user in Tokyo accessing a server in New York, a CDN can reduce image load time by 200-400ms. This directly improves LCP. Most CDNs also provide automatic image optimization (resize, format conversion, compression) at the edge. Cloudflare, Fastly, and AWS CloudFront all offer image transformation features that can handle format conversion and resizing automatically based on the request.

Run PageSpeed Insights on key pages monthly

Google PageSpeed Insights provides both lab data (Lighthouse) and field data (CrUX) for your pages. Check your key pages monthly at minimum. Pay attention to the image-specific opportunities: "Serve images in next-gen formats," "Properly size images," "Efficiently encode images," and "Defer offscreen images." Each of these directly corresponds to a step in this checklist.

Check Core Web Vitals report in Search Console

Google Search Console provides a Core Web Vitals report showing real-world performance data from Chrome users. Monitor the LCP trend over time. If LCP degrades after a content update, it is almost always because new images were added without optimization. Set up a process to review CWV data weekly and create alerts if LCP exceeds 2.5 seconds on any page group.

Audit new images before publishing (don't let your team upload unoptimized images)

For sites with content teams, unoptimized images uploaded by non-technical team members are the most common source of performance regression. Establish a pre-upload workflow: every image goes through resize, compress, format conversion, and alt text before it touches the CMS. For developer teams, integrate image optimization into your CI/CD pipeline using tools like sharp (Node.js), next/image (Next.js), or automated build-time optimization. For content teams without technical access, use browser-based tools like SammaPix Compress to ensure every image is optimized before it reaches the CMS. Read how to batch compress images with no signup for the full workflow.