Using Modern Image Formats: AVIF and WebP

Images are the most frequently used resource type in web applications and usually take up the most space. If you have experience in website performance optimization, you may know that image loading is an important factor affecting LCP (Largest Contentful Paint), a key performance indicator: the size, quantity, layout, and loading priority of images on the page will all have an impact on performance indicators. That's why many of our performance optimization guides discuss the importance of image optimization.

Why New Image Formats Are Needed

When using image resources in web applications, we have many image formats to choose from: PNG, JPEG, SVG, and so on. The difference between different image formats lies in their corresponding codecs. A codec can be understood as an algorithm: it compresses the image, encodes it into the corresponding file type, and decodes the image during rendering.

#01

Evaluation of Codecs

The following aspects can be used to evaluate which image format is more suitable for your project:

Compression Ratio

The efficiency of a codec can be measured by the compression ratio it can achieve. The higher the compression degree, the smaller the file size, and the less traffic required for network transmission. A smaller file size can directly affect the LCP indicator because the image resources required by the page load faster.

Quality

In theory, image compression should not lead to the loss of image data, that is, it should be lossless. Conversely, if image quality degrades due to compression, it is lossy compression. The structural similarity between images can be measured by DSSIM or SSIMULACRA to determine whether the loss of image quality is acceptable.

Encoding and Decoding Speed

Complex compression algorithms require more computing power to encode and decode images. In many scenarios, image encoding is one-time, but browsers still need to decode images during rendering. A complex decoding process can slow down the display time of images.

In addition to the above factors, the following should also be considered in different usage scenarios:

Software Support

A certain image format may perform well in all aspects, but it is still useless if browsers cannot recognize it.

ALPHA Channel

The ability to create images with different transparency levels using the ALPHA channel, such as PNG images with transparent backgrounds.

#02

Fallback Old Formats: JPEG & PNG

Over the past 20 years or so, JPEG has always been the most popular image format. The classic JPEG codec does not have a high compression degree. The newer MozJPEG has improved the compression degree, but it is still inferior to new image formats.

At the same time, JPEG is a lossy compression format. Although JPEG has excellent decoding speed, it lacks other features required by modern web images.

PNG is a lossless compression format and also supports the transparency of the ALPHA channel, but its achievable compression degree is relatively limited.

Although the codecs corresponding to these two formats have certain defects in performance, they can be used as fallback options because almost all browsers support them.

The goal of new image formats is to overcome the shortcomings of JPEG and PNG by improving the compression ratio, while providing some other image features.

AVIF

AVIF is short for AV1 Image File Format, which is an open-source image format that supports both dynamic and static display. It was released by the Alliance for Open Media (AOMedia) in February 2019. AVIF is the image version of the popular AV1 video format.

Advantages of AVIF

AVIF supports both lossy and lossless data compression and can produce high-quality images after compression. Images compressed by AVIF are much better than the most popular formats on the Internet today (JPEG, WebP, JPEG 2000, etc.). Under the premise of the same visual effect, AVIF images can be much smaller than JPEG.

For example, the compressed AVIF format of the following picture is only about one-tenth of the original picture on the left.

In addition to the ultra-high compression ratio, AVIF also has the following features:

AVIF can support animation through multi-layer images stored in image sequences.

Compared with JPEG, AVIF has better support for graphic elements such as logos.

AVIF supports lossless compression.

It supports monochrome images and multi-channel images, including transparent images using the alpha channel.

It even supports HDR.

Comparison of Image Formats

To better understand the differences in quality and compression between different image formats, we can intuitively compare images and evaluate their differences.

#01

Evaluating Quality and Compression

The following is a picture converted into AVIF and JPEG formats with the same quality. The original picture is 740kB, the compressed AVIF format is 4.92kB, and the JPEG format is 6.68kB. The difference is not very large. In terms of image quality, the entire in the JPEG on the right has obvious 斑块，while the AVIF on the left is visually better.

If the converted volume is controlled at the same level, let's look at the image quality. The original image is 1MB, and the converted volume of both is 20.5kB. The sky, woods, and beach in the JPEG on the right still have obvious 斑块，while the AVIF on the left is still better.

The situation is similar for images mainly containing text.

#02

AVIF-Related Tools and Support

Since its release in 2019, support for AVIF has increased significantly. In the early days, there was no way to directly create or preview AVIF images, but now it can be easily achieved through open-source tools.

Using AVIF in Browsers

Chrome has followed up quickly in supporting AVIF. Chrome 85 in August 2020 already introduced AVIF. The support of other browsers is as follows:

To use AVIF images in a project, you can add them to the src of img:

<img src="some.avif" alt="alternation" width="360" height="360" />

However, for browsers that do not support it, the above image cannot be rendered normally. If you want the code to display images normally in all browsers, you can achieve it through progressive enhancement.

The first way is to use the <picture> element. When a browser encounters an unrecognized image in the picture, it will skip it and look for the next one until it finds the first supported image format.

