Skip to main content

Converting images to AVIF in 2021

Posted in Development and Performance

I’ve covered how great AVIF image compression is, but the big downside (for now, anyway) is that it isn’t offered as an export option in any of the image software I use.

A quick search reveals GIMP can export as AVIF and there’s a Figma plugin, but I can’t find much else.

I found a web tool called avif.io that converts images to AVIF via a file uploader. It does it all locally using your browser too, rather than crunching the images on their server, which is neat. But it’s a simple in/out tool so you don’t get any control over the export quality and file size.

The method I’m using to convert my PNGs and JPEGs to AVIF is a command line tool called ImageMagick, which I have installed via Homebrew. Like avif.io, it’s not as slick as it would be using an app’s visual export functionality, but it’s fine for now; especially as I’ve decided to use my already-exported JPG or PNG as the base for the AVIF export.

Converting a single image

Converting single images is what I’ll be doing most often, as:

  • I use images pretty sparingly in my blog posts
  • When I do use an image, there’s usually only one

ImageMagick is pretty straightforward for single images:

convert my-great-image.png my-great-image.avif

I’ve use the ImageMagick convert command, followed by the name of the the image to convert (including its extension), then the name of the new image. The .avif file extension is what tells ImageMagick the export format.

Running that command assumes we’re in the same directory/folder as the PNG (or JPG) we’re using as our base; it also creates the new image in the same directory, which is probably what we’re after. You can specify the ‘from’ and/or ‘to’ image directories if you prefer:

convert src/img/my-great-image.png src/img/my-great-image.avif

Note: you can also use the magick command, but convert feels better as it’s more of an action; also, I sometimes misspell ‘magick’!

Converting a bunch of images at once

When I added AVIF images to my website, I had a lot of older images to convert, especially for my case studies, which tend to use image more than blog posts. I wanted to create AVIF images from all of the PNGs in a folder, but I didn’t want to have to run a command on each of them. Here’s how I converted a batch of images to AVIF:

for image in *.png ; do convert "$image" "${image%.*}.avif" ; done

This looks for all of the PNGs in a directory and creates an AVIF file based on each, with the same file name, save for the .avif file extension.

Again, I had navigated to the directory that contained the files I wanted to convert, but I could equally have specified the full path if I hadn’t been:

for image in src/img/*.png ; do convert "$image" "${image%.*}.avif" ; done

Subscribe

If you enjoyed reading this and want a monthly roundup of my articles delivered to your inbox, just enter your email below.

I don’t collect any data on when, where or if people open the emails I send them. Your email will only be used to send you newsletters and will never be passed on. You can unsubscribe at any time.

More posts

Here are a couple more posts for you to enjoy. If that’s not enough, have a look at the full list.

  1. WWDC 2021 roundup

    Just like last year, I’ve written a list of the announcements that stood out at this year’s World Wide Developer Conference (WWDC).

  2. The trouble with back links

    You’d think that adding a back link to a web page would be straightforward. Well, it turn out that it’s not! Let’s have a look at three ways to do it.