Complete Guide to Image Optimization for the Web

Images account for roughly half of the average webpage's total weight. Unoptimized images are the single biggest cause of slow load times, poor Core Web Vitals scores, and high bounce rates. The good news: image optimization is straightforward and can reduce page weight by 40–80% without any visible quality loss.

This guide covers every aspect of image optimization — from choosing the right format to compression techniques, responsive delivery, lazy loading, and CDN strategies. Whether you're a designer exporting assets or a developer building a performance-first site, these practices will make a measurable difference.

Image Formats: Choosing the Right One

Selecting the optimal image format is the single most impactful optimization you can make. Each format has strengths and trade-offs, and using the wrong one can cost you megabytes of unnecessary bandwidth.

JPEG (JPG)

JPEG is the workhorse of web photography. It uses lossy compression — permanently removing imperceptible visual data to achieve dramatic file size reductions. A JPEG at quality 80 is nearly indistinguishable from quality 100 but can be 50–70% smaller. JPEG excels at photographs and complex images with millions of colors and smooth gradients. However, it does not support transparency and creates visible artifacts around sharp edges and text at low quality settings.

PNG

PNG uses lossless compression, preserving every pixel exactly. This makes it ideal for screenshots, diagrams, text-heavy images, and any graphic requiring transparency (alpha channel). The trade-off is file size — PNGs are significantly larger than JPEGs for photographic content. Use PNG-8 (256 colors) for simple graphics and PNG-24/32 for full-color images with transparency. Tools like pngquant and oxipng can reduce PNG file sizes by 50–70% without visible quality loss by reducing the color palette intelligently.

WebP

Developed by Google, WebP supports both lossy and lossless compression, transparency, and animation — essentially combining the strengths of JPEG, PNG, and GIF in one format. WebP files are typically 25–35% smaller than equivalent JPEGs at the same visual quality. Browser support now exceeds 97%, covering all modern browsers. WebP should be your default format for most web images.

AVIF

AVIF is the newest contender, based on the AV1 video codec. It achieves remarkable compression — up to 50% smaller than JPEG at equivalent quality. AVIF supports HDR, wide color gamut, transparency, and animation. Browser support is around 92% (all Chromium browsers, Firefox, and Safari 16+). The main drawback is slower encoding speed, which matters for build pipelines but not for end users. Use AVIF as your primary format with WebP or JPEG fallback.

SVG

SVG is a vector format described in XML. Unlike raster formats, SVGs scale to any size without quality loss, making them perfect for logos, icons, and illustrations. SVGs are typically tiny (a few KB), can be styled with CSS, animated with JavaScript, and inlined directly into HTML. Run SVGs through SVGO to strip metadata and unnecessary attributes for a typical 30–50% size reduction.

GIF

GIF supports animation but uses an extremely inefficient compression algorithm limited to 256 colors. For animated content, replace GIFs with <video> elements using MP4 or WebM — you'll get 80%+ file size savings with better quality. The only remaining use case for GIF is simple, very short animations where the video element isn't practical.

Compression Techniques

Compression is where you turn format selection into actual file size savings. Understanding the two fundamental approaches helps you make better decisions.

Lossy Compression

Lossy compression permanently discards visual data that the human eye can't easily perceive. The key is finding the quality sweet spot — the lowest setting that remains visually identical to the original.

• JPEG quality 75–85: The optimal range for photographs. Below 70, blocking artifacts become noticeable. Above 90, file sizes increase dramatically with negligible visual improvement.
• WebP quality 75–80: WebP's compression artifacts are less visible than JPEG's at equivalent quality levels, so you can safely use slightly lower values.
• AVIF quality 60–70: AVIF maintains impressive visual fidelity even at lower quality settings, making this range the practical sweet spot.

Always compare the original and compressed versions side by side at the actual display size. Artifacts that are obvious at 200% zoom may be completely invisible at normal viewing distance.

Lossless Compression

Lossless compression reduces file size without removing any data — the decompressed image is identical to the original. This is essential for screenshots, diagrams, technical illustrations, and any image where every pixel matters.

• PNG optimization: Tools like pngquant reduce the color palette while maintaining visual quality, achieving 50–70% reductions. oxipng and zopflipng optimize the compression algorithm itself.
• SVG optimization: SVGO removes comments, metadata, editor data, empty groups, and unnecessary attributes. This typically yields 30–50% savings.
• Lossless WebP: WebP's lossless mode produces files 26% smaller than equivalent PNGs on average.

