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 HEIC: 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. HEIC (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 HEIC 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, we think AVIF will overtake JPEG and HEIF as the dominant image format for web delivery and more.
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.
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.
Both formats also have 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 10-bit color to be precise enough for image delivery.
HDR support is included with both HEIC and AVIF, supporting wide color gamuts like Rec. 709. Both HEIC and AVIF support a maximum of 5 channels. AVIF can do 4:4:4 in lossy compression, where HEIC relies entirely on chroma subsampling.
Barring support for 4:4:4, HEIC and AVIF have highly similar sets of limitations – and it isn't easy to separate them in this category.
The main advantage of using image formats derived from video codecs is their excellent compression algorithm. Both HEIC 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 highly 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).
HEIC performs similarly to AVIF in low-fidelity scenarios. The same lossless PNG bears a HEIC file of 69kb.
AVIF pulls 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.
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, AVIF sports poor single-core encode speed and decode speeds. HEIC sports a marginal improvement in single-core rates over AVIF, with encode speeds being slightly faster.
Where AVIF and HEIC 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, HEIC 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.
Both AVIF and HEIC 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 highly 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 HEIC's poor decode speeds, may cause issues with underpowered machines.
One of the most notable uses of HEIC has been iOS, where iOS HEIC has become the default file format for photos taken with the iPhone's camera. However, despite this crucial corporation jumping in to support HEIC, the topic browser support is a tale of woe for HEIC.
No major browser includes support for HEIC 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 HEIC, 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.
HEIC 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 highly efficient and advanced video codecs, and both work well with animated images and adequate compression.
Aside from the slight advantage AVIF has over HEIC in file size efficacy and HEIC's slightly 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 a lot of momentum after Chrome included full support for the format. While browsers like Safari and Firefox are yet to support it fully, Firefox is very close, and we expect Safari to follow suit eventually.
HEIC 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 HEIC, 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.