Revisiting Images For The Web

• April 01 2024
• 12 min. read

It's been a while since I've looked at image formats supported on web browsers. The last time I did, AVIF had recently been introduced and Apple had announced support for WebP in Safari and operating systems.

At the time we also had Squoosh as a command line application that could be incorporated directly into Gulp build systems.

The baseline for this post is a series of posts I wrote in 2020: Revisiting Image Formats for the Web and Image Formats for the Web: HEIC and AVIF

But times change.

Squoosh CLI is no longer maintained by the Chrome team due to people leaving the team and fewer people to do the work.

AVIF is now supported in all major browsers

WebP is now fully supported in all browsers

JpegXL has partial support. Only Safari and Firefox (behind a flag) support the image format.

Chromium removed support for the format citing lack of support in other browsers. They haven't restored it and I'm dubious that they will with AVIF and WebP available.

I also considered HEIF, based on HEVC, but it is only supported in Safari so, at this time, I will skip it as a supported format.

To me, these evolutions present these questions:

1. What should we replace Squoosh with?
2. Which of the modern formats (AVIF and WebP) should we use?
3. Should we even bother with JPEG-XL?
4. Should we still provide a JPG or PNG backup?

What should we replace Squoosh with? #

Since we no longer have access to Squoosh's CLI we have to figure out what to replace it with.

ImageMagick provides a variety of tools that we will use in these tests:

• Resize the TIFF original to a common size
• Convert the resized TIFF file to the appropriate format
• SSIM and DSSIM comparisons between images

It is a command line available in macOS, Linux and Windows (through WSL).

The scripts in this post are written in macOS (Ventura 13.6.5) and run in Bash 5.2.26 installed via Homebrew.

The scripts on this page should run on Linux and WSL using the same or later versions of Bash.

Evaluating formats #

I will use the same set of test images that I used four years ago.

The process is as follows:

1. For each image, resize it to 800px x 800px
2. Convert the image to each target format (JpegXL, WebP, AVIF, PNG and JPG)
3. Compare each image with the original using SSIM

The Basic Commands #

The first thing to do is to resize the image to a common format so SSIM will work when doing the comparison.

Since we want to preserve the aspect ratio for the image, the size may not remain 800x800 but all images will be the same size.

convert original.tif -resize 800x800 original-resized.tif

The other essential command will convert the TIFF image to a different format. Without any customizations, the command looks like this.

convert original-resized.tif original-converted.{format}

Using Source-Images/emporium_hi_res.tif as the source images, the conversion commands would look like this when run from the root of the project directory:

convert Source-Images/emporium_hi_res.tif emporium_hi_res.jxl
convert Source-Images/emporium_hi_res.tif emporium_hi_res.avif
convert Source-Images/emporium_hi_res.tif emporium_hi_res.webp
convert Source-Images/emporium_hi_res.tif emporium_hi_res.png
convert Source-Images/emporium_hi_res.tif emporium_hi_res.jpg

Automating The Process: All Default Values #

Rather than type the values manually every time we want to run the tests, I've written a Bash shell script to automate the process.

It takes the full path to the image we want to convert as its parameter.

The script does the following:

1. Creates an array of the formats that we want to work with
2. Capture the first argument into a variable
3. Removes the file extension
4. Resizes the image and renames it using the file name from step 3 and appends the string -resized.tif
5. Loops through the formats array and converts the resized file into the corresponding format

#! /usr/bin/env bash

# 1
formats=(jxl webp avif png jpg)

# 2
source=$1

# 3
intermediate="$(b=${source##*/}; echo ${b%.*})"

# 4
echo "Resizing image"
convert $source -resize 800x800  $intermediate-resized.tif

echo "Starting conversion"

# 5. Loops through the formats
for format in ${formats[@]}
do
  echo "Converting to $format"
  # Run the imagemagick conversion command
  convert $intermediate-resized.tif $intermediate.$format
done

Making It Executable #

Before we can run the script we need to make it executable, able to run from the command line.

In a terminal go to the directory where you stored the script and run the following command

chmod +x convert-image.sh

Then you run the script passing the source image as the parameter

./convert-image.sh image-source/image.tif

First Round of Testing #

This first round of testing is done with high-quality TIFF source images. I am less interested in the purity of the test and more in the format that produces the smallest file size.

All the conversions use their default settings. We'll address this in the following sections.

I've chosen not to link to the images to play nice with mobile users.

Automating The Process (2): Tweaks For Flexibility #

In the cases tested, AVIF produced a smaller file size than any of the other formats tested. What happens if we move on to a more common scenario where we don't get to dictate the format of the source images we want to convert?

Another issue is the image quality for each format. We used default settings for all of them and that may not produce optimal results. Furthermore, values are not the same for all formats so we'll have to do further testing to see which value is better for each format.

For this test, we did not resize the image. They will all be the same size as the original and that will inflate the file sizes.

The source for unsplash05 is a JPG file so I'm wondering if there will be a difference in the sizes due to the original's format.

Because different projects have different requirements, you should always evaluate formats and quality settings against your target population, some of which may still be on metered mobile plans.

Adding SSIM comparison #

As an optional component, I've added Structural Similarity Index Measure (SSIM) comparisons to the result.

SSIM calculates the Structural Similarity Index between 2 given images using values between 0 and 1 with these values representing different levels of similarity between the images.

SSIM = 1

This is the maximum value SSIM can attain, indicating that the two images being compared are identical, at least in terms of the elements SSIM uses to compare them.

0 < SSIM < 1

Values greater than 0 but less than 1 indicate varying degrees of similarity. The closer the value is to 1, the more similar the two images are.

SSIM = 0

This would theoretically represent no correlation between the images.

However, in practice, SSIM values are rarely, if ever, zero or negative. Very low SSIM values close to 0 would indicate that the images have very little in common, at least from the SSIM perspective.

Depending on the type of image and the quality you select, the values can vary greatly, making your selection easier.

In this example using the unsplash05 image as the source, we get very similar results so the quality and file size become my guiding factors.

Caveats and Conclusions #

These images are provided as examples. These and other images are stored in the companion GitHub repo so you can test with them. You can also run the script against your site's images.

In my testing, AVIF consistently produced the smallest file sizes across quality. As usual, your mileage may vary.

Even though it's not absolutely necessary, you should always consider using the picture element with a PNG or JPG fallback, something like this

<picture>
  <source srcset="photo.avif" type="image/avif" />
  <source srcset="photo.webp" type="image/webp" />
  <img src="photo.png" alt="photo" />
</picture>

Like when working with video video or audio elements, the browser will load the first supported format, so order does matter.

Note the use of the srcset attribute. This is required when source is the child of a picture element. This is different than working with video or audio elements where the src attribute is required.

These examples don't account for retina (high DPI) displays. Look at the picture article referenced above for more information.

I still need to finetune how the quality settings go since the same value can mean different things based on formats. There is little documentation regarding passing quality settings between ImageMagick to the underlying delegate for that format.

This project relies on a third-party tool and how it's configured. Package managers may not offer the configuration that you need to run these experiments.

If your package manager doesn't offer the configuration that you want then an option may be to install ImageMagick and all related libraries from source code. Basic installation instructions are explained in Install from Source. Note that this requires additional installations and it's not recommended for people who are not familiar with manual software compilation and installation.

• Images,
• Tools

Edit on Github