Webp or AVIF?

In this article, we will highlight how modern image formats (AVIF or WebP) can improve compression by up to 50% and provide better per-byte quality while still maintaining a beautiful eye-catching look. We will compare what is possible with high quality, low quality and file size lenses.

About to Webp optimized images, we talked about it for a long time already at the very beginning decreeing very clearly the importance of the use of optimized formats in order to meet the speed requirements and improve the Pagespeed score and the Core Web Vitals.

Images are the type of resource most popular on the web and are often the largest. Users appreciate the high-quality visuals, but care must be taken to deliver hero images, product photos, and cat memes as efficiently and effectively as possible.

If you are optimizing for Website Vitals , you may be interested to know what the pictures represent about the 42% of the element Contentful Paint bigger for websites. The key metrics user-centric often they depend on the size, number, layout and priority of loading images on the page. This is why much of our performance guide talks about image optimization.

Below you can find a list of recommendations.

• AVIF is a solid first choice if low-fidelity lossy compression is acceptable and bandwidth savings are your number one priority. Assuming the encode / decode speeds meet your needs.
• WebP is more widely supported and can be used for rendering normal images where advanced features such as a wide range of colors or text overlays are not required.
• AVIF may not be able to compress non-photographic, PNG or WebP images without data loss. Compression savings from WebP may be less than JPEG for high fidelity lossy compression.
• If both AVIF and WebP aren't viable options, consider evaluating MozJPEG (optimize JPEG images), OxiPNG (non-photographic images), or JPEG 2000 (lossy or lossless photographic images).
• Progressive improvement through <picture>allows the browser to choose the first supported format in the order of preference. This implementation is greatly simplified when using image CDNs where the Accept header and content negotiation (e.g. automatic formatting and quality) can provide the best picture.

Why Do We Need Modern Formats?

We have a reasonably large selection of image formats to choose from when rendering images on the web. The essential difference between image formats is that the image codec used to encode or decode each type of image is different. An image codec represents the algorithm used to compress and encode images into a specific file type and decode them for display on the screen.

EVALUATION CODEC

You can judge which image format is right for you based on several parameters.

• Compression
  The efficiency of a codec can mainly be measured by the amount of compression it can achieve. The compression obtained is relevant because the higher the compression, the smaller the file size and the less data required to transfer the image over the network. The smaller file size directly affects the Largest Contentful Paint (LCP) metric for the page as the image resources needed for the page load faster.
• Quality
  Ideally, compression should not result in any loss of image data; it should be lossless. Compression formats that cause some loss of image data, thereby reducing image quality, are known as lossy. You can use tools like DSSIM o simulacra to measure the structural similarity between the images and judge if the loss of quality is acceptable.
• Encoding / decoding speed
  Complex compression algorithms may require more processing power to encode / decode images. This can be complicated by whether the coding is done in advance (static / build) or on the fly (on demand). While the encoding may be a one-off in the case of static images, the browser must still decode the images before rendering them. A complex decoding process can slow down image rendering.

The degree of compression, image quality, and decoding speed are key factors to consider when comparing image performance for the web. Specific use cases may require image formats that support other features such as:

• Software support: An image format can work very well, but is useless if browsers, CDNs, and other image manipulation tools don't recognize it.
• You may need animation support for some images on the web (eg GIFs). However, you should ideally replace such images with video lesson .
• Alpha Transparency: The ability to create images with different levels of opacity using the alpha channel. (e.g. PNG images with transparent backgrounds)
• It should support high dynamic range (HDR) imaging and a wide color gamut .
• Progressive decoding to load images gradually allows users to get a reasonable preview of the image before it is refined.
• Depth maps that will allow you to apply effects in the foreground or background of the image.
• Images with multiple overlapping layers, such as text overlays, borders, and so on.

Suggestion: when evaluating the quality, compression and tuning of modern formats, the ability of Squoosh.app doing a side-by-side visual comparison is helpful. Zooming allows you to better appreciate where a layout displays blocks or edge artifacts to think about trade-offs.

The Old Guards and the old formats: JPEG AND PNG

JPEG has been the most widely supported image format for 25 years. Classic JPEG encoders lead to relatively weak compression, while more modern JPEG encoding efforts (such as MozJPEG ) improve compression but are not as good as modern formats. JPEG is also a lossy compression format. While the decoding speed for JPEGs is excellent, it lacks other desirable features required by images on modern, eye-catching websites. It does not support transparency in images, animations, depth maps or overlays.

JPEG works best with photographs, while PNG is its counterpart for other still images. PNG is a lossless format and can support alpha transparency, but the compression achieved, especially for photographs, is considerably low. JPEG and PNG are both widely used depending on the type of image required.

