Key features you need to know
- Waaaay better compression than JPEG and WEBP (Google’s 10+ years old codec)
- Royalty-free -> anyone can use, implement, redistribute without paying any fee -> more adoption
- High browser adoption (~74% according to caniuse)
- Support for alpha channel and animation (Chrome 91+ only at the time of writing), replacing +35 years old GIF format and WEBP
Getting the binaries
My favorite and also the recommended method is to get the pre-build binaries directly from the source-code repository (or the official website):
There are also some other options, so you can choose the one that suits you best:
- Build everything using media-autobuild_suite.
- Download pre-built binaries of
- Build ffmpeg and (libavif)[https://github.com/AOMediaCodec/libavif] from source.
Adding to PATH
- Windows Search
-> Search for
Edit the system environment variables
User variables for <your_username>)
-> Paste the path to the folder containing the binaries
- Everything can be done using
libavifhas some more optimized default values that I don’t want to bother with.
ffmpegsupports all kinds of input formats,
libavifonly support jpeg, png and y4m. If you want to encode a video with
ffmpegto “decompress” to y4m first.
- The terminal commands are written in PowerShell. For Command Prompt, replace the backtick (`) with the caret (^).
CHROMA_SUBSAMPLING: 444 for high-resolution images, else 420.
BIT_DEPTH: 8, 10 or 12. Recommended using 10 even for 8-bit images. 12-bit is overkill for 99.99% of general use cases.
CQ_LEVEL: lower the value, higher the quality. Recommended range: 18-26. I typically use 18.
- libaom ffmpeg options
- avif.io - AVIF online encoder, tons of useful posts if you want to learn more about AVIF.
- Using AVIF to compress images on your site - web.dev