AVIF File
Definition
AVIF is short for AV1 Image File Format, published by the Alliance for Open Media in 2019 and royalty-free. The picture is stored as a single AV1 keyframe inside an ISOBMFF container — the same box structure MP4 uses — with the extension .avif and the MIME type image/avif. It supports both lossy compression and a lossless mode, 10- and 12-bit colour depth, wide gamut and HDR, an alpha channel, and short animations. Browser support arrived in Chrome 85 in August 2020, Firefox 93 in October 2021 and Safari 16 in September 2022, which means anything released in the last few years can display it and anything older cannot.
Why It Matters
AVIF is at its strongest exactly where JPEG is at its weakest: low bitrates. Push a 1600-pixel photograph down hard and JPEG breaks into blocks around quality 60, while AVIF goes soft rather than blocky and stays acceptable much further down. A representative comparison for that image is roughly 180 KB as JPEG at quality 75, 130 KB as WebP, and 95 KB as AVIF. The price is time. Encoding a single image can take ten to sixty times as long as the JPEG equivalent, so a few hundred photographs is minutes of CPU rather than seconds — perfectly fine as a one-off publishing step, painful if you were hoping to do it on demand.
How It Works
An encoder such as avifenc, or libavif through a tool like sharp or Squoosh, compresses the image as an AV1 intra frame and writes it into HEIF-style boxes, with alpha carried as a separate auxiliary item. Two knobs matter: quality, given as -q from 0 to 100 in recent avifenc builds and as quantiser values from 0 to 63 in older ones where lower means better, and speed, from 0 to 10, which trades encoding time against file size — speed 6 is a reasonable compromise, speed 0 can take a minute per image for a few percent more. Serving works exactly as it does for any other format: Content-Type image/avif and the file at a stable URL. To cover older browsers, list the formats in a picture element from most to least efficient — AVIF, then WebP, then JPEG — because the browser takes the first source type it recognises and never looks at the rest.
Real-World Example
A photographer publishes a 24-image field report on 99helpers at field-notes.99helpers.site. As JPEGs at quality 80 the images total 5.8 MB; re-encoded to AVIF at the same apparent quality they come to 2.1 MB, and the batch took about four minutes on a laptop. Both sets are uploaded and referenced from picture elements, so a visitor on Safari 15 quietly gets the JPEGs and everyone else gets less than half the bytes.
Common Mistakes
- ✕Publishing AVIF with no fallback — a visitor on an older browser gets a broken image rather than a slightly larger one
- ✕Encoding at the slowest speed setting for a whole gallery — the extra hours typically buy a few percent, which is rarely worth it
- ✕Using AVIF for simple flat graphics and icons — a small PNG or an SVG will usually be smaller and will not need a fallback at all
- ✕Treating AVIF quality numbers as interchangeable with JPEG ones — the scales are unrelated, so judge by eye at full size
Related Terms
WebP File
WebP is an image format from Google that handles lossy and lossless compression, transparency and animation in one file. At comparable visual quality it is typically 25 to 35 percent smaller than JPEG.
JPEG File
A JPEG file is a raster image compressed by discarding detail the eye is least likely to miss. It was designed for photographs, and every time you re-save one it loses a little more.
Lossy Compression
Lossy compression shrinks a file by permanently throwing information away. What comes back out is an approximation of the original, chosen so that the missing part is hard to notice.
Image Optimization
Image optimisation is the work of making the pictures on a page as small as they can be without a visible drop in quality. In practice it means resizing, choosing a format, setting a compression level and serving the right file to each device.
Core Web Vitals
Core Web Vitals are the three page-experience measurements Google publishes and uses as a ranking signal: Largest Contentful Paint, Interaction to Next Paint and Cumulative Layout Shift. Each has a published threshold, and each is judged on real visits rather than a lab test.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →