Image Optimization: Next-Generation Image Formats WebP and AVIF

Speed Requirements

Web page speed measures how quickly content loads on a webpage. Typically, a website's page speed should be fast enough without compromising user experience. Many factors affect web page speed, one of which is image optimization. For developers, images often present the greatest challenge. When discussing slow webpage loading, images are frequently the main culprit.

Speed is the top priority for end-users, search engines, and advertisements alike.

Standing atop the peak, even in solitude, makes the journey worthwhile

Google considers Core Web Vitals essential for all website experiences. Core Web Vitals is a set of user-centric key metrics used by Google to measure real user experience. Google plans to incorporate page experience as an official ranking factor, meaning a site's user experience will significantly impact its ranking. The Core Web Vitals guidelines will keep you updated with news feeds. For many of us, Apple or Google's news readers serve as our "morning paper." If regularly updated, Google's news reader can be a significant source of blog traffic. Core Web Vitals includes three metrics: page loading time, visual stability, and page interactivity.

Next, let's explore how to use AEM Dynamic Media to achieve higher Google rankings by enabling faster page loads while maintaining high-quality visuals.

*Adobe Experience Manager (AEM) is a comprehensive content management solution for building websites, mobile apps, and forms.

The Advent of WebP

JPEG/PNG are currently the most widely used image formats (supported by almost all browsers), having been around for nearly 20 years. WebP, on the other hand, is a modern image format that offers higher-performance lossless and lossy compression for web images. WebP can significantly reduce the size of photos on webpages, making sites load faster than before. Additionally, WebP supports transparency and animated images, making it an excellent alternative to transparent PNGs and GIFs.

Paving the Way for AVIF

AVIF (AV1 Image File Format) is an image format that stores AV1-compressed images or image sequences in the HEIF file format. Currently supported by major streaming companies like Netflix and Google (Chrome), the AVIF format shows immense promise. Like WebP, AVIF also supports transparent images and animated sequences, making it another viable alternative to PNGs and GIFs.

WebP and AVIF Support in AEM Dynamic Media Smart Imaging

AEM Dynamic Media has supported the WebP format from the beginning. We've made significant progress in optimizing webpage load speeds with WebP, enhancing the experience for all users.

This is largely due to Smart Imaging, a patented Adobe Sensei technology that automatically optimizes image format, size, and quality based on browser performance and end-user characteristics, thereby improving image delivery performance. All Dynamic Media Classic and AEM Dynamic Media users can access this feature at no additional cost.

*Dynamic Media Classic is a hub for customers to create, author, and deliver rich media content. It is an integrated environment for rich media management, publishing, and delivery. Dynamic Media represents the next evolution of Dynamic Media Classic's capabilities.

At Adobe, we aim to support AVIF in dynamic media solutions as early as possible. We now support AVIF in Image Delivery, and combining it with AVIF is truly impressive! We are also exploring its use as a URL fmt modifier.

Stay tuned—AVIF support in Smart Imaging is coming soon!

AEM Dynamic Media for AEM Sites

The Smart Imaging feature in AEM Dynamic Media can also be applied to AEM Sites, making your website lightweight and faster to load, thereby improving performance. To add Dynamic Media functionality to digital assets created on your AEM site, you can directly include relevant Dynamic Media components on your pages. These components are intelligent, recognizing whether you're adding an image or video and adjusting available configuration options accordingly. Once Smart Imaging is activated in your Dynamic Media account, it will be enabled on your AEM site pages.

Dynamic Media image features are also available for AEM Sites' Image and Carousel core components.

Comparing Image Formats

In AEM Dynamic Media, PNG images are often considered lossless, so all PNGs are delivered at 100% quality. In this comparison, we evaluated JPEG/WebP images at quality 90 against AVIF images at quality 50. It's worth noting that image quality is subjective across formats.

How do we ensure consistent visual quality? The answer is PSNR (Peak Signal-to-Noise Ratio). PSNR is an effective method for comparing the restoration quality of the same image. Using PNG as a baseline, we calculated PSNR values for JPEG, WebP, and AVIF formats.

Here, we observe that WebP at quality 90 and AVIF at quality 50 yield similar PSNR values compared to JPEG at quality 90.

Compression Results

The optimization in file size with WebP and AVIF is remarkable.

Based on our tests, we recommend using AVIF at quality 50 to replace WebP/JPEG at quality 90 (wid = 600) in AEM Dynamic Media.

(This recommendation is based on our test data for specific image sizes and may vary with significant size changes. We plan to integrate AVIF with Smart Imaging soon, leveraging Adobe Sensei for automatic calculations.)

With equivalent visual quality, AVIF improves compression by 20% over WebP, while WebP improves by 27% over JPEG. Overall, AVIF reduces file sizes by an average of 41% compared to JPEG, with one sample (Example 2) achieving a 76% reduction.

Comparing WebP, AVIF, and PNG, we found WebP achieves an 84% compression improvement, and AVIF reaches 87%. Since both support transparency and animations, they are excellent alternatives to transparent PNGs and GIFs.

Do all browsers support next-gen image formats? Currently, all major browsers support WebP, including Apple's recent addition to Safari 14+. Chrome has fully supported AVIF since v85, with mobile support added in v91. Firefox is also working on AVIF support. Below are the browsers supporting WebP and AVIF:

WebP Support (as of July 2021)

AVIF Support (as of July 2021)

Adopting either format is now straightforward. By checking a browser's Accept Header, you can easily determine AVIF/WebP support. 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," AVIF is supported. Similarly, "image/webp" indicates WebP support.

Does this seem too complex? Let AEM Dynamic Media Smart Imaging automatically optimize webpage performance and WebP delivery. AVIF support in Smart Imaging is also on the roadmap.

In summary, these new formats unlock powerful image compression. At equivalent quality, WebP reduces file sizes by 27% on average, while AVIF further cuts sizes by 20% while maintaining visual quality at lower settings—or delivering higher-quality images in this era of increasing resolutions.

AEM Dynamic Media's Smart Imaging can also enhance AEM Sites, making them lighter and faster to load, thereby boosting performance.