The Complete Image Optimization Checklist for 2026

Section 1: Before upload — preparing your images

The most impactful optimizations happen before an image ever touches your server. Every image you add to a website should go through these steps.

1. Resize to display dimensions

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. Account for 2x DPR (device pixel ratio) for Retina displays: if the display size is 800px, serve a 1600px image. Going beyond 2x provides no visible benefit on any current display.

For responsive layouts, generate multiple sizes using srcset. Common breakpoints: 400px, 800px, 1200px, and 1600px. This ensures every device downloads only the pixels it needs.

2. Choose the right format

Format selection has a dramatic impact on file size. Use this decision tree:

• Photographs and complex images: WebP (lossy) as default. AVIF if you need maximum compression and your audience uses modern browsers.
• Screenshots, text, UI elements: PNG or WebP (lossless). These images have sharp edges that suffer under lossy compression.
• Logos and icons: SVG whenever possible. For raster logos, PNG with lossless WebP.
• Animated content: WebP animated (replaces GIF at 50-80% smaller file sizes).

3. Compress at the right quality level

For lossy formats (JPEG, lossy WebP), quality 75-85 is the sweet spot. Below 75, artifacts become noticeable. Above 85, file size increases significantly with minimal visual improvement. Quality 80 is the best general-purpose setting, providing 60-70% file size reduction with imperceptible quality loss on screen-sized displays.

4. Strip EXIF and metadata

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 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. This reduces file size and eliminates privacy concerns in one step.

5. Add descriptive alt text

Alt text serves three purposes: accessibility (screen readers), SEO (search engines use alt text 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 of the image, not the image itself. "Golden retriever catching a frisbee in a park" is better than "dog photo." Include relevant keywords naturally but never stuff keywords into alt text.

Section 2: HTML implementation — the code that serves your images

6. 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 is to generate images at 400w, 800w, 1200w, and 1600w. The browser then selects the most appropriate size based on viewport width and device pixel ratio. This can reduce image downloads by 40-60% on mobile devices compared to serving a single large image.

7. Set explicit width and height

Always include width and height attributes on img elements. This prevents Cumulative Layout Shift (CLS) by allowing the browser to reserve space before the image loads. Combine with CSS max-width: 100%; height: auto; for responsive behavior while maintaining the aspect ratio reservation.

8. Implement lazy loading correctly

Add loading="lazy" to all images below the fold. This defers loading until the image is near the viewport, saving bandwidth and improving initial load time. Critical rule: never lazy load the LCP image (usually the hero image above the fold). Use loading="eager" and fetchpriority="high" for the LCP image to ensure it loads as fast as possible.

9. Use the picture element for format fallbacks

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

Section 3: Server and CDN delivery

10. Set appropriate cache headers

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.

11. Enable content negotiation

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

12. Serve images from a CDN

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.

Section 4: Monitoring and auditing

13. Run PageSpeed Insights regularly

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.

14. Monitor Core Web Vitals 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.

15. Automate image optimization in your workflow

For sites with frequent content updates, manual optimization is unsustainable. Integrate image optimization into your build pipeline using tools like sharp (Node.js), imagemin, or next/image (Next.js). For content teams without technical access, establish a pre-upload workflow using browser-based tools like SammaPix to ensure every image is optimized before it reaches the CMS.

The complete checklist (summary)

Here is every step in a single reference list. Bookmark this section for quick access.

Before upload

• Resize images to display dimensions (2x for Retina)
• Choose the correct format (WebP for photos, PNG for screenshots/logos, SVG for icons)
• Compress at quality 75-85 for lossy formats
• Strip all EXIF metadata (especially GPS data)
• Write descriptive alt text for every informational image
• Use SEO-friendly file names (descriptive, hyphen-separated)

HTML implementation

• Use srcset and sizes for responsive images
• Include width and height attributes on every img element
• Add loading="lazy" to below-fold images
• Use loading="eager" and fetchpriority="high" for the LCP image
• Use the picture element for format fallbacks (WebP with JPEG fallback)
• Include alt attributes on all img elements (empty for decorative images)

Server and CDN

• Set cache headers: Cache-Control: public, max-age=31536000, immutable
• Enable content negotiation for automatic format serving
• Serve images through a CDN for global edge delivery
• Enable HTTP/2 or HTTP/3 for parallel image downloads

Monitoring

• Run PageSpeed Insights on key pages monthly
• Monitor Core Web Vitals in Google Search Console weekly
• Audit new content for unoptimized images after every publish
• Automate image optimization in CI/CD for developer teams

FAQ