Useful Tools for Creating AVIF Images

AVIF Conversion Tools for Modern Image Workflows

AVIF (AV1 Image File Format) is a modern image specification that delivers substantial file-size reductions compared to traditional formats. Version 1.0.0 of the specification was finalized in February 2019 by the Alliance for Open Media. In practice, AVIF can save roughly 50% of file size compared to JPG and about 20% compared to WebP while maintaining visual quality.

The format supports both lossless and lossy compression, multiple color spaces, and 8-, 10-, or 12-bit color depth. It also avoids the banding artifacts common in JPEG and the blockiness still visible in WebP. However, compression levels need careful tuning: if an image looks noticeably degraded in the context of a page, the compression level is too aggressive. Conversely, losing detail is acceptable as long as that detail isn't significant to the image's purpose on the page.

Browser-Based Converters

For quick conversions without touching a terminal, several free browser tools work well.

Squoosh

Squoosh is a widely used image compression web app that supports converting images into AVIF and other compressed formats. It's free to use, accepts files up to 4MB, and provides optimization settings on the right-hand panel. The download controls show the resulting file size and the percentage reduction from the original image.

Cloudinary

Cloudinary's free image-to-AVIF converter is a code-free option for converting PNG, JPG, GIF, and other uploads into compressed AVIF files. There is no stated file size limit, and the service is free. Beyond conversion, Cloudinary's API offers additional image capabilities such as enhancement and AI-generated content filling.

Command-Line Tools

For batch conversions or integration into build pipelines, command-line tools offer more control and automation.

avif-cli

avif-cli converts images (PNG, JPEG, etc.) stored in a folder to AVIF at your specified quality and speed settings. It requires Node.js 12.13.0 or later.

Install the package globally:

npm install avif

Then run the conversion command:

npx avif --input="./imgs/*" --output="./output/" --verbose

In the command above, ./imgs/* represents the location of all your image files, and ./output/ is where the converted files will be written. The tool is free to use, and you can control the speed of conversion. Additional options are documented on the avif-cli GitHub page.

sharp

sharp is a more versatile Node.js library for image processing. Beyond AVIF conversion, it can rotate, blur, resize, crop, and scale images. It requires Node.js 12.13.0 or later and is free to use.

Install it as a dependency:

npm install sharp

Create a JavaScript file named sharp-example.js with the following code:

const sharp = require('sharp')

const convertToAVIF = () => {
    sharp('path_to_image')
    .toFormat('avif', {palette: true})
    .toFile(__dirname + 'path_to_output_image')
}

convertToAVIF()

Replace path_to_image with the full path to your source image, including its name and extension:

./imgs/example.jpg

And replace path_to_output_image with the destination path and the new .avif extension:

/sharp-compressed/compressed-example.avif

Finally, run the script:

node sharp-example.js

After execution, you'll have a compressed AVIF file in your specified output location.

Choosing the Right Tool

AVIF is worth evaluating for front-end projects, and these tools make it straightforward to convert existing JPEG and PNG assets. Browser-based tools like Squoosh and Cloudinary are ideal for occasional, manual conversions. For repeated workflows or batch processing, avif-cli or sharp integrate cleanly into Node.js-based build systems. As with any new tool, assess the benefits and trade-offs against your specific use case before committing to the format.