Chapter 1: Introduction to AVIF

I am excited to introduce you to AVIF, a revolutionary next-generation image format that offers enhanced compression capabilities and superior image quality. This format is poised to take over as the successor to WebP, which has already significantly optimized website performance.

Why Is AVIF Gaining Traction Now? As of January 26, 2024, Microsoft Edge has released version 121, which includes support for AVIF. This development signifies that AVIF is now fully supported across all major browsers (caniuse).

What About WebP? While WebP provides commendable lossless compression and maintains quality compared to older image formats, it struggles with lossy compression, often resulting in images that appear degraded. This degradation can manifest as unwanted artifacts such as borders, shadows, and pixelation, particularly noticeable in images featuring people or nature.

Why Choose AVIF? AVIF outperforms other formats in terms of lossy compression, delivering remarkably small image sizes with minimal quality loss. It surpasses its predecessors, including WebP, in this aspect. Released in 2019, AVIF is relatively new compared to WebP, which debuted in 2010. One of its standout features is its ability to handle vector-like and text elements without introducing unwanted effects, a significant limitation of WebP.

Visual Comparison AVIF maintains sharper edges better than both JPEG and WebP, producing smoother visuals. However, not every image type will see the same benefits from AVIF. I recommend testing both formats for your specific needs to determine which is more suitable in the long run. For instance, even PNG files can exhibit better quality and compression than WebP, with only AVIF surpassing them.

Original PNG: 34 KB Lossy PNG: 2.4 KB Lossy WebP: 3.3 KB Lossy AVIF: 1.5 KB

In a visual analysis, it’s evident that for images lacking sharp features, such as photographs without distinct outlines, the differences between WebP and AVIF are minimal, yet AVIF still edges out.

Chapter 2: Importance of AVIF for Web Performance

The video "Is AVIF the Future of Web Images? (RIP WebP)" explores the advantages of AVIF over WebP, emphasizing its potential to revolutionize web image standards.

With over 55% of web traffic originating from mobile devices, optimizing for speed is crucial. Mobile users typically do not have access to high-performance laptops connected to fast Wi-Fi. Thus, improving your First Contentful Paint (FCP) score—one of Google’s Core Web Vitals—is essential for maintaining your site's SEO ranking.

A poor FCP can rapidly diminish your website's visibility, making it imperative to employ any technology available to enhance loading times. Although WebP serves its purpose, there are instances where it does not yield significant benefits for specific images.

Choosing Your Optimization Tools If you utilize third-party image storage APIs, like Google AppEngine Image API, ensure they offer options for output encoding. If not, several tools can assist you in optimizing images effectively.

Online Tools for Conversion:

ImageMagick Usage: ImageMagick is a widely-used open-source tool ideal for command-line image processing.

# Convert to AVIF magick -quality 75 image.png image.avif

# Convert to WebP magick -quality 75 image.png image.webp

FFmpeg for Image Processing: FFmpeg, primarily known for video processing, is also useful for image conversions.

# Convert to AVIF ffmpeg -i image.png -quality 75 image.avif

# Convert to WebP ffmpeg -i image.png -quality 75 image.webp

What to Do Next For further insights on next-gen web image formats and overall image optimization strategies, refer to my previous article. I hope this information proves beneficial for you and your team, allowing you to focus on more critical tasks.

The video "The Best Image Format, from AVIF to WebP to JPG with Core Web Vitals and Progressive Enhancement" delves into the best practices for image formats in relation to performance metrics, helping you make informed decisions about your image strategy.