Image file type and format guide (MDN)

MDN’s reference on web image formats — the neutral, vendor-independent companion to web.dev’s encoder guide. It supplies the format facts behind the avif concept page.

AVIF, per MDN

• What it is: “AVIF… encodes AV1 bitstreams in the High Efficiency Image File Format (HEIF) container” — open, royalty-free.
• Compression: lossy and lossless. “Lossy AVIF images are around 50% smaller than JPEG images” at visually similar quality.
• Vs WebP: “AVIF has better compression than WebP — median 50% vs. 30% compression for the same JPG set.” This is the figure that ranks the delivery levers: AVIF > WebP > legacy JPEG.
• Features: animation (multi-image, “much better compression” than animated GIF), HDR, wide color gamut, and alpha-channel transparency — so AVIF can replace PNG, not just JPEG.
• Limitation: “AVIF does not support progressive rendering, so files must be fully downloaded before they can be displayed.”
• Browser support: Chrome 85, Edge 121, Opera 71, Firefox 93, Safari 16.1 (animation from Firefox 113).

The fallback rule

Because support “has little historical depth,” MDN says provide a fallback in WebP, JPEG, or PNG via the <picture> element. This is the operational answer to “how do I ship AVIF safely” — the format is a progressive enhancement, not a hard swap.

Why this matters here

Gives the avif page a second, independent source for the “≈50% vs JPEG / 50% vs 30% vs WebP” claims and adds the transparency + no-progressive-rendering facts the web.dev encoder guide omits. See page-weight for why images are the slice worth attacking first.