Image Optimization for the Web: Formats, Compression, and Responsive Images

Images account for over 50% of the median page weight. Optimizing them is the single highest-impact performance improvement most sites can make. Modern formats and responsive delivery have made this easier than ever—but only if you implement them correctly.

Modern Image Formats: WebP and AVIF

WebP is the baseline modern format—supported everywhere, offering 25–35% smaller files than JPEG at equivalent quality. AVIF goes further, delivering 50% savings over JPEG thanks to its AV1-based compression.

Serve AVIF with WebP fallback and JPEG/PNG as a last resort:

<picture>
  <source srcset="/photo.avif" type="image/avif" />
  <source srcset="/photo.webp" type="image/webp" />
  <img src="/photo.jpg" alt="Description" loading="lazy" />
</picture>

Or automate this through your build pipeline. Most modern frameworks provide image components that handle format negotiation automatically. Sharp and squoosh CLI tools can batch-convert your entire media library:

npx squoosh-cli --avif '{quality:60}' --webp '{quality:75}' src/images/*.jpg

Responsive Images with srcset and sizes

Serving a single large image to every device wastes bandwidth on mobile. Use srcset to deliver appropriate sizes:

<img
  src="/hero-1200.webp"
  srcset="
    /hero-400.webp 400w,
    /hero-800.webp 800w,
    /hero-1200.webp 1200w,
    /hero-2000.webp 2000w
  "
  sizes="(max-width: 600px) 400px, (max-width: 1024px) 800px, 1200px"
  alt="Hero image"
  loading="lazy"
/>

The browser picks the best source based on viewport width and device pixel ratio. Set sizes accurately—the default (100vw) forces high-resolution images on mobile when a smaller one would suffice.

Compression Quality and Artifact Management

Compression is a trade-off between file size and visual quality. For photographs, quality 80–85 for JPEG and 75–80 for WebP is the sweet spot. For interface screenshots and illustrations with flat color, PNG or lossless WebP preserves sharp edges.

Use perceptual quality metrics like SSIM or Butteraugli rather than subjective judgment. Squoosh and Sharp both support quality targeting with visual comparison previews:

import sharp from 'sharp';

await sharp('photo.tiff')
  .webp({ quality: 75, effort: 6 })
  .toFile('photo.webp');

An effort level of 6 applies more encoding passes for smaller files at the same quality.

CDN-Based Image Optimization

A proper image CDN handles format negotiation, resizing, and compression at the edge. Services like Cloudinary, Imgix, or a self-hosted Thumbor instance accept URL parameters for on-the-fly transforms:

https://cdn.example.com/w_800,q_75,f_auto/photo.jpg

The f_auto parameter serves WebP or AVIF automatically based on the browser's Accept header. This eliminates build-time format generation and lets you adjust quality without redeploying.

Lazy Loading and Decoding

Native lazy loading (loading="lazy") defers offscreen images until the user scrolls near them. Combine with explicit dimensions to prevent layout shift:

<img
  src="/photo.webp"
  width="800"
  height="600"
  loading="lazy"
  decoding="async"
  alt="Description"
/>

The decoding="async" attribute lets the browser decode the image off the main thread, improving scrolling responsiveness. For LCP images, use loading="eager" and fetchpriority="high".

Automated Image Pipelines

The best image pipeline is invisible to developers. Integrate optimization into your build step or deploy hook. A typical Vite config uses the vite-imagetools plugin:

import { imagetools } from 'vite-imagetools';

export default {
  plugins: [
    imagetools({
      defaultDirectives: () => new URLSearchParams({
        format: 'webp;avif;png',
        quality: '80',
        loading: 'lazy',
      }),
    }),
  ],
};

This automatically optimizes and formats every imported image in your project.

Modern image optimization isn't complex—it's systematic. Choose the right format, deliver the right size, compress appropriately, and automate everything. Your users on slow networks will notice the difference immediately.

Our web development services include complete image optimization pipelines as part of every project.