AVIF – Race Down the Autobahn of Image Performance

AVIF Image Format Delivers Superior Image Quality, Small Files, and Transparency

Imagine an image format that gives you all the features you want in a file size that can be downloaded extremely fast. This is what the new AVIF format delivers and it’s widely gaining support throughout the image editing, graphic design, web development, gaming, and social media fields. Read on if you appreciate high performance without compromises.

What Is AVIF?

AVIF (short for AV1 Image File Format) was developed by the Alliance for Open Media, and is built on an ultra-efficient video codec called AV1. AV1 uses advanced compression techniques combined with alpha channel support and can deliver transparency better than PNG formats, and with much smaller file sizes.

In our own informal testing, we’ve seen excellent results. For instance, a hi-res JPG file that was originally 12.7 MB compressed to just a 112 KB AVIF file with no noticeable compression artifacts.

In addition to superior compression and transparency, the AVIF format also supports the following advanced options:

Sounds Great. Is There Browser Support?

Any promising new feature is only as good as its level of support. You’ll be happy to know that the browser support for AVIF is already excellent. AVIF is fully supported in desktop current versions of Google Chrome, Microsoft Edge, Mozilla Firefox, Safari, and Opera. Mobile browser support is almost as good, with iOS Safari currently supporting still AVIF images, but not yet animated sequences, and only Opera Mini having limited to no AFIV support yet. All other mobile browsers offer full AVIF support.

How Do You Create An AVIF With An Image Editor?

Unfortunately, as of this writing, image editor support for AVIF is lagging significantly behind browser support. Neither Adobe Photoshop nor Adobe XD have added the AVIF format to their Export/Save As settings. Adobe Illustrator can open and edit AVIF files but not save them. Figma is able to work with AVIF files after installing a plugin. And popular online editor Canva has no AVIF support. We hope to see full AVIF support for these applications soon.

Fear not however, there are still several excellent tools online for converting images to AVIF like Squoosh, CloudConvert, and AVIF Converter. The recommended workflow would be to edit your images in your current image editor of choice and export them as high-quality PNG files. After exporting, point your browser to one of the aforementioned online editors and import your PNG. Squoosh really shines in this area as it shows you a side-by-side comparison from the native image to the compressed AVIF file so you can fine tune your settings and see the file size reduction.

455 Million WordPress Websites Can’t Be Wrong

WordPress, currently the most popular website content management system, powering over 455 million websites, included full AVIF file support in their 6.5 release on April 2, 2024. AVIF support varies by CMS but is growing all the time. One caveat to note is that the webserver running the CMS must be able to process AVIF images. For instance, WordPress supports both the Imagick and LibGD PHP libraries, but they must use a version with AVIF support enabled. In WordPress you can easily check for AVIF support. More information on this is available here.

More Than Just A Meme Machine

AVIF offers vastly improved animation over its predecessors, animated GIF and WebP. This is possible due to intra-frame and inter-frame prediction, redundant data reduction, and a wide range of color spaces, bit depths and alpha channels. This enables truer color reproduction, smoother gradients, and seamless layer blending with any background.

Like its single-frame sibling, AVIF animation is already supported in major browsers such as, Google Chrome, Mozilla Firefox, and Microsoft Edge, without requiring any plugins or extensions. This is also the case on mobile devices using Android and iOS.

To Sum Up

This new format looks to be a very good option for a wide range of high-quality image options with smaller file sizes. Watch for support to continue to spread and consider serving AVIF files as a progressive enhancement where support is currently unavailable. Smashing Magazine has an excellent article with information about the progressive enhancement technique for serving modern image formats.

It is hoped that AVIF can help save data both for internet users and web hosts. Support is widespread enough to safely start experimenting with it for photography as well as graphics with transparency or animation.

Where To Learn More

1. AVIF Official Spec: https://aomediacodec.github.io/av1-avif/
2. Overview of AVIF Transparency: https://avifstudio.com/blogs/faq/avif-support-for-transparency/
3. AVIF Animation Support: https://avifstudio.com/blogs/faq/avif-animation/
4. Squoosh Online Image Converter: https://squoosh.app/  
5. What is AVIF: https://www.howtogeek.com/819161/what-is-avif-format/
6. WordPress Market Share: https://wpdevshed.com/wordpress-market-share/
7. Go Deeper into AVIF: https://www.smashingmagazine.com/2021/09/modern-image-formats-avif-webp/
8. WordPress 6.5 adds AVIF Support: https://make.wordpress.org/core/2024/02/23/wordpress-6-5-adds-avif-support/
9. Figma Plugin: https://www.figma.com/community/plugin/789009980664807964/tinyimage-compressor

Get Karma Working For You

Schedule a call with The Karma Group at 920-227-1100 or e-mail Lynn.Douville@thekarmagroup.com and discover how we can help you achieve your marketing goals.