AVIF (AV1 Image File Format) is a modern image file format specification for storing images that offer a much more significant file reduction when compared to other formats like JPG, JPEG, PNG, and WebP. Version 1.0.0 of the AVIF specification was finalized in February 2019 and released by Alliance for Open Media to the public.
You save 50% of your file size when compared to JPG and 20% compared to WebP while still maintaining the image quality.
In this article, you will learn about some browser-based tools and command-line tools for creating AVIF images.
Why use AVIF over JPGs, PNGS, WebP, and GIF?
Lossless compression and lossy compression
JPEG suffers from awful banding
WebP is much better, but there’s still noticeable blockiness compared to the AVIF
Multiple color space
8, 10, 12-bit color depth
Caveats
Jake Archibald, wrote an article a few years back on this new image format and also helped us to identify some disadvantages to compressing images, normally you should look out for these two when compressing to AVIF:
If a user looks at the image in the context of the page, and it strikes them as ugly due to compression, then that level of compression is not acceptable. But, one tiny notch above that boundary is fine.
It’s okay for the image to lose noticeable detail compared to the original unless that detail is significant to the context of the image.
See also: Addy Osmani at Smashing Magazine goes in-depth on using AVIF and WebP.
Browser Solutions
Squoosh
Screenshot of Squoosh.
Squoosh is a popular image compression web app that allows you to convert images in numerous formats to other widely used compressed formats, including AVIF.
Features
File-size limit: 4MB
Image optimization settings (located on the right side)
Download controls – this includes seeing the size of the resulting file and the percentage reduction from the original image
Free to use
Cloudinary
Cloudinary’s free image-to-AVIF converter is another image tool that doesn’t require any form of code. All you need to do is upload your selected images (PNG, JPG, GIF, etc.) and it returns compressed versions of them. Its API even has more features besides creating AVIF images like its image enhancement and artificially generating filling for images.
I’m pretty sure you’re here because you’re looking for a free and fast converter. So, the browser solution should do.
Features
No stated file size limit
Free to use
You can find answers to common questions in the Cloudinary AVIF converter FAQ.
Command Line Solutions
avif-cli
avif-cli by lovell lets you take your images (PNG, JPEG, etc.) stored in a folder and converts them to AVIF images of your specified reduction size.
Here are the requirements and what you need to do:
Node.js 12.13.0+
Install the package:
npm install avif
Run the command in your terminal:
npx avif –input=”./imgs/*” –output=”./output/” –verbose
./imgs/* – represents the location of all your image files
./output/ – represents the location of your output folder
Features
Free to use
Speed of conversion can be set
You can find out about more commands via the avif-cli GitHub page.
sharp
sharp is another useful tool for converting large images in common formats to smaller, web-friendly AVIF images.
Here are the requirements and what you need to do:
Node.js 12.13.0+
Install the package:
npm install sharp
Create a JavaScript file named sharp-example.js and copy this code:
const sharp = require(‘sharp’)
const convertToAVIF = () => {
sharp(‘path_to_image’)
.toFormat(‘avif’, {palette: true})
.toFile(__dirname + ‘path_to_output_image’)
}
convertToAVIF()
Where path_to_image represents the path to your image with its name and extension, i.e.:
./imgs/example.jpg
And path_to_output_image represents the path you want your image to be stored with its name and new extension, i.e.:
/sharp-compressed/compressed-example.avif
Run the command in your terminal:
node sharp-example.js
And there! You should have a compressed AVIF file in your output location!
Features
Free to use
Images can be rotated, blurred, resized, cropped, scaled, and more using sharp
See also: Stanley Ulili’s article on How To Process Images in Node.js With Sharp.
Conclusion
AVIF is a technology that front-end developers should consider for their projects. These tools allow you to convert your existing JPEG and PNG images to AVIF format. But as with adopting any new tool in your workflow, the benefits and downsides will need to be properly evaluated in accordance with your particular use case.
I hope you enjoyed reading this article as much as I enjoyed writing it. Thank you so much for your time and I hope you have a great day ahead!
Useful Tools for Creating AVIF Images originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.
