Introduction
In the context of current web trends, where page loading speed and image quality are key, AVIF appears to be a significant advance.
According to a study by Google, the AVIF format can reduce file size by 20-30% compared to the WebP format, which is already known for its efficient compression in itself. What’s more, compared to the traditional JPEG format, these savings can be as high as 50% while maintaining comparable image quality.
Statistics such as these are of paramount importance in the context of web browsing, where every extra megabyte of data can affect page loading speed and ultimately user experience or seo.
AVIF can reduce file size by 50% compared to JPG format
The depth and innovation of the format become clear when we look at its technical aspects. As an image format, AVIF uses an advanced compression algorithm that is directly derived from the AV1 video codec. It is this algorithm that is responsible for its unique properties, such as highly efficient compression, support for a wide colour gamut, including High Dynamic Range (HDR), and the ability to store high-resolution images with a relatively small file size.
Compression Efficiency
One of AVIF’s most notable strengths is its ability to significantly reduce file size without any apparent loss of image quality. For example, in tests conducted by Netflix, AVIF-encoded images were 50% smaller than JPEG-encoded equivalents, while maintaining comparable visual quality. This ability to compress efficiently is crucial in a web context, where a smaller file size translates into faster page loads and better performance.
Colour and HDR Support
AVIF is also distinguished by its support for wide colour gamut and HDR. Compared to traditional formats like JPEG, which are limited to sRGB, AVIF can store images in colour spaces like BT.2020, which is important for the future of TV and video in 4K quality and above.
AVIF vs Other Formats
When juxtaposed with other popular image formats, the differences become clearer. Compared to WebP, another format known for its compression efficiency, AVIF offers similar, and sometimes even better, compression while maintaining higher image quality. Unlike PNG, it allows lossless and lossy compression, providing greater flexibility.
Check also:
AVIF vs Other Formats
Built on the AV1 video codec, the format brings significant innovations in digital image compression. This modern, open imaging format offers a number of advantages over traditional formats such as JPEG and PNG.
1. Advanced Functions
Unlike JPEG, it offers support for animation, alpha transparency and overlays. It also supports a wider colour gamut for richer and more vibrant images. These advanced features enable AVIF to deliver an extremely realistic visual experience.
The Future of Image Compression
AVIF is being developed with multi-core CPUs in mind. It is expected that compression times will reduce significantly over time as multicore technologies develop. Although it does not support progressive rendering, its smaller size will allow faster download and display than JPEG or PNG files.
3. SEO Impact
Using the format can speed up page load times, resulting in lower rejection rates, better SEO and greater customer satisfaction. OneFootball, for example, saw a 26% faster page load time and a 24% quicker achievement of interactivity (TTI) when automatic conversion to AVIF was enabled.
4. Savings
AVIF can significantly reduce bandwidth consumption, which is particularly important for high-visibility websites. For example, for 2 MP images, the AVIF format can reduce the size from 291 KB (JPEG) to 178 KB, which translates into a saving of 113 KB (39%) per image. This reduction in file size can contribute to bandwidth cost savings, even after taking into account the higher costs of encoding and storing images.
Addy Osmani, a well-known specialist in web performance, conducted tests comparing AVIF with JPEG and WebP, revealing significant savings in file size while maintaining high image quality. In one test, a 560 KB JPG image was compressed to 289 KB (JPEG@q75), 206 KB (WebP@q75) and 101 KB (AVIF@q30), achieving up to 81% compression savings.
5. Support for Animation and Transparency
AVIF goes beyond traditional image formats such as JPEG by offering support for animations, similar to those known from the GIF format, and PNG-like transparency. These features make it an attractive choice for a variety of graphic applications, including graphics, logos and infographics, where JPEG has its limitations. Additionally, it offers better lossless compression than JPEG, which is crucial for maintaining high quality images after compression.
AVIF allows the creation of images composed of multiple layers, stored in image sequences, making it possible to create animations and so-called ‘live images’. In addition, the format supports monochrome and multi-channel images, including transparent images using the alpha channel.
Check also:
6. Advanced Colour Possibilities
AVIF supports a colour depth of 12 bits, allowing for high dynamic range (HDR) and wide colour gamut (WCG) images. These features allow for a better range of light and dark tones and a wider range of luminance. As a result, it is able to deliver images with exceptionally rich colour and dynamic range, which is important for displaying images on modern devices.
Disadvantages and Limitations
Despite its many advantages, the AVIF format faces some limitations, mainly related to browser support and encoding costs.
1. Browser Limitations
One of the main challenges for AVIF is support by different browsers. At the beginning of 2024, support among browser users was around 79.81%, while support for the WebP format was already at 96.30%. Chrome and Opera offer full support for AVIF images, while Firefox users can configure this setting manually. In the mobile environment, it is supported by Chrome on Android and the Android browser. Safari started supporting the format from version 16.1 and Firefox from version 93.
2. Coding Costs
Another limitation is the cost of encoding. The AVIF encoding process is 8-10 times more expensive than JPEG encoding due to its complex nature and advanced compression techniques. This requires a deep understanding of image compression theory and a commitment to research and development. Many CDN companies still seem reluctant to invest in AVIF technology, which inhibits its widespread adoption.
3. Problems With Progressive Rendering
AVIF does not support progressive rendering, a technique used in standard JPEG and WebP images, which are loaded line by line from top to bottom until the image is completely displayed. The lack of this feature can affect the way images are loaded and displayed in browsers.
Case Studies
Implementation of AVIF for Responsive Websites
With its advanced compression techniques, it enables the creation of smaller image files while maintaining similar visual quality, which is crucial for faster loading web pages and reduced bandwidth consumption. Tools such as ImageMagick and FFmpeg provide a good starting point for more dedicated developers interested in using AVIF. Over the past two years, AVIF encoding speeds have improved significantly, enabling the efficient implementation of large-scale image compression.
Animated AVIF
The AVIF format offers significant space savings compared to animated GIFs. Tests showed that average file size savings were around 86% compared to original GIF files and around 73% compared to animated JPEG XL files. Tools such as FFmpeg can be used to create animated files, making this format increasingly attractive for dynamic visual content on websites.
Applications in Application and Web Development
The main use of the AVIF format is as a more efficient alternative to traditional image formats, such as JPEG and PNG, in application and web development. Thanks to the advanced compression techniques provided by the AV1 codec, files can deliver comparable or better image quality with a significantly reduced file size. This translates into faster loading times and reduced bandwidth consumption for websites and applications. AVIF also supports a wide range of advanced features such as high dynamic range (HDR) and wide colour gamut, making it suitable for a variety of specialist applications.
Use of the HTML <picture> Tag
AVIF can be used effectively in conjunction with the HTML tag to serve different versions of an image to different displays, devices or browsers. This allows images to be served in browsers that support them, while providing alternative formats for browsers that do not yet support AVIF. The tag allows for flexible management of responsive images, ensuring optimal adaptation to the size and resolution of the user’s display.
The Future and Innovation for AVIF
Innovation in Automation and AI
The application of artificial intelligence (AI) and automation in the area of image optimisation will be key to the future development of image formats, including AVIF. Such innovations could include better compression algorithms, using machine learning to reduce file sizes even more effectively without sacrificing image quality.
JPEG XL as a Potential Competitor
JPEG XL, a new image format that also offers unique compression and image quality benefits, could compete with AVIF. JPEG XL provides a significant reduction in file size while maintaining high quality, faster encoding/decoding and progressive decoding, which is beneficial for web and mobile application users. This is important because the development of digital imaging technology is dynamic, and the emergence of new formats such as JPEG XL may influence format popularity and adoption.
Need for Continuous Development and Adaptation
Further development of the format will require continued adaptation and innovation in compression technologies and data storage methods. The future of the AVIF format will depend on its ability to adapt in a rapidly changing technological environment, where innovation is key to remaining competitive and functional.
Summary
The AVIF format, based on the AV1 video codec, has revolutionised the world of digital imaging, offering significant advantages in terms of compression and image quality. Its ability to reduce file size by 50% or more compared to JPEG, while maintaining high image quality, makes it an attractive choice for websites and digital applications seeking faster loading and more efficient use of bandwidth.
