AVIF is here & ready to use.

Shared by
Published
Updated
Find your next web developer job
Drupal Web Developer at On Fire Media (San Antonio, TX)

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

Did you find AVIF is here & ready to use. useful? Get articles in your inbox.

…and don’t worry, I hate spam as much as you. Expect to hear from me at most once a week.

Share on facebook
Share on twitter
Share on linkedin
Share on reddit
Share on facebook

Stay updated.

Get a weekly email with the latest trends in web development & SEO.

Write a guest post.

Have an interesting article or idea? Become a guest blogger & pitch me your concept today.

Join the conversation.

Your email address will not be published. Required fields are marked *

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.