What is AVIF? The image format explained
What AVIF is, how it compares to JPG and WebP, which browsers support it, where it falls short, and how to convert images to and from AVIF.
· 5 min read
AVIF is an image format that often stores a photo in around half the bytes of a JPG at similar visual quality. It works in every major browser today, yet many apps still cannot open it. That combination makes it excellent for websites and awkward for almost everything else. Here is what it is, how it compares, and when to use it.
Where AVIF comes from
AVIF stands for AV1 Image File Format. It was published in 2019 by the Alliance for Open Media, the group of companies behind the AV1 video codec, including Google, Mozilla, Microsoft, Netflix and Amazon. It is royalty-free, which is a big reason browsers adopted it quickly.
Technically, an AVIF file is a single AV1-compressed frame (or a sequence of frames) stored in the HEIF container, the same container family Apple uses for HEIC photos. HEIC uses the HEVC codec instead, which is why the two look alike but are supported by different software.
What AVIF can do
- Lossy and lossless compression in one format.
- Transparency, including soft edges, like PNG and WebP.
- High bit depth and HDR. 10-bit and 12-bit color and wide color gamuts, where JPG and WebP stop at 8 bits.
- Animation as image sequences, much smaller than GIF.
- Clean low-quality results. At small sizes, AVIF tends to smooth detail rather than break into blocks, so heavily compressed images still look tidy.
AVIF vs WebP vs JPG
| Feature | AVIF | WebP | JPG |
|---|---|---|---|
| Typical photo size | Often about half of JPG | Usually 25–35% below JPG | Baseline |
| Transparency | Yes | Yes | No |
| Animation | Yes | Yes | No |
| HDR and high bit depth | Yes, up to 12-bit | No | No, in practice |
| Encoding speed | Slow | Fast | Fast |
| Progressive loading | Rarely used | No | Yes |
| Browser support | Current versions of all major browsers | All modern browsers | All |
| Apps, editors and upload forms | Patchy | Good, with gaps | Universal |
The size gap depends on the image. AVIF’s lead is largest on smooth photos, skies and gradients, and smallest on noisy or very detailed images. For graphics with sharp text, lossless formats or high-quality settings remain the safer choice.
Browser support
Chrome added AVIF in version 85 (2020) and Firefox in version 93 (2021). Safari followed with version 16 in 2022, and Safari 16.4 extended it to older macOS versions. Edge was last, in version 121 in early 2024. Current versions of all major desktop and mobile browsers display AVIF, but people on older devices that no longer receive browser updates may not. That is why sites usually offer a fallback.
Outside the browser, support is uneven. Some photo viewers, editors and operating systems open AVIF and many upload forms and older apps do not. Don’t send an AVIF by email or upload one to a form unless you know it is accepted.
Trade-offs to know about
- Encoding takes longer. AVIF encoders do far more work than JPG or WebP encoders, so converting a large photo to AVIF takes noticeably longer. Decoding in the browser is fast.
- Fine texture can look smoothed at low quality settings. Check hair, fabric and foliage.
- No widely used progressive mode. A large AVIF appears when it has loaded, rather than sharpening gradually like a progressive JPG, so keep hero images reasonably sized.
AVIF vs HEIC
The two are close relatives: both store images in the HEIF container, and both came out of video codecs. The difference is licensing and support. HEIC uses HEVC, which requires patent licenses, so it is mostly found on Apple devices and rarely displays on the web. AVIF uses royalty-free AV1, which is why browsers adopted it. If you have iPhone photos you want on a website, converting them to AVIF or WebP gives you a small file that browsers can actually show; for sharing, convert HEIC to JPG instead.
Settings that work for AVIF
- Photos: start at quality 75, where Graviton’s slider starts, and lower it only after checking skin, hair and foliage.
- Hero images: resize to 1920 or 2560 pixels first. Fewer pixels also means a faster encode.
- Graphics and screenshots: use Lossless, or keep them as PNG; low-quality AVIF can soften thin lines and small text.
- Transparent images: AVIF keeps transparency, so logos and cutouts can stay transparent at a much smaller size than PNG.
How to use AVIF on a website
Use the picture element so browsers that support AVIF get it and the rest fall back to WebP or JPG:
<picture> <source srcset="/img/photo.avif" type="image/avif"> <source srcset="/img/photo.webp" type="image/webp"> <img src="/img/photo.jpg" alt="…" width="1600" height="1067"> </picture>
If your site uses an image CDN, it can often pick the format automatically from what each browser says it accepts. Either way, make sure your server sends AVIF files with the image/avif content type.
Converting to and from AVIF with Graviton
Graviton encodes AVIF with libavif, the open-source library from the Alliance for Open Media, running in your browser. Your photos are never uploaded, so you can convert unpublished or private images safely. Choose AVIF as the output format, set the goal to Quality and keep its starting value of 75 to match a high-quality JPG on screen, and add Resize if the photos are larger than your layout needs. Turn on Lossless under More options when every pixel must survive.
Going the other way is just as common: you saved an image from a website and it turned out to be an .avif that nothing else opens. AVIF to JPG makes it a file every app accepts, and AVIF to PNG keeps transparency for editing.
Should you use AVIF?
For images on your own website, yes, with a WebP or JPG fallback. If you want a single format with the fewest surprises, WebP is the simpler choice. For anything you share, email or upload elsewhere, stick with JPG.
AVIF to JPG converterCan’t open an AVIF? Turn it into a JPG that works everywhere.