AVIF is an image format that is derived from the frames of AV1 video. It’s a reasonably novel file format, having been initially released in 2019. Let’s see how this brand-new file format stacks up against PNG:
PNG has a theoretical resolution limit of 2,147,483,647 x 2,147,483,647 pixels or 2500 megapixels. I think it’s safe to say no one is going to reach that in their day-to-day work.
AVIF offers 10-bit precision, while PNG offers a 16-bit max bit depth. In reality, 10-bit precision is enough for image delivery, and most image designers aren’t going to make use of the extra bits. Both PNG and AVIF offer support for HDR and wide color gamuts.
For lossless compression, Reddit user Balance found that PNG is significantly more efficient in file size when comparing an input PNG and an output AVIF file. For example, one 21,265kb input PNG was converted to an AVIF file of 42,503kb. If you’re looking for a lossless file format, PNG is much more size efficient.
Where AVIF pulls ahead, though, is with its lossy compression. AVIF performs excellently with low-fidelity photos – common for web images – with file sizes beating JPEG. Highly compressed AVIF images have great “appeal,” meaning they don’t include many compression artifacts like color banding. AVIF is excellent if you want to convert a PNG for sharing on the Internet without any noticeable drop in image quality.
Newer file formats like AVIF tend to be more complex. Therefore slower systems may struggle a bit more to decode the image. Single-core decode speed for AVIFs can be significantly slower than PNG. AVIF, however, struggles with encode speed on single-threaded machines. However, AVIF is very parallelizable, allowing multiple cores and multiple threads to ‘pitch-in’ to help encode and decode. PNG is a sequential codec and therefore can’t take advantage of multicore machines. As computer processors tend towards more cores and threads, AVIF looks much more future-proof with proper multicore performance.
As AVIF is based on a video codec AV1, AVIF is well-positioned for animation. Storing image sequences with AVIF is therefore efficient and easy.
AVIF doesn’t support progressive decoding, a process of decoding an image where portions of an image are incrementally decoded from an incomplete image file. This allows for lower-quality preview images to be shown before the image has been fully decoded. This improves the user experience when viewing images from the Internet, as a browser does not need to wait for the whole image to download before decoding can begin. PNG does offer progressive decoding, potentially making it better for viewing lossless compressed images on the Internet.
Both PNG and AVIF support alpha transparency. However, AVIF also supports depth maps allowing for effects to be applied and overlays. Overlays allow for images to have multiple layers. This is great if you have a non-image element on top of a background image. This can be included on a separate layer to ensure crispness.
As a relatively new image format, AVIF struggles when it comes to browser support. Google Chrome has supported AVIF since Chrome 85. At the same time, Opera and Samsung Internet have also implemented full support for still and sequenced images. Firefox doesn’t officially support AVIF, but it can be enabled in about:config and doesn’t include sequenced (animated) image support. In reality, users aren’t going to want to change their browser configurations to view your site. AVIF isn’t currently supported by Microsoft Edge, Internet Explorer or Safari. For browser support, PNG clearly wins out.
AVIF does offer some significant advantages like overlay support and high dynamic range support. Colorists will love its wide color gamut support, including NCLX support: sRGB, linear sRGB, linear Rec2020, etc. PNG has a higher max bit depth; however, this isn’t usually a problem for photo delivery. Sequencing for animation is easier with AVIF than with PNG, beating out the somewhat clunky aPNG format.
PNG’s lack of lossy compression makes it difficult to use on the web. AVIF’s lower file sizes and retained image quality with lossy compression makes it a great alternative to use – forgoing JPEG’s horrible compression. The biggest drawback of AVIF its low current uptake. However, with the features to become a dominant file format in the future, we expect this to change and be widely supported.
AVIF images also support transparency, making it a great alternative to PNG if you need to download or share a picture with a transparent background. Its ability to have multiple layers makes it easy to export text as an overlay to maximize performance. Effects can also be added to AVIF images.
The AVIF format is feature-rich, and we expect it to become viral in the years to come. As browser support improves over time, we expect AVIF to become the dominant image format for use on the web.
- cloudinary.com (..) ecs_to_dethrone_jpeg
- developer.mozilla.org (..) · Formats · Image_types
- jakearchibald.com · 2020 · avif-has-landed
- netflixtechblog.com (..) e-coding-b1d75675fe4
- reachlightspeed.com (..) file%20size%20ratio.
- www.freecodecamp.org (..) ic-avif-41ba0c1b2789
- www.lambdatest.com (..) og · avif-image-format
- www.reddit.com (..) _png_vs_webp_vs_avif