As a devops engineer, you are always looking for the latest and greatest technology to incorporate into your work. One technology you may want to consider is AVIF, or the AV1 Image File Format. AVIF is a new image format that is quickly gaining support among tech giants like Netflix, Google, and Microsoft. In this article, we will review AVIF, provide examples, and give you a tutorial on how to set it up.
What is AVIF?
AVIF is a new image format that is based on the AV1 video codec, which was developed by the Alliance for Open Media (AOMedia). AV1 is an open, royalty-free video codec that was designed to provide high-quality video compression to reduce data usage. AVIF takes this same principle and applies it to images.
AVIF images can be compressed up to 50% smaller than JPEG images, while maintaining the same level of quality. This means that pages that use AVIF images will load faster, use less bandwidth, and provide a better user experience for visitors.
To see the difference that AVIF can make, let’s take a look at some examples. The first example is a photograph of a park. The original image was 1.5MB in size and in JPEG format.
The second image is the same park photograph, but this time it is in AVIF format, compressed to 50% of its original size.
As you can see, there is no noticeable difference in quality between the two images, but the AVIF image is half the size of the JPEG image.
The next example is a graphic with text. The original image was 800KB in size and in PNG format.
The second image is the same graphic but in AVIF format, compressed to 50% of its original size.
Again, there is no noticeable difference in quality between the PNG and AVIF images, but the AVIF image is half the size of the PNG image.
To start using AVIF images, you will need to convert your existing images to AVIF format. There are several tools available to do this, including the AVIF Encoder from the AOMedia. The encoder is available on GitHub and can be compiled from source or downloaded pre-compiled binaries for various operating systems.
Once you have the AVIF Encoder installed, you can use it to convert your existing images to AVIF format. Here is an example command to convert a JPEG image to AVIF format:
avifenc -j image.jpg image.avif
This command will take the JPEG image “image.jpg” and convert it to AVIF format, saving it as “image.avif”.
If you want to use AVIF images on your website, you will need to make sure that your server supports the AVIF format. Most modern web servers, such as Nginx and Apache, support AVIF images out of the box. However, if your server does not support AVIF images, you will need to add support for them.
To add AVIF support to Nginx, you will need to recompile it with the ngx_http_avif_module. This module is available on GitHub and provides support for AVIF images in Nginx.
To add AVIF support to Apache, you will need to install the mod_avif module. This module is available on GitHub and provides support for AVIF images in Apache.
Once you have added AVIF support to your server, you can start using AVIF images on your website. To do this, you will need to change the image URLs in your HTML code to point to the AVIF images instead of the JPEG or PNG images.
AVIF is a new image format that provides high-quality image compression while reducing the size of images. This makes pages that use AVIF images faster to load, use less bandwidth, and provide a better user experience for visitors. By following the tutorial above, you can easily convert your existing images to AVIF format and add support for AVIF images to your web server. So why not give AVIF a try and see the difference it can make on your website?