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 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, 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

Accessibility in your inbox

I send an accessibility-centric newsletter on the last day of every month, containing:

  • A roundup of the articles I’ve posted
  • A hot pick from my archives
  • Some interesting posts from around the web

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. Images as the first thing in a button or link

    If the text of an interactive element like a button or link is preceded with an accessible image, we’ve probably got an accessibility problem.

  2. Alt text for CSS generated content

    There’s an interesting feature in Safari 17.4 that allows content added with CSS to have ‘alt’ text. I’m not sure how I feel about this.