WebP and AVIF: modern image formats

Why this matters

JPEG is the safest photographic format ever shipped and still universal, but its compression reflects an older default. WebP, supported by every current browser, and AVIF, supported by all modern major browsers, both beat JPEG on page weight for a similar visual result. Because images are usually the largest single download on a marketing page, per the image optimisation guide, choosing the modern format is one of the highest yielding changes you can make to page performance and bandwidth.

Format comparison

Byte sizes quoted below are for a typical photographic JPEG saved at quality 80. WebP photos usually land 25 to 35 percent smaller; AVIF commonly lands another 10 to 30 percent under WebP, with better low-bitrate behaviour.

When to use which

• Use WebP as the default for photographic images. It is the most broadly compatible modern format and works in a single plain <img> tag in every current browser, with no server negotiation.
• Use AVIF when you can serve through <picture> or content negotiation with a WebP fallback, and you want the smallest bytes for photos, product galleries, or data-heavy pages.
• Use lossless WebP for screenshots, line art, and graphics with transparency. Lossless WebP is often meaningfully smaller than lossless PNG for the same capture.
• Keep JPEG only for the emergency fallback branch inside the <picture> tree, or for legacy clients you must keep compatible.

When JPEG stays the better choice

If the site audience still runs browsers from before roughly 2020, or you cannot build a publishing pipeline that generates alternatives reliably, a well-compressed JPEG served at the right size with strong caching beats a WebP you deliver inconsistently. Format choice never outweighs the basics of resize, compress, cache, and srcset.

Conversion steps

1. Confirm what to convert. Run the Lighthouse image audit and look for JPEG files larger than the render size.
2. Choose a build-time converter such as sharp, cwebp, or avifenc.
3. Regenerate all derivatives from the original masters, never from an already-compressed JPEG.
4. For AVIF, switch markup to <picture> so every browser receives a decodeable format.
5. Keep the conversion in the build so it runs on every deploy, not a one-off manual script.

<picture>
  <source srcset="/assets/hero.avif" type="image/avif">
  <source srcset="/assets/hero.webp" type="image/webp">
  <img src="/assets/hero.jpg" alt="Description" width="1600" height="900">
</picture>

Avoid double-encoding

The most common error is converting an already-compressed JPEG to WebP. Each lossy stage adds new blocking artefacts and loses fine detail. To avoid double encoding:

1. Keep a high-quality master (PNG, TIFF, or a low-compression JPEG) that only editors touch.
2. Generate WebP and AVIF as build-task derivatives from that master, never from a web-ready file.
3. Compare visually in a browser side by side, not by file size alone, to confirm the quality is indistinguishable.

Then serve the derivatives from cache with long-lived headers, covered in the static asset delivery guide. The source image optimisation guide walks the rest of the chain: render sizing, srcset, lazy loading, and delivery.

> A note on effort: do not convert purely decorative or tiny images. The return is concentrated in the largest photographic files, usually the hero and the first few product shots.