The goal of modern image formats is therefore to overcome the limitations of JPEG and PNG by offering better compression and flexibility to support the other features discussed above. With this background, let's take a look at what AVIF and WebP have to offer.

AVIF

The AV1 Image File Format (AVIF) is an open source image format for storing still and animated images. It was released in February 2019 by Alliance for Open Media (AOMedia). AVIF is the image version of the popular AV1 video format. The goal was to develop a new open source video encoding format that was state-of-the-art and royalty-free.

ADVANTAGES AVIF

AVIF supports very efficient lossy and lossless compression to produce high quality images after AVIF compression compresses much better than popular formats on the web today (JPEG, WebP, JPEG 2000, and so on). Images can be up to ten times smaller than JPEGs of similar visual quality. Tests have shown that AVIF offers a 50% saving in file size compared to JPEG with a similar perceptual quality . Note that there may be instances where WebP lossless may be better than AVIF lossless, so be sure to evaluate manually.

In addition to superior compression, AVIF also provides the following features:

• AVIF supports animations, live photos and more through multi-layered images stored in image sequences.
• It offers better support for graphics, logos and infographics, where JPEG has limitations.
• Provides better lossless compression than JPEG.
• It supports twelve bits of color depth enabling high dynamic range (HDR) and wide color gamut (WCG) images with a better range of light and dark tones and a wider range of brightness.
• Includes support for monochrome and multichannel images, including transparent images that use the alpha channel.

Comparison Of Sizes

To better understand the differences in quality and compression offered by the different formats, we can visually compare the images and evaluate the differences.

ASSESSMENT OF QUALITY AND COMPRESSION

We'll begin our assessment of the quality of JPEG, WebP, and AVIF using Squoosh's default high-quality output settings for each format, intentionally not optimized to mimic a new user's experience with them. As a reminder, you should aim to evaluate the quality setup and formats that best suit your needs. If you're short on time, image CDNs automate some of this.

In this first test, encoding a 560 KB photo of a sunset (with lots of textures) produces a visually and perceptually quite similar image for each. The output comes in at 289KB (JPEG @ q75), 206KB (WebP @ q75) and 101KB (AVIF @ q30), up to 81% compression savings.

AVIF TOOLS AND SUPPORT

Since its release in 2019, support for AVIF has increased considerably. While there was no direct method to create or view AVIF files previously, you can now easily do it with the open source utilities available.

AVIF images in the browser

AVIF was introduced in the desktop version of Chrome in August 2020 with Chrome 85 . It is also supported on Chrome for Android, Opera and Firefox for desktop, and Opera for Android.

To include an AVIF image on your page, you can add it as an image element. However, browsers that do not support AVIF cannot render this image.

<img src="/images/sky.avif" width="360" height="240" alt="a beautiful sky">

A workaround to ensure that at least one supported image format is distributed to all browsers is to apply AVIF as progressive improvement . There are two ways to do this.

Progressive improvement

1. Using The <picture>Element
   As <picture>allows browsers to skip images they don't recognize, you can include images in your order of preference. The browser selects the first one it supports.

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

1. Use of content negotiation
   Negotiation of the content allows the server to serve different formats of resources based on what is supported by the browser. Browsers that support a specific format can advertise it by adding the format to the request header of acceptance . For example, the acceptance request header for images in Chrome is:
   Accept: image/avif,image/webp,image/apng,image/*,*/*;q=0.8
   The code to check if AVIF is supported in the recovery event handler can look like this:
   const hdrAccept = event.request.headers.get("accept");
const sendAVIF = /image\/avif/.test(hdrAccept);
   You can use this value to serve AVIF or any other predefined format for the client.

Creating markup for progressive improvement can be daunting. Image CDNs offer the option to automatically serve the best-suited format to the customer. However, if you're not using an image CDN, you can consider using a tool like just-gimme-an-img . This tool can generate the markup for the image element for a given image with different formats and widths. It also creates images matching the markup using full client-side Squoosh. Note: Encoding multiple formats can take a while to use, so you might want to grab a coffee while you wait.

AVIF file encoding and decoding

Different open source projects provide different methods to encode / decode AVIF files:

• Libraries
  Libaom is the open source encoder and decoder managed by AOMedia, the creators of AVIF. The library is continuously updated with new optimizations that aim to reduce AVIF encoding costs, especially for frequently uploaded or high priority images. Libavif is an open source AVIF muxer and parser used in Chrome for decoding AVIF images. You can use libavif with libaom to create AVIF files from uncompressed original images or to transcode them from other formats. There is also Libheif , a popular AVIF / HEIF encoder / decoder e Cavif . Thanks to Ben Morss, libgd supports AVIF and will also arrive on PHP in November.
