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
- Comparing AVIF vs. WebP file sizes at the sam DSSIM
- How to Use AVIF: The Next-Gen Image Compression Format
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!
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.