Introduction
The fight to replace JPEG as the main image format for web delivery is heating up. Its formats are derived from video codecs that are currently at the forefront of this battle. Introducing AVIF and HEIF: two image file formats vying it out for the web delivery crown.
AVIF, developed by the Alliance for Open Media in 2019, is an open image file format based on the AV1 video codec. HEIF (also known as HEIF) stands for High Efficiency Image Format, and it was released by the MPEG group in 2015 and is most known for its use on iOS. The HEIF format is derived from the HEVC (High Efficiency Video Coding) codec (also known as H.265 or MPEG-H Part 2)
Here's how the two competing image formats compare. Ultimately, AVIF will overtake JPEG and HEIF as the dominant image format for web delivery and more.
Quality and limits
As both formats find their roots in video codecs, AVIF and HEIF share the resolution limitations of their respective standards. Both formats sport maximum image dimensions of 65536 x 65536 pixels.
The default limit of AVIF is 8K. Video professionals will recognize this as the size of an 8K video frame. It is possible to break this limit for both formats by independently encoded tiles of 8K frames. But this method introduces artifacts at the tile boundaries, affecting the overall appearance of images. Both formats are unsuitable for ultra-high-resolution photos.
AVIF has a maximum bit depth of 12, HEIF has a maximum bit depth of 10. Other competing file formats can reach bit depth (precision) of 12 or even 24 bits. However, we find a 12-bit color to be precise enough for image delivery.
HDR support is included with both HEIF and AVIF, supporting wide color gamuts like Rec. 709. Both HEIF and AVIF support a maximum of 5 channels. AVIF can do 4:4:4 in lossy compression, where HEIF relies entirely on chroma subsampling.
Barring support for 4:4:4, HEIF and AVIF have similar sets of limitations – and it isn't easy to separate them in this category.
Compression
The main advantage of using image formats derived from video codecs is their excellent compression algorithm resulting in small image size. ** Both HEIF and AVIF perform excellently in high compressed scenarios.**
AVIF functions well in low-fidelity situations, where it can still retain high appeal while keeping file sizes down. High appeal images lack the compression artifacts that make a low-fidelity image look bad, like color banding and blockiness. This is one of JPEG's main disadvantages as compressed JPEG's lack appeal.
A lossless original PNG image can be converted to a 68.8kb JPEG image. In comparison, the same image in AVIF would have a file size of 67.6kb – with a much greater appeal (for example, more minor color banding).
HEIF performs similarly to AVIF in low-fidelity scenarios. The same lossless PNG bears a HEIF file of 69kb.
AVIFs compression algorithms pull ahead in medium and high-fidelity scenarios. We find that AVIF has the edge over its competitor with file size efficiency, where differences in appeal become less noticeable with increased fidelity.
Speed
Decode speeds are essential for the responsiveness of websites. At the same time, encode rates are crucial for those dealing with large image workloads.
In general, the AVIF format has poor single-core encode speed. HEIF sports a marginal improvement in single-core rates over AVIF, with encode speeds being faster.
Where an AVIF image and a HEIF image can pull ahead of older formats like JPEG and PNG is with parallelization. This process allows the image coder to take advantage of multiple cores and threads to improve decoding and encoding speeds.
With computer hardware trending towards CPUs with higher core and thread counts, we anticipate that multi-core encode and decode speeds will be more critical in the coming years than single-core results.
Overall, HEIF and AVIF are similarly slow with single-core speeds. Still, with excellent parallelization, multi-core machines won't see too much of a problem working with these formats.
Other Features
Both AVIF and HEIF support animation, and encoding animations using image formats derived from real video codecs will lead to a better result than using stills formats that support animation like aPNG and JPEG XL.
Moreover, both of these codecs support alpha transparency, which is another critical advantage over the aging JPEG format. The feature set similarities continue with overlay and depth map support.
Both formats support overlays, which allow for independently encoded layers. ** This makes it easy to add crisp text and graphics layers to a compressed photographic background. ** Depth maps enable users to apply effects to the foreground and background.
Neither format supports progressive rendering. This is a method used by formats like JPEG to accelerate page load times by displaying a low-resolution preview. At the same time, the rest of the image is being decoded. The lack of progressive rendering, paired with both AVIF and HEIF's poor decode speeds, may cause issues with underpowered machines.
Support
One of the most notable uses of HEIF has been iOS, where iOS HEIF has become the default file format for photos taken with the iPhone's camera. However, despite this crucial corporation jumping in to support HEIF, the topic browser support is a tale of woe for HEIF.
No major browser includes support for HEIF images, not even Safari, a rather bizarre decision from Apple given its native support in macOS High Sierra and iOS 11+. If we hypothesized why browsers are so unwilling to support HEIF, we would put it down to the format not being royalty-free.
AVIF has a much broader level of browser support as an open and royalty-free format. Google Chrome had fully supported AVIF images since Chrome 85 back in Aug 2020 and Opera 76 also fully supports AVIF.
Users of Firefox can enable AVIF support from their browser config settings. However, Firefox has yet to include support for sequenced AVIF animations.
Mobile support for AVIF is good too. Android Browser, Chrome for Android, and Samsung Internet all fully support the standard.
Safari and Microsoft Edge do not provide any support for AVIF as of yet.
Summary
HEIF and AVIF are remarkably similar formats on the spec sheet. They boast identical feature sets, supporting valuable features like overlays, depth maps, and high bit depth support.
These standards are two sides of the same coin. They both come from efficient and advanced video codecs, and both work well with animated images and adequate compression.
Aside from the slight advantage AVIF has over HEIF in file size efficacy and HEIF's faster encode speed, it's challenging to separate the two-image file formats.
That is until we consider their market adoption. AVIF's royalty-free nature grants it a huge advantage in how willing browsers are to support it. AVIF carries high momentum after Chrome included full support for the format. While browsers like Safari and Firefox are yet to support it fully, Firefox is close, and we expect Safari to follow suit eventually.
HEIF doesn't currently have any momentum in browser support, with not even Apple (who use the format as their default image codec for iPhone photos) including support on Safari. We don't expect the situation to get any better for HEIF, and we have to hand the win over to AVIF.
AVIF is a feature-rich and efficient image codec. We believe it has what it takes to become the dominant image format for web delivery and beyond.