You’re likely familiar with JPEG and PNG, the two most common formats for images on the web. You’ve also probably heard of WebP, a modern image format recommended by Google for use on the web. WebP is a great format for serving images on the web, but other modern image formats exist. So let’s explore some of the modern image formats, including AVIF, HEIC, and JPEG XL, and discuss when to use them.
WebP was announced by Google in 2010 as part of an initiative to make the web faster and provide site owners with better tools to speed up their websites.
With 15 years of updates, WebP boasts extensive browser support and is the go-to format for images on the web.
It provides lossy and lossless compression, and supports transparency and animation. Lossless WebP images are typically 26% smaller in size than PNGs and lossy WebP images should be 25-34% smaller in size than JPEGs of equivalent quality. Such savings in file size can lead to significantly faster page load times and reduced bandwidth costs, especially for image-heavy websites.
One of the main drawbacks of WebP is that, compared to the other modern image formats, it doesn’t provide HDR support and only supports 8-bit color depth. That is usually fine for most images on the web. Still, if you’re working with professional photography or high-quality assets, you may want to consider using a different format.
Also, although it’s a great option for the web, WebP images aren’t fully supported by the Windows Photos app and some other image viewers and media applications, which can be a drawback if you’re planning to provide your users with downloadable images.
Some may also be concerned by the fact that WebP is a Google-developed format. However, the format is open-source, and there are no signs of Google abandoning it anytime soon. In fact, Google has been actively working on improving WebP since 2021 with an experimental successor called WebP2.
AVIF, also known as AV1 Image File Format, was developed by the Alliance for Open Media, a project of the Linux Foundation, as an intended successor to WebP.
Despite the first version of the AVIF specification being released in 2019, it has a similar level of browser support as WebP, with most major browsers supporting it as of 2024.
The AVIF format supports both lossy and lossless compression, as well as transparency or animation, and, unlike WebP, supports HDR and up to 12-bits per channel. AVIF images should provide 20% extra size reduction over WebP of equivalent quality, which, together with good browser support, arguably make it the best image format for the web at the moment, allowing you to either speed up your website thanks to smaller file size or serve better quality images to your users at the same size as a lower quality WebP.
The AV1 video codec used by AVIF for highly effective image compression may, however, require significant processing power to encode and decode AVIF images, which can be a drawback for some use cases, and similar to WebP, the support for AVIF images in image viewers and media applications is not as widespread as for JPEG images, requiring users to install the AV1 codec on their devices to view AVIF images.
License-wise, AVIF is an open-source format, and the AV1 codec is royalty-free, which means that software developers and companies can implement support for it without royalty fees or legal issues. You can freely use it whenever you want.
You may have seen the HEIC extension if you’ve tried downloading images from an iPhone or iPad. HEIC (High-Efficiency Image Coding), also known as HEIF (High-Efficiency Image Format), is a modern image format developed by the Moving Picture Experts Group. The same group developed the MPEG video formats.
The HEIC format primarily provides lossy compression, but it also supports lossless. It supports HDR and up to 16-bits per channel. Apple, however, uses 10-bit colors. It also has transparency and animation, and it can store multiple images in a single file, which is particularly useful for creating animations. It can also store both a high-resolution and a low-resolution version of an image in a single file, allowing images to be served to users with different screen resolutions.
While HEIC images are typically up to 50% smaller than JPEG images of equivalent quality, they’re not as widely supported as WebP and AVIF and the user typically needs to convert them to some more common format to work with them. The good news, however, is that Cloudinary supports automatic HEIC to JPEG conversion out of the box, so you don’t have to worry about any incompatibilities when uploading images to Cloudinary from your iOS devices. Such support is not a small feat, as the HEVC codec used by HEIC images is subject to an extensive amount of patents with substantial royalty fees.
The bad news is that you can only really use HEIC images on the web directly by converting them to a more common format, as the browser support for HEIC images is very limited.
JPEG XL is a modern image format developed by the Joint Photographic Experts Group, the same group that developed the JPEG format. It was designed to be a successor to JPEG and to provide better compression efficiency and quality than JPEG.
It provides lossy and lossless compression and supports transparency, animation, or progressive rendering while still being backward-compatible with JPEG. JPEG XL images claim to be up to 55% smaller than JPEG images with better quality and up to 25% smaller than AVIF images thanks to better compression algorithms while being more versatile and less limited than WebP or AVIF.
The format supports Wide Gamut and HDR and up to 32-bits per channel making it the most robust format of the lot.
JPEG XL is a relatively new format, and as such, its browser support is still growing as of 2024. Nevertheless, it’s open-source and royalty-free, which could make it a great choice for future images on the web.
Based on the strengths and weaknesses of each format, here are some general guidelines on when to use them:
-
Use WebP if you need a reliable, well-supported format with transparency and animation for web images. It’s ideal for everyday web use, where extensive browser support is critical, and HDR isn’t a requirement.
-
Use AVIF when you want higher image quality, smaller file sizes, and HDR support. It’s a top choice for high-quality visuals on the web but comes with a performance cost for encoding/decoding.
-
Use HEIC if you’re dealing with photos from iPhones or iPads, as it’s Apple’s default image format. While its compression is excellent and supports HDR, it could be more suitable for direct web use due to limited browser support.
-
Use JPEG XL when you want to future-proof your images or need maximum quality and compression efficiency. It’s ideal for professional photographers or high-quality web images, but you’ll need to ensure your audience’s browser supports it as adoption is still growing.
If you feel overwhelmed by the amount of information in this comparison, don’t worry! While it’s good to be aware of the strengths and limitations of modern image formats, if you’re using Cloudinary, it can automatically convert images to the most optimal format for the user’s browser, so you can focus on creating great visuals and let Cloudinary take care of the rest. Plus, Cloudinary essentially future-proofs your project. For example, if a new image format like JPEG XL were to replace WebP and AVIF in the future, Cloudinary would automatically serve the new format to your users without requiring any changes from your side.
Contact us today to learn how Cloudinary ensures your visual media is always optimized for performance, no matter how technology evolves.
