AVIF: the same picture in about half the bytes
AVIF is an image format built on the AV1 video codec. For photos it is typically 50% smaller than JPEG at the same visual quality, and every current major browser can display it.
What it is
AVIF (AV1 Image File Format) was developed by the Alliance for Open Media, whose members include Google, Mozilla, Apple and Netflix, and was released in 2019. It is royalty-free.
JPEG compresses images with techniques from the early 1990s. AVIF uses the intra-frame coding of AV1: variable block sizes, directional prediction and in-loop filtering. The practical result is fewer visible artefacts at small file sizes, especially in skies, gradients and fine texture.
It also supports transparency, animation, HDR, wide colour gamuts and 10- and 12-bit colour, so one format covers photos, graphics with transparency and high-end displays.
Compared with JPEG and WebP
Typical figures for photographic images. Results vary by image.
| AVIF | WebP | JPEG | |
|---|---|---|---|
| Size compared with JPEG | 50–75% smaller | 25–35% smaller | Baseline |
| Transparency | Yes | Yes | No |
| Animation | Yes | Yes | No |
| HDR and wide gamut | Yes | No | No |
| Bit depth | 8, 10, 12 | 8 | 8 |
| Encoding speed | Slow | Fast | Fast |
AVIF's main cost is encoding time, which is why it's usually converted on a server once and then cached, rather than on every request.
Browser support
| Browser | AVIF since |
|---|---|
| Chrome and Edge | Version 85 (2020) and 121 (2024) |
| Firefox | Version 93 (2021) |
| Safari, macOS and iOS | Version 16 (2022) |
| Opera | Version 71 (2020) |
ServeProxy always returns AVIF for JPEG, PNG and similar sources; it doesn't switch formats per browser. If your audience includes browsers older than the versions above, use <picture> with your original image as the fallback:
<picture>
<source type="image/avif" srcset="https://serveproxy.com/?url=https%3A%2F%2Fexample.com%2Fphoto.jpg">
<img src="https://example.com/photo.jpg" alt="Harbour at dusk" loading="lazy">
</picture>Serving your images as AVIF
You don't need to convert anything yourself. Point your image tags at ServeProxy and it converts each image the first time it's requested:
<!-- Before -->
<img src="https://example.com/photo.jpg" alt="Harbour at dusk">
<!-- After -->
<img src="https://serveproxy.com/?url=https%3A%2F%2Fexample.com%2Fphoto.jpg" alt="Harbour at dusk">On WordPress, the plugin rewrites every image URL for you.
Questions
Does AVIF look worse than JPEG?
Not at comparable file sizes. At the same size AVIF usually looks noticeably better, with less blocking and banding. ServeProxy encodes at quality 65, which is visually close to the original for most photos.
Is AVIF good for logos and graphics?
For graphics with transparency it is usually much smaller than PNG. For logos and icons, SVG is often better still, and ServeProxy serves SVG as SVG.
Why does ServeProxy turn animated GIFs into WebP, not AVIF?
Animated WebP is decoded quickly and reliably in every current browser, and it's already far smaller than GIF.
What about JPEG XL?
JPEG XL compresses well too, but only Safari displays it by default. ServeProxy can produce it on request; see the documentation.