The effectiveness of web content delivery depends on the choice of image formats. Modern image formats such as WebP, AVIF, JPEG XL, and JPEG LI offer advantages over traditional formats such as JPEG and PNG. This blog post examines these formats, their use cases, performance metrics, browser support, and application recommendations.
Google developed WebP and released it in 2010 to provide superior lossy and lossless compression for images on the web. The aim was to reduce the file size significantly compared to JPEG and PNG while maintaining or improving image quality and ultimately making the web faster.
WebP images are about 25-34% smaller in file size than JPEG images at equivalent visual quality. WebP also supports transparency, typically providing 3x smaller file sizes than PNG. Animated WebP images support lossy, lossless, and transparency, and they can be reduced in size compared to GIF and APNG.
WebP has a broad support across Google Chrome, Safari, Firefox, Edge, the Opera browser, and many other tools and software libraries
WebP is ideal for any web application that aims to improve loading times without sacrificing image quality. It’s particularly useful for e-commerce, media sites, and content-rich platforms.
The Alliance for Open Media introduced the AVIF format, which is based on the AV1 video codec and was released in 2019 to provide efficient and high-quality video compression. AVIF aims to outperform older formats with better compression and enhanced color fidelity, supporting high dynamic range (HDR) and wide color gamut (WCG).
The AVIF format leverages advanced compression techniques employed by the AV1 codec to deliver exceptional image quality at a fraction of the file size of traditional image formats, such as JPEG and PNG.
AVIF is a highly efficient image format that supports lossy and lossless compression, producing high-quality images even after compression. It compresses images more effectively than most popular formats currently used on the web, such as JPEG, WebP, and JPEG 2000. In some cases, images in AVIF format can be up to 10x smaller than JPEG images with comparable visual quality. Studies have shown that AVIF can achieve a 50% reduction in file size compared to JPEG while maintaining similar perceptual quality. However, it’s important to note that in certain situations, WebP’s lossless compression may outperform AVIF’s lossless compression, so manual evaluation is recommended in these cases.
AVIF is supported by recent versions of major browsers, including Chrome, Firefox, and Opera, with partial and increasing support in Safari.
AVIF is best used when visual quality can’t be compromised, such as in photography portfolios, high-resolution art galleries, and advanced web applications that deal with varied and complex images.
Developed by the Joint Photographic Experts Group and finalized in 2021, JPEG XL was designed to be the future of JPEG. It aims to offer better compression, backward compatibility, and high performance across various devices.
JPEG XL is designed to meet the needs of image delivery on the web and professional photography. It supports a wide color gamut, dynamic range, and bit-depth images.
JPEG XL offers significantly better image quality and compression ratios than legacy JPEG, plus a shorter specification. It is designed for computationally efficient encoding and decoding, using software implementations without additional hardware acceleration, even on mobile devices. It also promises 60% better compression than JPEG, supporting features like progressive decoding.
Currently limited but growing, with support in experimental or behind-flag settings in major browsers.
JPEG XL includes features such as animation, alpha channels, layers, thumbnails, and lossless and progressive coding to support a wide range of use cases, including but not limited to photo galleries, e-commerce, social media, user interfaces, and cloud storage. It also supports 360-degree images, image bursts, large panoramas/mosaics, and printing to enable novel applications.
JPEG LI, where “LI” stands for Lightweight Image, is a newer proposal focusing on optimized performance for loading times and scalability. JPEG LI is Google’s new open-source JPEG coding library, which aims to decrease the size of JPEGs massively while retaining the quality of the image and preventing artifacts that you would usually find in compressed images.
JPEG LI uses adaptive quantization, which, in layman’s terms, adjusts which elements in an image need to be retained based on image regions. This reduces the noise and keeps the details intact, achieving 35% compression. JPEG LI takes a part of this feature from JPEG XL, which we mentioned above.
JPEG LI is designed to provide extremely fast loading with competitive compression ratios, although specific metrics are pending as the format is still under development.
JPEG LI format is yet to be adopted widely as it’s newer and is still gaining traction.
JPEG LI will be most useful for applications or programs that already support JPEG because it is backward compatible, which can help reduce the size of a regular JPEG image by 35%, and uses 10+ bits per component rather than traditional JPEG coding solutions that offer only 8 bits per component.
All these formats aim to improve compression and quality over JPEG and PNG. They support modern web requirements like transparency and animation and tend to perform better than the traditional JPEG and PNG formats.
WebP and AVIF are currently the most practical choices for web developers seeking to improve site performance through better image compression without sacrificing quality. WebP is widely supported and balances file size and image quality well, making it ideal for general web use. AVIF, while newer, provides even better compression and is particularly suited for high-quality imagery where every detail matters.
Although not as widely supported yet, JPEG XL and JPEG LI point to the future of image formats, focusing on even higher efficiency and advanced features. JPEG XL offers excellent compression and backward compatibility with existing JPEG images, making it an attractive option for a wide range of applications, from professional photography to everyday web use. JPEG LI focuses on performance optimization and scalability, promising significant reductions in file size while maintaining high image quality.
We can also see that they differ in use case, browser support, or performance. For example, WebP and AVIF offer broad browser support and are immediately usable, with AVIF providing the best compression. JPEG XL and JPEG LI are more future-focused, with JPEG XL offering backward compatibility and JPEG LI focusing on backward compatibility and performance optimization.
All modern formats offer superior compression and quality compared to traditional formats like JPEG and PNG. They also provide better support for color depth and compression, especially with transparency.
You can also look at the Cloudinary Image Dataset ’22 to find a more detailed comparison between most of these formats (excluding JPEG LI, which has yet to be widely adopted).
The development of modern image formats like WebP, AVIF, JPEG XL, and JPEG LI represents a significant advancement in web technology. These new formats offer substantial improvements over traditional formats such as JPEG and PNG. They’re designed to enhance the web experience by providing superior compression, improved image quality, and support for advanced features like high dynamic range and wide color gamut.
Web developers and content creators should consider adopting modern image formats to optimize their digital assets as browser support for these formats continues to grow. Cloudinary also supports and automatically selects the most efficient file format, including AVIF and JPEG XL, improving website quality, performance, and user experience. To learn more about Cloudinary’s powerful image and video management capabilities, contact us today.