<picture> <source srcset="some.avif" type="image/avif" /> <source srcset="some.webp" type="image/webp" /> <img src="some.jpg" alt="alternation" width="360" height="360" /></picture>

The second way is to use content negotiation. The browser adds the formats it supports to the Accept field of the request header, and the server returns the matched resources after detecting the Accept header.

If you think the above methods are still complicated, you can also use tools to achieve it. In gimme-an-image, you just need to drop the image you want to use, and it can generate the above code.

Encoding and Decoding AVIF Files

Different open-source libraries or tools use different methods to encode and decode AVIF files

Libraries

Libaom maintained by AOMedia. This library is continuously optimized to reduce the cost of encoding AVIF, especially for frequently loaded or high-priority images. Libavif is the avif hybrid parser used by Chrome. Similarly, there are Libheif, libgd, etc.

Web Applications

Here, Squoosh is recommended. You can compress images on it and intuitively see the comparison of different file formats before and after compression.

JavaScript Libraries

Everything that can be implemented with JavaScript will eventually be implemented with JavaScript. There are AVIF.js, Avif.io, Sharp, etc. around avif, and you can use them as needed.

#03

AVIF Performance

Due to more advanced compression algorithms, AVIF format images have a smaller size, so the download time is shorter and the bandwidth consumed is less. Using AVIF files can significantly reduce image loading time.

When we use Lighthouse to measure page performance, it will convert all old image formats on the page - BMP, JPEG, PNG - into WebP and AVIF formats, and evaluate how much bandwidth and time can be saved by using the new formats.

The following is a screenshot after running lighthouse in a project. The report suggests that using the new image format is expected to save 4.19s.

In terms of the LCP indicator, the corresponding indicator is also deducted because the image volume is too large.

#04

Disadvantages of AVIF

The biggest problem with AVIF now is browser support. Some browsers, including Edge, do not support AVIF enough, and now it can only be solved through progressive enhancement. There are also some other issues:

AVIF takes a longer time to encode, which will be a problem for applications that need to generate images dynamically. At present, the AVIF team is solving this problem.

Decoding AVIF during display also requires more CPU computing power.

Some CDN vendors do not support the AVIF format yet.

WebP

WebP is an image format released by Google in 2011. It provides both lossy and lossless compression, and also supports ALPHA channel transparency and animation. Because it has better compression effect compared with JPEG and PNG, it has been supported by more browsers in recent years.

Lossy WebP compression is based on the VP8 video codec and uses predictive coding to encode images. It uses values in adjacent pixel blocks to predict values in the block and only encodes the differences. Lossless WebP images are generated by compressing images using multiple transformation technologies.

#01

Advantages of WebP

When using lossless compression, converting PNG to WebP format can save 55% of file space. When switching to lossy compression, it can even save 97%. If using WebP2 for compression, more space can be saved. At the same time, because it supports animation, it has become an excellent alternative to GIF images.

#02

WebP-Related Tools and Support

Now almost all the latest versions of mainstream browsers support WebP.

If you want to use WebP in a project, you can use the progressive enhancement method mentioned in AVIF above. In addition to previewing WebP images in supported browsers, you can also use the precompiled utilities and libraries released by the WebP team to encode and decode WebP.

Benefiting from the compression advantages of WebP, many large companies have used WebP in production. Google reports that compared with other lossy data compression schemes, using WebP can save 30-35% of costs, processing 43 billion image requests every day, of which 26% are lossless data compression requests. Facebook also provides WebP images for Android users, saving 25% to 35% of data compared with JPG and 80% compared with PNG.

#03

Disadvantages of WebP

In the early days of WebP's release, a significant defect was the lack of browser and tool support. Now, as a modern image format, WebP has made some trade-offs in features.

WebP only supports 8-bit color precision, so it cannot support HDR.

WebP does not support lossy images without chroma subsampling, which may affect the details of the image.

Summary

The above introduces the new image formats AVIF and WebP, and through comparison with the traditional image formats JPEG and PNG, introduces their differences in compression ratio, fidelity, and support. Although using AVIF and WebP can effectively reduce bandwidth and loading time, it does not mean that these two formats should be preferred in all cases.

You should choose quality and chroma subsampling settings according to the purpose of the image. Low to medium fidelity images are acceptable in most scenarios on the Internet, such as news, social media, and e-commerce. Image archives, film, or photography websites require high-fidelity images. Before converting to another format, you should test the actual savings due to compression for high fidelity.

AVIF does perform well in most cases, and WebP has better support and better compression performance compared with JPEG or PNG. Therefore, when you optimize images on your website, there is no doubt that you should consider WebP support. Evaluate whether AVIF meets your requirements and introduce it as a progressive enhancement, which can provide value when this format is adopted by different browsers and platforms. With the improvement of quality comparison tools and encoding speed, using AVIF will eventually become easier.