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.