Responsive Images with srcset

Serving a single 2000px image to every device wastes bandwidth on mobile and looks blurry on 4K displays. Responsive images solve this by providing multiple versions and letting the browser choose the best one.

Format Negotiation with the Picture Element

The <picture> element allows you to offer the same image in multiple formats. The browser selects the first source it supports:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Hero image" width="1200" height="600">
</picture>

AVIF-capable browsers get the smallest file, WebP-capable browsers get the next smallest, and everything else falls back to the universally supported JPEG.

Resolution Switching with srcset and sizes

The srcset attribute provides width-based variants, and sizes tells the browser how wide the image will be at different viewport widths:

<img
  srcset="photo-400w.webp 400w,
          photo-800w.webp 800w,
          photo-1200w.webp 1200w,
          photo-1600w.webp 1600w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1000px) 50vw,
         800px"
  src="photo-800w.webp"
  alt="Product photo"
  width="1200" height="800"
>

A phone with a 400px viewport downloads the 400w version. A desktop with a 1440px viewport and 2x display picks the 1600w version. Everyone gets exactly the right file.

Lazy Loading

Images below the initial viewport shouldn't load until the user scrolls near them. This reduces initial page weight and dramatically improves time to interactive.

Native Lazy Loading

The simplest approach uses the browser's built-in loading attribute:

<!-- Below-fold images: lazy load -->
<img src="gallery-1.webp" loading="lazy" alt="Gallery image"
     width="800" height="600">

<!-- Above-fold hero: eagerly load and prioritize -->
<img src="hero.webp" loading="eager" alt="Hero banner"
     width="1200" height="600" fetchpriority="high">

Native lazy loading is supported by all modern browsers (97%+ global support). No JavaScript library required.

Critical Rule: Never Lazy-Load the LCP Image

The Largest Contentful Paint (LCP) image — usually the hero banner or main product photo — must load as fast as possible. Apply loading="eager" and fetchpriority="high" to it. For maximum performance, also preload it in the document head:

<link rel="preload" as="image" href="hero.webp"
      type="image/webp" fetchpriority="high">

CDN and Caching Strategies

Even perfectly optimized images need efficient delivery. A Content Delivery Network (CDN) serves your images from edge servers located close to users worldwide, reducing latency from hundreds of milliseconds to single digits.

• Image CDNs: Services like Cloudflare Images, Imgix, and Cloudinary go beyond simple caching — they auto-resize, convert formats, adjust quality, and strip metadata on the fly. You upload one high-quality source, and the CDN generates optimized variants for every device and browser.
• Cache headers: Images rarely change, so set aggressive cache headers: Cache-Control: public, max-age=31536000, immutable. This tells browsers and CDN nodes to cache images for one year without revalidation.
• Cache busting: Use content-based hashes in filenames (photo-a1b2c3.webp) so that when an image actually changes, the new filename forces a fresh download while all other cached images remain valid.

Core Web Vitals Impact

Image optimization directly affects two of Google's three Core Web Vitals metrics, which are ranking factors for search results.

Largest Contentful Paint (LCP)

LCP measures when the largest visible element finishes rendering. For most pages, this is the hero image. Google targets LCP under 2.5 seconds. Optimize LCP by choosing the right format and quality, preloading the hero image, using fetchpriority="high", and serving from a CDN.

Cumulative Layout Shift (CLS)

CLS measures unexpected visual movement. Images without explicit dimensions cause layout shifts as they load and push content around. Always set width and height attributes on every <img> element, or use the CSS aspect-ratio property. This lets the browser reserve the correct space before the image downloads.

Image Optimization Checklist

• Serve AVIF with WebP fallback using the <picture> element
• Compress: JPEG quality 80, WebP quality 80, AVIF quality 65
• Resize to the largest actual display size — never serve 4000px originals
• Use srcset and sizes for responsive images
• Lazy-load below-fold images with loading="lazy"
• Preload the LCP image with fetchpriority="high"
• Always set width and height to prevent CLS
• Use SVG for icons and logos (optimize with SVGO)
• Replace animated GIFs with <video> for 80%+ savings
• Serve from a CDN with long cache headers and content-based filenames
• Audit with Lighthouse and WebPageTest regularly