Modern Image Optimization Guide

Images often make up more than 50% of a typical web page's total weight. Optimizing them is crucial for achieving good Web Performance. This guide covers the essential techniques for serving fast, high-quality images.

Modern Image Formats

While JPEG and PNG have been the standard for decades, modern formats provide significantly better compression algorithms.

Interactive Format Comparison

Select a format below to see simulated file size comparisons based on a standard 1MB source image.

Responsive Images

Serving a 4K desktop image to a mobile user wastes massive amounts of data and battery life. Responsive images ensure the browser only downloads what it needs.

The `srcset` Attribute

Use `srcset` and `sizes` on the `<img>` tag to provide the browser with a list of image files and instructions on how wide the image will be rendered.

<img
  src="image-800w.jpg"
  srcset="image-400w.jpg 400w, image-800w.jpg 800w, image-1200w.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="A description of the image"
>

The `<picture>` Element

The `<picture>` element gives you more granular control. It's useful for providing different formats (like AVIF falling back to JPEG) or for Art Direction.

<picture>
  <!-- Serve AVIF if supported -->
  <source type="image/avif" srcset="image.avif">
  <!-- Serve WebP if supported -->
  <source type="image/webp" srcset="image.webp">
  <!-- Fallback to JPEG -->
  <img src="image.jpg" alt="Description">
</picture>

Art Direction

Art direction involves changing the image crop or content based on the screen size, ensuring the subject remains the focal point regardless of the device.

<picture>
  <source media="(min-width: 800px)" srcset="hero-desktop.jpg">
  <source media="(min-width: 400px)" srcset="hero-tablet-crop.jpg">
  <img src="hero-mobile-crop.jpg" alt="Hero image focused on subject">
</picture>

Lazy Loading

Lazy loading defers the loading of off-screen images until the user scrolls near them. Modern browsers support this natively.

<img src="image.jpg" loading="lazy" alt="Description" width="800" height="600">

Always include `width` and `height` attributes to prevent Cumulative Layout Shift (CLS).

Compression Tools

Automate your image compression as part of your build process. Popular tools include:

• Squoosh: A web app by Google Chrome Labs for testing different codecs and settings visually.
• Sharp: A high-performance Node.js module used by many frameworks (like Astro and Next.js) under the hood.
• ImageMagick: A robust command-line tool for image manipulation.