What is the AVIF format?

AVIF is a relatively new image format with better compression and quality than the popular JPEG, PNG, and WebP formats. AVIF stands for AV1 Image File Format, based on the AV1 video codec developed by the Alliance for Open Media.

AVIF uses the same compression techniques as AV1, such as intra-prediction, transform coding, entropy coding, and loop filtering, to reduce the size of image files without sacrificing visual quality. AVIF supports transparency, animation, color profiles, and HDR (Unlike WebP).

One of the main advantages of AVIF is that it can achieve much higher compression ratios than JPEG and PNG and even WebP while maintaining or improving the image quality.
The size reduction is significant to developers because bandwidth cost money - trust us MajorGeeks push a LOT of bandwidth (so keep that in mind when viewing our page ad blocking crowd - it's pricey.) Also, page speed is important to the end-user experience and to Google search algorithms. If all things are equal, the faster page may rank higher.

For example, in this image of my dogs (Titan and Loki), You can see the massive advantage where the original photo is 9.04 MB in JPG but 706KB in AVIF. My eye could dectet no quality difference at all. You can also see how Windows 10 File Explorer does not support AVIF as yet. But you can imagine the savings for a company like Facebook (which supports AVIF) that displays billions of images. Massive.



Another benefit of AVIF is that it is open and royalty-free, unlike other image formats such as HEIC and JPEG 2000. Anyone can use and implement AVIF without paying licensing fees or worrying about patent issues. AOMedia is a consortium of tech companies and organizations that includes Google, Microsoft, Netflix, Facebook, Amazon, Mozilla, and others.

AVIF is still a relatively new format and has yet to be widely supported by browsers and applications. However, major browsers like Chrome, Firefox, and Edge have already added or announced support for AVIF, and more platforms are expected to follow.

How to creat AVIF images

First, you need to create or convert your images to AVIF format. Several tools and services can help you with this task. Some which you may be familiar with for your desktop are: GIMP, Photoshop, ImageMagick, FFMPEG, irfanview and Zoner Photo Studio X.

If you are looking for a web app, try Squoosh. You can drag and drop your images, choose the output format (including AVIF), and adjust the quality settings. Squoosh also shows you a side-by-side comparison of the original and compressed images to see the difference in file size and appearance.

UberGeeks should check out libavif: A library that provides encoding and decoding functions for AVIF images. You can use it to create applications or scripts that handle AVIF files.

How to Use AVIF on a web page

Once you have your AVIF images ready, it's time to add them to your web page. The best way to do this is to use the element, which allows you to specify multiple sources for an image, and let the browser choose the best one based on its capabilities and preferences. For example:

< picture>
< source srcset="image.avif" type="image/avif">
< source srcset="image.webp" type="image/webp">
< img src="image.jpg" alt="Image">
< /picture>

This code tells the browser to try to load the image.avif file first, if it supports AVIF format. If not, it will try to load the image.webp file, if it supports WebP format. If neither of these formats are supported, it will fall back to the image.jpg file, a standard JPEG image.

By using this technique, you can ensure that your web page will load faster and look better for users who have browsers that support AVIF format while still providing a compatible experience for users who don't.

However, there are some challenges and limitations that you should be aware of when using AVIF format in a web page.

- Browser Support: Currently, only a few browsers support AVIF format natively, such as Chrome, Edge, Firefox, and Opera. Other browsers may require extensions or plugins to display AVIF images. You can check the current status of browser support for AVIF format here: https://caniuse.com/avif

- Encoding speed: Creating AVIF images can take longer than creating JPEG or PNG images due to the complexity of the compression algorithm. This may affect your workflow or performance if you need to generate or update your images frequently or dynamically.

- Compatibility: Some image editing tools or services may not support AVIF format yet, or may have limited features or options for it. This may limit your ability to manipulate or optimize your images as you wish or you may need to download additional applications.

Summing up: AVIF is a promising image format that offers many benefits over the existing ones for web developers. It can significantly reduce the file sizes and bandwidth consumption of images on the web while preserving or enhancing the visual quality. It can also support various features and use cases that are not possible or efficient with other formats. Given that AVIF is an open and royalty-free format that a large and diverse group of industry players back the format, it will likely become a widely used image format soon. D

I hope that helps clear things up and give the rest of you meme collectors one more thing to worry about in the future. #TheStruggleIsReal

comments powered by Disqus