{"id":36269,"date":"2024-11-06T07:00:00","date_gmt":"2024-11-06T15:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=36269"},"modified":"2025-10-30T14:36:05","modified_gmt":"2025-10-30T21:36:05","slug":"advanced-image-formats-and-when-to-use-them","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/advanced-image-formats-and-when-to-use-them","title":{"rendered":"Advanced Image Formats and When to Use Them: WebP, AVIF, HEIC, and JPEG XL"},"content":{"rendered":"

You\u2019re likely familiar with JPEG and PNG, the two most common formats for images on the web. You\u2019ve 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\u2019s explore some of the modern image formats, including AVIF, HEIC and JPEG XL, and discuss when to use them.<\/p>\n

WebP<\/h2>\n

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.<\/p>\n

With 15 years of updates, WebP boasts extensive browser support and is the go-to format for images on the web.<\/p>\n

It provides lossy and lossless compression, and supports transparency and animation. Lossless WebP images are typically 26% smaller in size than PNGs<\/a> and lossy WebP images should be 25-34% smaller in size than JPEGs<\/a> 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.<\/p>\n

One of the main drawbacks of WebP is that, compared to the other modern image formats, it doesn\u2019t provide HDR support and only supports 8-bit color depth. That is usually fine for most images on the web. Still, if you\u2019re working with professional photography or high-quality assets, you may want to consider using a different format.<\/p>\n

Also, although it\u2019s a great option for the web, WebP images aren\u2019t fully supported by the Windows Photos app and some other image viewers and media applications, which can be a drawback if you\u2019re planning to provide your users with downloadable images.<\/p>\n

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<\/a>.<\/p>\n

AVIF<\/h2>\n

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.<\/p>\n

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.<\/p>\n

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<\/a>, 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.<\/p>\n

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.<\/p>\n

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.<\/p>\n

HEIC<\/h2>\n

You may have seen the HEIC extension if you\u2019ve 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.<\/p>\n

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.<\/p>\n

HEIC images are typically up to 50% smaller than JPEG images of equivalent quality, but when looking at AVIF vs HEIC or WebP, they\u2019re not as widely supported, and the user typically needs to [convert them to some more common format]9https:\/\/cloudinary.com\/guides\/image-formats\/how-to-convert-heic-to-jpg-a-comprehensive-guide) to work with them. The good news, however, is that Cloudinary supports automatic HEIC to JPEG conversion out of the box<\/a>, so you don\u2019t 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.<\/p>\n

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.<\/p>\n

JPEG XL<\/h2>\n

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.<\/p>\n

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. Additionally, when comparing JPEG XL vs. WebP or AVIF, JPEG XL is more versatile and less limited.<\/p>\n

The format supports Wide Gamut and HDR and up to 32-bits per channel making it the most robust format of the lot.\nJPEG XL is a relatively new format, and as such, its browser support is still growing as of 2024. Nevertheless, it\u2019s open-source and royalty-free, which could make it a great choice<\/a> for future images on the web.<\/p>\n

WebP vs. AVIF vs. JPEG XL vs. HEIC: When to Use Them for Your Projects?<\/h2>\n

Based on the strengths and weaknesses of each format, here are some general guidelines on when to use them:<\/p>\n