WebP vs AVIF vs JPEG: which image format should you use?

The short answer: use WebP as your default because almost every browser made in the last several years supports it and it beats JPEG on size at a glance. Reach for AVIFwhen you want the smallest files and can rely on modern browsers. Keep JPEG only as a fallback for the few places that still need it. The rest of this guide explains why.

The one-line difference

• JPEG — the decades-old lossy format. Universally supported, no transparency, larger than the modern options at similar quality.
• WebP — Google’s format. Lossy and lossless, supports transparency and animation, broadly supported.
• AVIF — built on the AV1 video codec. Usually the smallest files of the three, supports transparency and wide colour, and encodes more slowly.

Side-by-side

Swipe the table sideways to compare every column →

“Smaller” here is a general, well-documented trend rather than a fixed percentage — the exact saving depends on the image, the resolution and the quality setting you pick. For a deeper look at how quality settings behave, see how to compress images without losing quality.

What each format is actually good at

JPEG: compatibility

JPEG’s superpower is that it works everywhere, on every device, in every piece of software. It is lossy only (no transparency), and at a given visual quality it generally produces larger files than WebP or AVIF. It remains the right choice when you must guarantee an image opens somewhere you don’t control — email clients, old embedded systems, third-party importers.

WebP: the sensible default

WebP gives you better compression than JPEG for photos, plus lossless mode, transparency and animation. Because its support is now very wide, it is the safest way to shrink images across a general audience without worrying about the odd browser. MDN and web.dev both recommend WebP as a strong default for photographic content. Try it on your own photo with our WebP compressor.

AVIF: smallest files, modern browsers

AVIF is derived from the AV1 video codec and typically squeezes out the smallest files of the three at comparable quality, with strong support for wide colour range and high dynamic range. The trade-off historically has been slower encoding and, until recently, patchier browser support. On a device you control (like a browser tab), the encoding cost is invisible to the reader — the file only has to decode. Our AVIF compressor runs the encoder right in your tab.

A simple decision rule

1. Website images for a broad audience? Start with WebP. It’s the best effort-to-payoff ratio right now.
2. Want the absolute smallest payload and your analytics show modern browsers? Use AVIF — and keep a WebP or JPEG fallback via the HTML <picture> element.
3. Graphics with flat colours, text or logos that must stay pixel-perfect? Consider a lossless format such as PNG or lossless WebP/AVIF (see our quality guide).
4. Need it to open literally anywhere? JPEG.

How to serve the right one automatically

You don’t have to choose just one. The <picture> element lets you offer AVIF first, then WebP, then JPEG, and the browser picks the first format it understands:

<picture>
  <source srcset="photo.avif" type="image/avif" />
  <source srcset="photo.webp" type="image/webp" />
  <img src="photo.jpg" alt="…" width="…" height="…" />
</picture>

That way the newest browsers get the smallest files and everyone else still sees your image.