UI Drafter Blog

Convert to AVIF Programmatically

October 2, 2020
Eric Fortis
January 10, 2021 (Updated)

This shell script converts JPG and PNG images into AVIF and WebP using Joe Drago's avifenc and Google's WebP encoder.

For AVIF, it uses a compression of min = 25 and max = 35, which works well for UI Drafter's screenshots (images with text and sharp edges). Besides smaller file sizes, they make optically better images than cwebp. No artifacts, sharper, and more accurate colors.

jpg 132 kB
webp 29 kB
avif 22 kB
#!/bin/sh
set -o noglob
IFS=$'\n'

images=$(find ~/imgs -type f -name *.jpg -o -name *.png)

for img in $images; do
  avif_out=$img.avif
  webp_out=$img.webp

  if [ ! -f $avif_out ]; then
    avifenc --speed 0 --min 25 --max 35 $img $avif_out
  fi

  if [ ! -f $webp_out ]; then
    cwebp $img -o $webp_out
  fi
done

January 10, 2021 update

Using avifenc instead of colorist, as suggested by the author of both tools.

In macOS®, brew install joedrago/repo/avifenc