• Web app and desktop app
  Squoosh , a web app that allows you to use different image compressors, also supports AVIF, making it relatively easy to convert and create .avifof files online. On desktop, GIMP supports AVIF export . ImageMagick e Paint.net also supports AVIF while i plugin of the Photoshop community for AVIF.
• JavaScript libraries
  • AVIF.js is an AVIF polyfill for browsers that do not yet support AVIF. Use the Service Worker API to intercept the recovery event and decrypt AVIF files.
  • Avif.io is another web utility that can convert files from different image types to AVIF on the side client . Call the Rust code in the browser using a WebWorker. The converter library is compiled to WASM using wasm-pack.
  • Sharp is a Node.js module that can convert large images in standard formats into smaller web compatible images, including AVIF images.
• Tools
  Image conversion or transformation utilities support the AVIF format. you can use MP4 Box to create and decode AVIF files.
• In Codes
  go-avif implements an AVIF encoder for Go using libaom. It comes with a utility called avifwhich can encode JPEG or PNG files to AVIF.

Anyone interested in learning how to create AVIF images using Squoosh or build command line encoder avifenccan do this in the codelab on the AVIF file service .

AVIF AND PERFORMANCE

AVIF can reduce the file size of images thanks to better compression. As a result, AVIF files download faster and consume less bandwidth. This can potentially improve performance by reducing the time to load images.

The Lighthouse Best Practices Audit now considers that AVIF image compression can make significant improvements. Collects all BMP, JPEG and PNG images on the page, converts them to WebP and estimates the AVIF file size. This estimate helps Lighthouse report potential savings in the “Serving Images in Next Generation Formats” section.

Tim Vereecke reported 25% byte savings and positive impact on LCP (compared to JPEG) after converting 14 million website images to AVIF measured using Real User Monitoring (RUM).

AVIF ISSUES AND CONS

The biggest drawback of AVIF at the moment is that it lacks uniform support across browsers. The introduction of AVIF as a progressive improvement helps to overcome this problem. Some other aspects where AVIF does not meet the ideal standards for a modern file format.

• Modern versions of Chrome (Chrome 94+) support AVIF progressive rendering while previous versions did not. While there is no encoder at the time of writing that can easily create these images, there is hope that this will change.
• AVIF images take longer to encode and create. This could be a problem for sites that dynamically create image files. However, the AVIF team is working on improving encoding speeds. Google's AVIF contributors also reported some nice performance gains. As of January 1, 2021, AVIF encoding has had an approximately 47% improvement in transcoding time (this is speed 6, the current default for libavif) and over the calendar year a 73% improvement. Since July, there has also been a 72% improvement in transcoding times at speed 9 (encoding on the fly).

• Decoding AVIF images for viewing may also require more CPU power than other codecs, although smaller file sizes can compensate for this.
• Some CDNs don't yet support AVIF by default for their auto format modes because it can be even slower to generate on first request.

WebP

We've mentioned WebP a few times, but let's briefly cover its history. Google created the WebP format in 2011 as an image format that would help make the web faster. Over the years, it has been widely accepted and adopted due to its ability to compress images into smaller file sizes than JPEG and PNG. WebP offers both lossless and lossy compression with acceptable visual quality and supports alpha channel transparency and animation.

Lossy WebP compression is based on the video codec VP8 and uses predictive encoding to encode an image. It uses the values ​​in adjacent pixel blocks to predict the value in one block and encodes only the difference. The lossless WebP images of data are generated by applying multiple transformation techniques to images to compress them.

ADVANTAGES WEBP

Lossy WebP images are generally 26% smaller than PNG, and lossy WebP images are 25–34% smaller than similar quality JPEG images. The animation support makes them a great replacement for GIF images as well. The following shows a transparent PNG image on the left and the corresponding WebP image on the right generated by the Squoosh app with a size reduction of 26%.

In addition, WebP offers other benefits such as:

• Transparency
  WebP has a lossless 8-bit transparency channel with only 22% more bytes than PNG. It also supports lossy RGB transparency, which is a unique feature of WebP.
• Metadata
  The WebP file format supports EXIF ​​photo metadata and the metadata of Extensible Metadata Platform (XMP) digital documents. It can also contain an ICC color profile.
• Entrainment
  WebP supports real-color animated images.

Note: in the case of transparent vector-like images like the ones above, an optimized SVG can ultimately provide a sharper and smaller file than a raster format.

WEBP TOOLS AND SUPPORT

Over the years, ecosystems other than Google have adopted WebP, and there are many tools available to create, view and upload WebP files.

Serve and view WebP files

WebP is supported by the latest versions of almost all major browsers today.

