Featured image of post Blog update : Moving jpg to avif using ImageMagick

Blog update : Moving jpg to avif using ImageMagick

Convert your jpg or png file to avif using ImageMagick and save on image size

Changes to my blog

I always love to optimize my blog and the components of my blog to be inline with the latest web standards. After using Google PageSpeedInsights to check my blog, I found that my blog had room for improvements, and that images use a lot of space. I decided to convert my images to avif format, which is a lossless format that is supported by all modern browsers. In order to convert my images to avif, I used ImageMagick. I’ve been using ImageMagick for a while now, and I’ve been using it for converting my images to webp firstly, and now I’m trying to convert my jpg or png files to avif. Before the time of ChatGPT or LLM’s you can make use of ImageMagick to create images using code.

Converting my images to avif using ImageMagick

The first thing you need to do is install ImageMagick. You can find the download link here. I’ve downloaded the portable version, and added it to my tools folder for easy access. The process is as follows, whenever a new image is added to my blog folder, I run the following command in the terminal:

magick convert input.png -quality 50% output.avif
The -quality 50% is used to set the quality of the image, and the output.avif is the name of the file that will be created.

Automating my process in Visual Studio Code

I make use of a visual studio extension called FileWatcher, which allows me to run commands whenever a file is changed. I’ve added the following command to my settings.json file:

"filewatcher.commands": [
  {
    "match": "\\.(jpg|png)$",
    "isAsync": true,
    "cmd": "${workspaceRoot}\\blog\\tools\\ImageMagick-7.1.1-32-portable-Q16-x64\\magick.exe ${file} -quality 90% ${fileDirname}\\${fileBasenameNoExt}.avif",
    "event": "onFileCreate"
  }		
]

In Visual Studio Code File Watcher Output Console I can see the following :

Visual Studio Code FIle Watcher Output console showing results of file conversion

Conclusion

I hope this helps you to convert your images to avif using ImageMagick. To find out more about Tasks in Visual Studio Code you can visit this link. I’ve also found this article on Medium which helped me to understand how to convert my images to avif.

Arrggg

It seems my theme don’t support this formats yet.. I’ll have to wait unitl it does, or I can make use of the Hugo Shortcode to create images.

 <figure><img src="/blog-update-moving-jpg-to-avif-using-imagemagick/visual_studio_code_file_watcher_output_console.avif">
 </figure>

Additional References

Google : Serve images in modern formats
More information can be found at https://developer.chrome.com/docs/lighthouse/performance/uses-webp-images/?utm_source=lighthouse&utm_medium=lr
Built with Hugo
Theme Stack designed by Jimmy