What Is AVIF? The Modern Image Format You Should Know
What AVIF Actually Is
AVIF stands for AV1 Image File Format. It's a modern container for still images, derived from the AV1 video codec developed by the Alliance for Open Media—a powerhouse consortium including Google, Apple, Mozilla, Netflix, and Amazon. The first stable spec landed in 2019, and browser support has been a steady climb ever since. To really get AVIF, you have to look at its family tree. Its parent, AV1, was created as a royalty-free video codec to challenge the patent-encumbered HEVC (H.265), which is the tech behind Apple's HEIF images. Because AV1 is open-source and free to use, any developer can implement it without paying licensing fees. This is a huge deal for adoption. It's the reason Chrome, Firefox, and Edge all support AVIF natively, while HEIF/HEIC support on the web remains a mess. AVIF works by using the intra-frame encoding tools from AV1, basically treating a single picture as one frame of a video. This isn't a cheap shortcut. It's what gives AVIF access to the same sophisticated compression techniques that make AV1 video so efficient: varied transform block sizes up to 64×64 pixels, film grain synthesis, loop filters, and more. The result is a format that squares up against JPEG XL and WebP 2 for the title of today's most efficient image format. Beyond just compression, AVIF is a feature-rich format. It supports 8-bit, 10-bit, and even 12-bit color depth, along with HDR and wide color gamuts like Rec. 2020 and Display P3. It also handles alpha transparency and even short animations. This flexibility allows it to perform well on both photographic and graphical content, though as we'll see, it has its specific strengths and weaknesses.
How AVIF Compression Compares to JPEG, WebP, and PNG
Numbers tell the story better than adjectives. A 2021 Netflix study—and they should know, being a primary developer of AV1—showed AVIF files were roughly 50% smaller than JPEGs at equivalent visual quality. Google's own WebP typically offers a 25–34% saving over JPEG. This isn't a tiny, incremental improvement. It's a generational leap in efficiency. Let’s make that concrete. A high-quality 180 KB product photo saved as a JPEG (quality 85) would be about 130 KB as a WebP. As an AVIF with a constant rate factor (crf) of 30, that same image might weigh just 90–100 KB with no perceptible quality loss on a good monitor. If you can tolerate a slightly lower quality for something like a thumbnail, a crf of 40 can push the file size below 60 KB. What about graphics? For logos, illustrations, and UI screenshots with flat colors, PNG has been the lossless king. AVIF has a lossless mode, but don't assume it's better. In my experience, it's a poor choice for this job. Lossless AVIF files are often 10–20% larger than the equivalent PNG. WebP's lossless mode, on the other hand, consistently beats PNG by about 26% and also outperforms lossless AVIF. The takeaway is clear: AVIF's real strength is in lossy compression for photos, not lossless graphics. Alpha transparency is where AVIF really shines. JPEG can't do transparency at all. WebP can, but AVIF often does it better and smaller. A product shot with a transparent background—the bread and butter of e-commerce—can be saved as an AVIF that is 60–70% smaller than its PNG counterpart, while keeping crisp, clean edges around tricky details like hair or fur.
Browser and Platform Support in 2025
AVIF is no longer an experiment. As of mid-2025, global browser support is over 93%, according to caniuse.com. Chrome has been on board since version 85 in August 2020. Firefox joined with version 93 in October 2021. Critically, Safari on macOS Ventura and iOS 16 and later can decode AVIF. Edge, being based on Chromium, has had support since late 2020. What this means for you: if you serve AVIF images on your website, almost everyone will see them. The remaining ~7% of users on older browsers just need a fallback. The elegant, standard solution is the HTML `<picture>` element: <picture> <source srcset="image.avif" type="image/avif"> <source srcset="image.webp" type="image/webp"> <img src="image.jpg" alt="Product photo"> </picture> This simple, three-layer fallback covers every browser that matters. A browser that doesn't get AVIF will try WebP; if that fails, it falls back to the universal JPEG. It just works. No JavaScript needed. On the desktop, the story is a bit more complicated, but mostly positive. Windows 11 can display AVIFs in its Photos app after a free install of the AV1 Video Extension from the Microsoft Store. macOS has native support in Preview since macOS Monterey. Adobe Photoshop integrated AVIF support in version 23.2 (February 2022), so you can open and save them directly. GIMP has had support since version 2.10.22. Even Figma can open AVIF files, though it can't export them yet. For anyone building automated workflows, the server-side tooling is mature. Key libraries like libavif (the reference implementation), Sharp for Node.js, Pillow for Python 3.10+, and ImageMagick 7.1+ all provide solid AVIF encoding and decoding capabilities.
When to Use AVIF — and When Not To
So where should you actually use AVIF? The primary target is any photographic image on the web where file size impacts performance. Think e-commerce product galleries, news article hero images, and portfolio sites. If your website serves thousands of images a day, switching to AVIF can slash your CDN bandwidth costs by 30–50%. That's real money at scale. HDR photography is another killer use case. With its support for 10-bit and 12-bit color and wide gamuts like Rec. 2020, AVIF can display HDR content without having to first crush it down to SDR. JPEG can't do this at all, and WebP is stuck at 8-bit. For photographers or real estate sites showing off high-end imagery to users with HDR screens, AVIF is the only widely-supported web format that does that hardware justice. But it's not a silver bullet. The biggest drawback is that AVIF encoding is slow. Really slow. Encoding a single high-resolution photo at a high-quality setting can make your CPU fan spin up and take several seconds, whereas a JPEG encodes in milliseconds. This latency makes AVIF a poor choice for applications needing real-time image generation, like a photo editor that saves frequently. While hardware encoding support is improving, software-only encoding remains a significant bottleneck. For other tasks, you should use the right tool for the job. Vector graphics and diagrams still belong in an SVG. For screenshots of code or UI text where you need absolute pixel-perfect sharpness, stick with PNG or lossless WebP. And for anything related to print, AVIF is completely irrelevant; TIFF and PDF are still the undisputed standards. What about animations? AVIF supports them (as AVIS sequences), but encoding is even slower than for stills, and browser support is less reliable. Honestly, you're better off using an animated WebP or, even better, a short MP4 or WebM video file set to autoplay.
How to Convert Images to AVIF
Okay, so how do you actually make these files? You have a few options, depending on your needs. For developers and command-line fans, `avifenc` (from the libavif toolkit) is the reference encoder. A typical command might be: `avifenc --min 20 --max 40 --speed 6 input.jpg output.avif`. The `--min` and `--max` flags set the quality range (lower is better, on a 0-63 scale), and `--speed` controls the trade-off between encoding time and file size (0 is the slowest and most efficient, 10 is fastest). A speed of 6 is a great starting point for batch processing. If you want to see what you're doing, Google's Squoosh (squoosh.app) is an amazing browser-based tool. It lets you tweak AVIF settings with a visual quality slider and an instant side-by-side comparison. It's perfect for one-off conversions and for getting a feel for how the quality settings affect your specific images. For bulk conversions without touching the command line, CocoConvert offers AVIF as an output format for sources like JPEG, PNG, WebP, and HEIC. You just upload your files, pick AVIF, and download the results. The encoder is pre-configured to strike a good balance between size and quality for web use. One honest caveat: CocoConvert doesn't expose manual controls for the constant rate factor (crf) or chroma subsampling. If you need that level of fine-grained control—say, to guarantee 4:4:4 color for a professional photo—a command-line tool or Photoshop's export dialog will give you that precision. In Photoshop (CC 2022 and later), just go to File > Export > Export As and choose AVIF from the format list. Lightroom Classic, however, still doesn't export AVIF natively, requiring third-party plugins to bridge the gap.
AVIF vs. JPEG XL: The Other Contender
Any honest discussion of AVIF has to acknowledge its main rival: JPEG XL (JXL). It's a fantastic format that offers some things AVIF can't, like true lossless JPEG recompression (you can convert a JPEG to JXL and back with zero quality loss) and faster encoding speeds at comparable quality levels. It also often does a better job with images that contain sharp lines and text. In head-to-head compression shootouts, neither format is a clear winner across the board. AVIF often pulls ahead for detailed photos at very low bitrates, while JPEG XL tends to be better for graphics, text-heavy images, and any workflow where encoding speed is a factor. But the technical specs don't tell the whole story. The critical difference is browser support. In 2023, Chrome's developers removed experimental JPEG XL support, citing a lack of ecosystem interest, and that decision effectively froze the market. As of mid-2025, only Safari (17+) supports JXL natively, with Firefox support hidden behind a flag. This means you can't reliably serve JXL on the web today without a JavaScript polyfill. For web developers, this makes the decision for us, at least for now. AVIF, with its 93%+ native support, is the only practical choice for modern image deployment. This situation could change. The JPEG XL community is passionate and active, and browser vendors might reconsider. But for anyone building websites right now, AVIF has the massive, undeniable advantage of actually being supported where it counts.
Should You Migrate Your Existing Images to AVIF?
So, should you convert your entire image library? The good news is that migration doesn't have to be an all-or-nothing ordeal. The best strategy for most is to simply add AVIF versions alongside your existing JPEGs and PNGs, using the `<picture>` element to let browsers choose the best format. This means you don't have to delete your old files; you just augment them. For a site with a large library, batch conversion is the only sane path. Set up a script using a tool like Sharp for Node.js or ImageMagick in a shell loop, or use a build-step plugin for Vite or webpack. Let it run overnight. The slow encoding is a one-time cost, but the bandwidth savings pay dividends on every single page load. For all new images going forward, the workflow is even simpler. Make it standard practice to encode an AVIF version for web delivery. Keep your original high-resolution source file—whether it's a RAW, TIFF, or a high-quality JPEG—and generate the web-optimized AVIF as part of your publishing process. What about storage? Yes, keeping multiple versions of each image will temporarily increase your storage footprint. AVIF files are smaller, but you're adding them to your existing library. For most websites, however, the significant savings on CDN egress bandwidth will easily outweigh the minor increase in origin storage costs. One final word of caution: archival. Anyone who has ever tried to open a 15-year-old proprietary file format knows the pain of bit rot and obsolescence. AVIF is still young. JPEG is over 30 years old and will be readable by software that hasn't even been invented yet. For long-term, permanent archival of your most important images, the conservative choice is the right one. Stick with high-quality JPEG or TIFF. Use AVIF for delivery, but always keep your originals in a format with a proven track record.