AVIF is here & ready to use.

Shared by
Published
Updated

AVIF image formats can give me a big boost in site performance, typically reducing image file sizes in half — and they can be used now.

tl;dr

Start using next-gen .avif images today progressively with the picture element. The format is ~50% smaller in size compared to JPEG, and ~20% smaller than WebP.

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

Learn more about AVIF image formats and how much they can reduce normal image sizes on Jake Archibald’s AVIF has landed post.

How to Create AVIF Files

Squoosh is an image compression web app that allows you to dive into the advanced options provided by various image compressors.

The Google Chrome Labs team recently added AVIF support to the amazing Squoosh web app. In my opinion, this is the best option for converting and creating .avif files.

If you are comfortable in the command line, you can use the official AOMedia library, libavif, to encode/decode AVIF files. Also, if you’re a macOS user with Homebrew, you can quickly install a pre-built version using brew install joedrago/repo/avifenc, and avifenc --help for syntax and options.

Learn more about AVIF

2 comments on “AVIF is here & ready to use.”.

# Oct 20, 2020

Since the format is so new, most servers do not support it yet. To help developers integrate AVIF conversion in their systems, we have launched a free conversion service:
https://happycoding.ch/en/blog/avif-conversion-service-has-landed

Hope it helps!

# Dec 15, 2020

Thanks for the resource!

Join the conversation.

Your email address will not be published.

All comments posted on 'AVIF is here & ready to use.' are held for moderation and only published when on topic and not rude. Get a gold star if you actually read & follow these rules.

You may write comments in Markdown. This is the best way to post any code, inline like `<div>this</div>` or multiline blocks within triple backtick fences (```) with double new lines before and after.

Want to tell me something privately, like pointing out a typo or stuff like that? Contact Me.