Image Optimisation with Next Gen Image Formats (WebP and AVIF)

Powered through AEM Dynamic Media Smart Imaging.

Published in

Adobe Tech Blog

9 min readAug 6, 2021

Need for Speed

Page speed is a measurement of how fast the content on your page loads. Your website page speed needs to be as fast without compromising the customer experience. There are many factors which contribute to page speed, one of them is Image Optimisation. The biggest challenge for developers is always images. Images are first ones to be blamed when we talk about slow page load.

Speed is used as a major factor — be it end user’s perspective, search engines or Ads.

It’s lonely at the top, but you won’t regret the view

Google believes that the Core Web Vitals are critical to all web experiences. Core Web Vitals are a set of user-centred metrics that Google uses to quantify key aspects of the user experience in the real world. Google plans to make page experience an official Google ranking factor. The user experience on the website will have a greater effect on the website’s rankings. Core Web Vitals compliance will keep you in the news feed. For most of us, either Apple or Google newsreaders have been our “morning paper.” Google News Reader is an important source of traffic for a blog if it updates regularly. These Core Web Vitals are three metrics representing the load time, visual stability and interactivity of a page. Learn more from our recent webinar (Google Core Web Vitals Webinar)

Let’s now see how using AEM Dynamic Media, one can achieve faster page loads, retaining high quality visuals, and thereby higher Google ranking.

Emergence of WebP

JPEG/PNG are the most commonly used image formats (being supported across almost all browsers). These have been established for over almost 2 decades. WebP is a modern image format that provides superior lossless and lossy compression for images on the web. WebP significantly reduced the byte size of photos on the web, allowing web sites to load faster than before. WebP supports transparency and multiple image animation. So, it is a good replacement for transparent PNGs and GIFs.

Make way for AVIF file format

AVIF (AV1 Image File Format) is an image file format specification for storing images or image sequences compressed with AV1 in the HEIF file format. With major companies like NETFLIX and Google (For Chrome) supporting this format, the AVIF image format looks quite promising with a bright future. Like WebP, AVIF supports transparency and multiple image animation. So, it is a good replacement for transparent PNGs and GIFs.

WebP & AVIF support in AEM Dynamic Media Smart Imaging

In Adobe Experience Manager (AEM) Dynamic Media , we supported WebP from the start. We have already taken strides to optimise page load performance leveraging WebP, thereby benefiting a gamut of our customer base.

This is powered through Smart Imaging capability — proprietary technology that applies Adobe Sensei capabilities and works to enhance image delivery performance by automatically optimising image format, size, and quality based on client browser capabilities & end users characteristics. This is available to all Dynamic Media Classic and AEM Dynamic Media customers at no additional cost. Check out the link for FAQs/ pre-requisites and if interested to leverage this capability on your digital properties powered through Dynamic Media, please contact our Support team and they will help set you up on it.

At Adobe we want to offer AVIF Image Format early with our Dynamic Media solution. We now support AVIF format for Image Delivery. And the results with AVIF are awesome! Go ahead and try it out as a URL fmt modifier.

Coming Soon — Support for AVIF in Smart Imaging

AEM Dynamic Media with AEM Sites

AEM Dynamic Media Smart Imaging capability can also be used with AEM Sites to make your websites light weight and load faster, thus giving a performance boost. To add Dynamic Media capabilities to assets you use on your digital properties authored in AEM Sites, you can add relevant Dynamic Media components directly on the page. Dynamic Media components are smart — they know whether you are adding an image or a video, and the configuration options available change accordingly. Smart Imaging will be enabled even on your AEM Sites pages as long as it is enabled for your Dynamic Media account.

Dynamic Media Image capabilities are now also available with AEM Sites Image and Carousel core components.

Comparing Image Formats

In AEM Dynamic Media, PNG image format is considered to be lossless. Hence all PNG images are always delivered at 100 quality. In this comparison we compared the images at quality setting of 90 for JPEG/WebP and 50 for AVIF. But this quality number is subjective to each format.

How do we ensure if the image has same visual quality? Answer is PSNR (Peak Signal to Noise Ratio). PSNR is a good measure for comparing restoration results for the same image [1]. PSNR of JPEG/WebP/AVIF image is calculated with respect to its PNG image.

Here once can observe WebP at quality 90 and AVIF at quality 50 maintains the similar PSNR when compared to JPEG at quality 90 -

The size benefits are amazing with WebP and AVIF -

From our tests results, we recommend AVIF quality of 50 for a WebP/JPEG at quality 90 (for wid=600) when using AEM Dynamic Media.

(This recommendation is based on our test data for a specific image dimension. The recommendation would vary as the image dimensions see a major increase/decrease. Try AEM Dynamic Media Smart Imaging to use Adobe Sensei capabilities to do this calculation automatically. Also read our Blog on AEM Dynamic Media Smart Imaging)

AVIF has provided 20% extra size reduction over WebP, which provided 27% reduction over JPEG. All at same visual quality. In total AVIF provides upto 41% average size reduction over JPEG (in some images like sample8 we even got 76%).

Compare WebP and AVIF to PNG, one would observe 84% size reduction with WebP and 87% with AVIF. And since both WebP & AVIF supports transparency and multiple image animation, it is a good replacement for transparent PNGs and GIFs.

Feel free to click on the images below and compare.

Avoid the FOMO (Fear of Missing Out)

Thinking about if all browsers deliver these Next Gen Image Formats? WebP is currently supported by all major browsers, Apple being the recent one to add it in Safari 14+. Google already fully supports AVIF in Chrome browser since v85 with mobile support since v91. Firefox is also working on adding AVIF support. Here is a glimpse of which browser supports WebP and AVIF

WebP Support (as of July 2021). Click here for latest trends.

AVIF Support (as of July 2021). Click here for latest trends.

One can easily start using either of these formats easily. Using the Accept Header of the browser, you can easily determine if your browser supports AVIF/WebP. For example -

> accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9

If the accept header includes image/avif, means it supports AVIF format. Similarly if it includes image/webp, means it supports WebP format.

Too complicated? Leave it to AEM Dynamic Media Smart Imaging to optimise your page load performance and serve WebP automatically. AVIF & WebP are supported in Smart Imaging with AEM Dynamic Media. Read more about Smart Imaging in our Blog

To conclude, these new Image Formats have really unlocked the power of compressing images more and more. With WebP by keeping the same quality, the size was reduced by an average of 27%. AVIF took it a notch further by delivering the same image with further 20% average size reduction and at a much lower quality level while maintaining the visual quality. What the latter means is that it allows you to deliver even more higher quality images as well in this era of increasing resolutions.

The AEM Dynamic Media Smart Imaging capability can also be used with AEM Sites to make your websites light weight and load faster, thus giving a performance boost.

— -

Read our blog on AEM Dynamic Media Smart Imaging

Learn more about the features and abilities of Adobe Experience Manager Assets , and get more details and kick the tires with hands-on demos with Dynamic Media.

Learn more about AEM Dynamic Media integration with your AEM Site webpages