Image Optimization: WebP, AVIF, Responsive Images, and Lazy Loading

Images account for roughly 50% of total page weight on the median website, according to HTTP Archive data. An unoptimized hero image can single-handedly determine your Largest Contentful Paint score. Modern image formats (WebP, AVIF), responsive image techniques, and lazy loading together can reduce image payload by 60-80% without visible quality loss — the single highest-impact performance optimization most websites can make.

Modern Image Formats Compared

JPEG has served the web since 1992, but modern codecs achieve dramatically better compression at equivalent visual quality. WebP (2010) and AVIF (2019) represent two generations of improvement, each offering significant savings over their predecessors.

WebP: The Practical Default

WebP offers 25-35% file size reduction over equivalent-quality JPEG with near-universal browser support (97%+). It supports both lossy and lossless compression, alpha transparency (replacing PNG for UI assets), and animation (replacing GIF). WebP encoding is fast enough for on-the-fly conversion by image CDNs, making it the pragmatic choice for most applications.

AVIF: Maximum Compression

AVIF achieves roughly 50% smaller files than JPEG at equivalent quality — a dramatic improvement. It supports HDR color spaces, 12-bit color depth, and film grain synthesis that preserves perceived detail at very low bitrates. The trade-off is encoding speed: AVIF encoding is 10-20x slower than WebP, making it less suitable for real-time conversion. Pre-generate AVIF assets at build time and use them alongside WebP fallbacks.

Responsive Images with srcset and sizes

A single high-resolution image (2000px wide for desktop retina) wastes enormous bandwidth on mobile devices that display it at 400px. The srcset attribute provides multiple image sizes, and sizes tells the browser the display width at each viewport breakpoint, enabling it to download only the appropriately-sized version.

<img
  src="hero-800.jpg"
  srcset="
    hero-400.jpg   400w,
    hero-800.jpg   800w,
    hero-1200.jpg 1200w,
    hero-1600.jpg 1600w,
    hero-2000.jpg 2000w"
  sizes="
    (max-width: 640px) 100vw,
    (max-width: 1024px) 80vw,
    60vw"
  alt="Dashboard performance overview"
  width="2000"
  height="1200"
>

The width and height attributes enable the browser to calculate the image's aspect ratio before download, reserving the correct space and preventing layout shifts. Always include these dimensions.

Art Direction with picture

The <picture> element provides format negotiation and art direction simultaneously. Use it to serve AVIF to supported browsers with WebP and JPEG fallbacks, and to crop images differently for mobile versus desktop viewports.

<picture>
  <!-- AVIF for browsers that support it -->
  <source
    type="image/avif"
    srcset="hero-800.avif 800w, hero-1600.avif 1600w"
    sizes="(max-width: 1024px) 100vw, 60vw">
  <!-- WebP fallback -->
  <source
    type="image/webp"
    srcset="hero-800.webp 800w, hero-1600.webp 1600w"
    sizes="(max-width: 1024px) 100vw, 60vw">
  <!-- JPEG baseline fallback -->
  <img
    src="hero-800.jpg"
    srcset="hero-800.jpg 800w, hero-1600.jpg 1600w"
    sizes="(max-width: 1024px) 100vw, 60vw"
    alt="Dashboard performance overview"
    width="1600" height="900">
</picture>

Lazy Loading

Images below the fold should load only when the user scrolls near them. The native loading="lazy" attribute implements this behavior without JavaScript. The browser starts fetching the image when it enters a distance threshold from the viewport (typically 1250px on fast connections, 2500px on slow ones).

<!-- Above-the-fold: load eagerly (default) -->
<img src="hero.webp" alt="..." width="1200" height="600"
     loading="eager" fetchpriority="high">

<!-- Below-the-fold: lazy load -->
<img src="feature-chart.webp" alt="..." width="800" height="450"
     loading="lazy">

Never apply loading="lazy" to the LCP element — the hero image or first visible content image. Lazy loading defers the download, directly increasing LCP. Use fetchpriority="high" on the LCP image to tell the browser to prioritize it over other resources.

Placeholder Strategies

Lazy-loaded images leave blank space until they load, creating a jarring visual experience. Low-Quality Image Placeholders (LQIP) show a tiny, heavily compressed version of the image (typically 20-40 bytes as a base64-encoded data URI) that the browser displays as a blurred preview while the full image downloads. CSS blur transitions create a smooth progressive loading effect.

Image CDN Automation

Image CDNs (Cloudinary, imgix, Cloudflare Images, Bunny Optimizer) automate format selection, resizing, and compression at the edge. The CDN detects the browser's Accept header, determines AVIF/WebP/JPEG support, and serves the optimal format automatically. URL-based transformation parameters control resize, crop, and quality without maintaining multiple pre-generated variants.

<!-- Image CDN URL-based transformations -->
<img
  src="https://cdn.example.com/hero.jpg?w=800&q=80&auto=format"
  srcset="
    https://cdn.example.com/hero.jpg?w=400&q=80&auto=format 400w,
    https://cdn.example.com/hero.jpg?w=800&q=80&auto=format 800w,
    https://cdn.example.com/hero.jpg?w=1600&q=80&auto=format 1600w"
  sizes="(max-width: 1024px) 100vw, 60vw"
  alt="Dashboard overview">

The auto=format parameter tells the CDN to negotiate the format based on the Accept header — no <picture> element needed. Quality parameter q=80 provides an excellent compression-to-quality ratio. Below 70, JPEG artifacts become visible; above 85, files grow substantially with minimal perceptible improvement.

SVG for Icons and Illustrations

Vector graphics (SVG) scale to any resolution without quality loss and typically weigh 2-10KB compared to 20-100KB for equivalent raster images. Inline SVGs eliminate HTTP requests entirely and participate in CSS styling (colors, animations) and accessibility (title and desc elements).

Optimize SVGs with SVGO before shipping — it removes editor metadata, simplifies paths, and reduces file size by 30-60%. For icon systems, SVG sprite sheets bundle many icons into a single file referenced by fragment identifiers, combining network efficiency with the flexibility of inline SVG.

Measuring Image Performance

Chrome DevTools Network panel with the "Img" filter shows every image request, its size, format, and timing. The Performance panel highlights the LCP element and shows exactly when it finishes loading and rendering. Lighthouse flags oversized images, missing modern formats, and lazy loading opportunities with actionable recommendations.

WebPageTest provides visual filmstrips showing exactly when images appear during page load, making it easy to identify which images are critical path and which can be deferred. The "Image Analysis" tab compares your images against optimal compression levels and recommends format-specific savings — often identifying 40-60% total payload reduction opportunities on unoptimized sites.