WebP, AVIF or JPEG

Choosing the right image format matters for a website's speed. The choice ranges from traditional formats like JPEG and PNG to newer, more efficient ones like WebP and AVIF. Each has its strengths and weaknesses in file size, browser support and use cases, and a site owner has to balance the smallest, fastest image with broad compatibility.

What Each Format Is Good At

JPEG is a lossy format made for photographs; every browser supports it, but it has no transparency or animation. PNG is lossless, which, per MDN, makes it the better choice for screenshots, diagrams, logos and line art, where blur and colored fringes around text and sharp edges are very visible.

WebP offers much better compression than PNG or JPEG and supports higher color depths, animated frames and transparency. MDN puts lossy WebP images at 25–35% smaller on average than JPEG images of similar visual quality, and lossless WebP at typically 26% smaller than the same image as PNG.

AVIF takes compression a step further. It is an open, royalty-free format that stores AV1-compressed images, and it also supports transparency and animation. MDN notes that AVIF generally compresses better than WebP, with lossy AVIF images around 50% smaller than JPEG. One trade-off: AVIF does not support progressive rendering, so a file must download fully before it is displayed.

Browser Support and Fallback Logic

WebP works in all current versions of Chrome, Edge, Firefox, Opera and Safari. AVIF arrived later: MDN lists support from Chrome 85, Edge 121, Opera 71, Firefox 93 and Safari 16, so older devices may still lack it. If a browser cannot decode a format and no alternative is offered, the visitor sees a broken image. The <picture> element solves this:

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

The order of the <source> elements is key. As MDN explains, the browser checks each source in turn and skips any whose type it does not support, so the most efficient format goes first. If the browser supports AVIF, it uses that; if not, it tries WebP; otherwise it loads the JPEG or PNG in <img>, which also carries the alt text.

How to Serve Modern Images

To optimize images in practice, keep a JPEG (photos) or PNG (graphics) original as the fallback, convert copies to WebP and AVIF, and list AVIF and WebP sources before the <img>. Command-line encoders include Google's cwebp for WebP and avifenc from the libavif project for AVIF; many image CDNs and CMS plugins do the conversion automatically.

Encoding speed is the main caveat. Cloudflare's documentation notes that AVIF encoding can be an order of magnitude slower than encoding to other formats, and that when an image is too large to encode to AVIF quickly, Cloudflare falls back to WebP or JPEG. Converting images once, ahead of time, avoids making visitors wait for on-the-fly encoding.

For search, Google Search supports images referenced in the src attribute of <img> in BMP, GIF, JPEG, PNG, WebP, SVG and AVIF, so switching to a modern format does not cost image indexing as long as the <img> fallback is in place. Serve newer formats first, keep JPEG or PNG as the fallback, and add width and height attributes so images do not shift the layout. Settings and menu names in CDN dashboards and plugins can change.