WebP vs AVIF
What Each Format Is and Where It Fits
WebP vs AVIF is a comparison of two modern image formats designed for the web, and both usually produce smaller files than JPEG or PNG. WebP was introduced by Google and its lossy mode is based on the VP8 video codec. AVIF is based on the AV1 video codec, developed by the Alliance for Open Media.
JPEG remains the most widely supported format for photographs and is decoded by every browser. PNG is lossless and supports transparency, which suits graphics. SVG is a vector format written as text, suited to logos and icons, and it stays sharp at any size. These older formats are useful as fallbacks, and the broader context is in the image optimization overview.
File Size, Quality and Transparency Compared
At the same visual quality, AVIF generally produces smaller files than WebP, and WebP generally produces smaller files than JPEG. The exact savings depend on the image, so the only reliable comparison is between your own files encoded in each format.
- File size: AVIF is usually the smallest at equal quality.
- Transparency: both WebP and AVIF support it in lossy and lossless modes.
- Colour depth: AVIF supports high dynamic range and wide colour, which matter for some photographs and displays.
- Animation: WebP is commonly used for animated images as an alternative to GIF.
JPEG has no transparency, so it cannot replace PNG or WebP for logos on a coloured background.
What Speed Means for an Image Format
The smallest file is not always the fastest to deliver. Total time depends on the file size, the time needed to decode the image, and how many bytes the browser must download before it can show anything. A slightly larger WebP that decodes more quickly can sometimes appear sooner than a smaller AVIF, especially on older or low-end devices.
Encoding time is a separate cost on the server. AVIF is much slower to encode than WebP, which matters for sites that generate many versions of every upload. A large photo library converted in advance may take far longer in AVIF, even though each visitor later downloads less.
Serving Both Formats With a Fallback
A photography site creates AVIF, WebP and JPEG versions of each picture. The page lists the AVIF file first in a picture element, followed by WebP and then JPEG. Browsers that understand AVIF use the smallest file. Older browsers skip the sources they cannot decode and use the one they can.
Because each browser picks the first source it supports, the order matters. The JPEG fallback is always listed last, so every browser can show the photograph. The mechanics of this element are explained in the responsive images topic.
Frequently asked questions
Which Image Format Should I Choose for My Website?
For most sites, the practical answer is to offer WebP with a JPEG or PNG fallback, and add AVIF where the extra encoding effort is worth the savings. Photographs suit lossy WebP or AVIF, while logos and icons suit SVG or PNG. Test the result on your own images, since visual quality varies.
Is AVIF Supported in All Browsers?
Not every browser, although support in current major browsers is broad. Older browsers and some older devices may not decode AVIF. Serving a fallback in a second format, or in JPEG, avoids a broken image for those visitors. Support changes over time, so check current browser support data before deciding.