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.
In this article, you will learn about some browser-based tools and command line tools for creating AVIF images.
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:
See also: Addy Osmani at Smashing Magazine goes in-depth on using AVIF and WebP.
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.
AVIF.io is an image tool that doesn’t require any form of code. All you need to do is upload your selected images in PNG, JPG, GIF, etc. and it would return compressed versions of them.
You can find answers to your questions on the AVIF.io FAQ page.
avif-cli
avif-cli
by lovell lets you take AVIF images 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:
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 folderYou can find out about more commands via the avif-cli GitHub page.
sharp (also maintained by lovell) 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:
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!
sharp
See also: Stanley Ulili’s article on How To Process Images in Node.js With Sharp.
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. You should get the newsletter.
This is the 3rd post in a small series we are doing on form accessibility.…
This is going to be the 2nd post in a small series we are doing…
Hey all you wonderful developers out there! In this post we are going to explore…
Hey all you wonderful developers out there! In this post, I am going to take…
These things called passkeys sure are making the rounds these days. They were a main attraction at W3C…
I spend a lot of time in DevTools, and I’m sure you do too. Sometimes…