AVIF (AV1 Image File Format) is a modern image file format specification used to store images and it can significantly reduce file size compared to other formats such as JPG, JPEG, PNG, and WebP. AVIF Specification Version 1.0.0 was finalized in February 2019 and released by the Open Media Alliance.

It saves 50% file size compared to JPG, and 20% file size compared to WebP while maintaining image quality.

This article will introduce some browser-based tools and command-line tools for creating AVIF images.

Why choose AVIF instead of JPG, PNG, WebP and GIF? : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : However, it is OK to be slightly above this limit.

It is acceptable to lose obvious details in the image compared to the original image, unless the detail is important to the context of the image.
• See also: Addy Osmani dives into using AVIF and WebP on Smashing Magazine.
Browser Solutions
Squoosh

Squoosh is a popular image compression web application that allows you to convert images in multiple formats to other widely used compression formats, including AVIF.

Features

1. File Size Limit: 4MB
2. Image Optimization Settings (located to the right) Download Controls - This includes viewing the size of the result file and the percentage reduction compared to the original image

Cloudinary's free image to AVIF converter is another image tool that does not require any code. You just upload the selected image (PNG, JPG, GIF, etc.) and it will return to the compressed version. In addition to creating AVIF images, its API also has more features such as image enhancement and manual image filling.

I believe you are here because you are looking for a free and fast converter. Therefore, the browser solution should be sufficient.

• Free use
You can find answers to the FAQ in the Cloudinary AVIF Converter FAQ.
Command line solution
avif-cli

lovelll's avif-cli allows you to take images stored in folders (PNG, JPEG, etc.) and convert them into AVIF images of specified reduced size.

The following are requirements and what you need to do:

Install the package:

<code>npm install avif</code>

Run the command in your terminal:

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

• ./imgs/* – Indicates the location of all image files
• ./output/ – Indicates the location of the output folder

Features

• Can set the conversion speed

You can learn more about the commands through the avif-cli GitHub page.

sharp

sharp is another useful tool for converting large images in common formats into smaller, more network-friendly AVIF images.

The following are the requirements and what you need to do:

• Node.js 12.13.0

Installing the software package:

<code>npm install sharp</code>

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 of the image, its name and extension, for example:

<code>./imgs/example.jpg</code>

and path_to_output_image means the path you want the image to be stored and its name and new extension, for example:

<code>/sharp-compressed/compressed-example.avif</code>

Run the command in your terminal:

<code>node sharp-example.js</code>

That's it! You should have a compressed AVIF file in the output location!

Features

• Free use
• Use sharp to rotate, blur, resize, crop, zoom images, etc.

See also: Stanley Ulili's article on how to process images in Node.js using Sharp.

Conclusion

AVIF is a technology that front-end developers should consider using in their projects. These tools allow you to convert existing JPEG and PNG images to AVIF format. However, like adopting any new tool in your workflow, it is necessary to correctly evaluate its advantages and disadvantages based on your specific use case.

I hope you enjoy reading this article as much as I do. Thank you very much for your time and wish you a great day!

The above is the detailed content of Useful Tools for Creating AVIF Images. For more information, please follow other related articles on the PHP Chinese website!