If developers wish to serve WebP on other browsers in the future, they can do so using the <picture>item or request headers as shown in the section above AVIF .

Image Content Delivery Networks (CDN) also support responsive images with automatic format selection for images in WebP or AVIF depending on browser support. WebP plugins are available for other popular stacks such as WordPress , Joomla , Drupal , etc. Initial support for WebP is also available in WordPress core , starting with WordPress 5.8.

You can easily view WebP images by opening them in a browser that supports them. Additionally, you can also preview them on Windows and macOS using an add-on. The installation of the Quick Look plug-in for WebP ( qlImageSize) allows you to preview WebP files using the Quick Look utility. The WebP team has published libraries and utilities prebuilt for the WebP codec for Windows, macOS and Linux. Using these on Windows allows you to preview WebP images in Windows File Explorer or Photo Viewer.

Converting images to WebP

In addition to the libraries provided by the WebP team, several free, open source, and commercial image editing tools support WebP.

Utility:
like AVIF, Squoosh can also convert files to WebP online, as shown in the previous section. XnConvert is a utility you can install on your desktop to convert various image formats, including WebP. XnConvert can also help with removing and editing metadata, cropping and resizing, brightness and contrast, color depth customization, blur and sharpness, masks and watermarks, and other transformations.

Node.js modules:
Image min is a popular image minification module with an add-on for converting images to WebP ( imagemin-webp ). The add-on supports both lossy and lossless WebP modes.

Other:
Several apps for converting and manipulating images support the WebP format. These include Sketch , GIMP , Imagemagick , etc. A Photoshop plug-in for WebP .

USE WEBP PRODUCTION

Due to the advantages of compression over JPEG and PNG, many large companies are using WebP in production to reduce web page loading times and costs. Google records 30-35% savings using WebP over other lossy compression schemes. data, serving 43 billion image requests per day, 26% of which with lossless data compression.

To reach its large user base in emerging markets where data is expensive, Facebook has started providing WebP images to Android users. They have observed “A data saving of 25-35% compared to JPG and 80% compared to PNG”.

WEBP ISSUES AND CONS

At first, a substantial drawback of WebP was the lack of browser and tool support. There are still few trade-offs with WebP when considering all the features a modern format should ideally support.

• WebP is limited to 8-bit color accuracy. As a result, it cannot support HDR / wide gamut images.
• WebP does not support lossy images without chroma subsampling. Lossy WebP works exclusively with an 4-bit 2: 0: 8 YCbCr, while lossless WebP works with the RGBA format. This can affect images with fine details, color textures, or colored text. See below for an example.
• It does not support progressive decoding, however it does support incremental decoding . This can somewhat compensate for it, but the effect on rendering can be different.

Ideally you should generate WebP files from the best quality source files available. Converting poor JPEGs to WebP is not very efficient as you lose in quality twice.

Riepilogo

Summarizing all the information on the four formats JPEG, PNG, AVIF and WebP and comparing and quantifying the strengths and weaknesses as presented in the previous section, we obtained the following table.

Note: star rating is based on general opinion and may vary for specific use cases.

Below are some of the key points to consider when referring to this table.

• Compression for photographic and non-photographic images may differ further based on the fidelity (quality) of the images. We have indicated an overall score here.
• You should choose the chroma subsampling and quality settings according to the purpose of the images. Low and medium fidelity images can be acceptable in most scenarios on the web, such as for news, social media, and e-commerce. Image, film or photography storage websites require high fidelity images. You should test the actual compression savings for high fidelity before converting to another format.
• Lack of support and speed for progressive decoding could be a problem for encoding / decoding AVIF files. For websites with medium-sized images, the byte savings due to compression can compensate for the speed and lack of progressive decoding as images download quickly.
• When comparing the compression offered by image formats, compare file sizes with same DSSIM .
• The quality setting used during encoding does not have to be the same for different formats to produce the same image quality. A JPEG encoded with a quality setting of 60 can be similar to an AVIF with a quality setting of 50 and a WebP with a quality setting of 65, as suggested by this post .
• Extensive studies are still needed to measure the actual impact on the LCP when comparing formats.
• We have not included other formats such as JPEG XL and HEIC in this comparison. JPEG XL is still in a relatively nascent stage and only Apple devices support HEIC (while Safari does not). Royalty and license fees further complicate HEIC support.

AVIF checks most of the boxes in general, and WebP has better support and better compression than JPEG or PNG. Therefore, you should undoubtedly consider WebP support when optimizing images on your website. Evaluating AVIF if it meets your requirements and introducing it as a progressive improvement could provide value as the format is adopted across different browsers and platforms. With quality comparison tools and improved encoding speeds, using AVIF would eventually become easier.