Optimizing your Images for the Web using JPEG, WEBP and AVIF in 2021 (featuring ImageMagick)

5 min readMar 24, 2021

A few years ago, WebP was created by Google, delivering images 30% smaller than JPG, keeping the same image quality. Now, AVIF promises images 50% smaller than JPG while still keeping the same image quality.

We’ll compare different settings when converting out files and find out how to serve them on our site for maximum compatibility.

File size comparison of different formats

JPEG

The universal image format that’s used by 90% of the web and probably your whole image library. It’s proven to be reliable and compatible but there are always a some tricks you can use to reduce file sizes.

ImageMagick

One of the tools we’ll need for JPEG and WEBM is ImageMagick.

Download ImageMagick
https://imagemagick.org/script/download.php
During the installation setup, also select “Install legacy utilities” and “Add to system path”

3. Verify that the installation is successful by launching CMD/Powershell and typing:

magick --version

Optimize JPEG

Create a new batch file (.bat) in the directory of your images.
Backup the originals because this will overwrite them.
Edit it and paste the following

magick mogrify -format jpeg -sampling-factor 4:2:0 -strip -quality 80 -interlace JPEG -colorspace sRGB *.jpeg *.jpg
PAUSE

3. Additional notes:

"-quality X" recommended values are between 60 and 80 for web and 80 to 98 for archival purposes.

4. Save the file and run it. It will optimize any .jpg image from your directory.

WebP

WebP lossless images are 26% smaller in size compared to PNGs while lossy images are 25–34% smaller than comparable JPEG images at equivalent SSIM quality index. (source: Google)

Convert to WebP

Make sure you have set up ImageMagick from the JPEG section above.

Create a new batch file (.bat) in the directory of your images.
Make sure to backup them first just in case.
Edit it and paste the following
For lossless compression:

magick mogrify -format webp -quality 50 -define webp:lossless=true *.jpg *.png
PAUSE

For lossy compression (recommended):

magick mogrify -format webp -quality 82 *.jpg *.png
PAUSE

3. Save the file and run it. It will convert any .jpg or .png image from your directory to .webp

AVIF

AVIF is an image file format developed by Alliance for Open Media.
It supports HDR, transparency and wide color gamut.
It provides the highest lossless and lossy compression possible.
It was created in a royalty-free format, which will speed up all the adoptions, as developers won’t have to deal with legal or financial barriers.
It’s backed by Amazon, Google, Apple, Intel, Samsung and Netflix.
The first images in AVIF format were published in February 2018 by Netflix, and since then more applications and companies have been adding support for it, albeit rather slowly.

Convert to AVIF

Download the latest release of AOMediaCodec libavif
https://github.com/AOMediaCodec/libavif/releases
For image encoding we’ll need avifenc.exe
Put avifenc.exe in the same directory as your images. It’s recommended that you backup them first.
Create a new batch (.bat) file in the same directory.
Edit it and paste the following code:

for %%f IN (*.png, *.jpg, *.bmp, *.jpeg) do (avifenc.exe -j 2 -d 10 -y 422 --min 24 --max 24 --minalpha 24 --maxalpha 24 "%%f" "%%~nf.avif")
PAUSE

6. Additional notes:

If you’d like to speed up the conversion process, set "-j 2" to "-j X", where X is the number of processor thread/cores you have available.
Example "-j 4" is for 4 cores/threads. My Ryzen 3600 CPU has 12 threads so it’ll be "-j 12"
--min; --max; --minalpha and --maxalpha tune the compression level and are in the range of 0–63 with 0 being highest quality and 63 being lowest quality. I use 24 as it provides a good balance.There's an optional "-s X" parameter you can add where X is the encoding speed. The lower the speed, the better the quality. Default value is 6. 4 is the point where no do visible improvements can be seen. Add "-s 4" to the parameters list in the .bat file if you'd like to try it out.

7. Save the file and run it. It will convert any .jpg/.png/.bmp/.jpeg image from your directory to .avif

Results:

Keep in mind that the file size reduction and final quality is different for every source image. The effectiveness of each format also varies depending on the dimensions of the images.
You can read a more detailed article on Industrial Empathy

BigBuckBunny:
.png (original) = 4650kb
.jpg (100% quality) = 2246kb
.jpg (80% quality) = 355kb
.jpg (optimized) = 345kb
.webm (lossless) = 2246kb
.webm (80% quality) = 287kb
.avif (q=24) = 217kb

A collection of 1000 random images:
.jpg (originals) = 261 mb
.jpg (optimized) = 107 mb (59%reduction, 59% total)
.webm (80% quality) = 71.4 mb (additional 33% reduction, 72% total)
.avif (q=24) = 53.6 mb (additional 25% reduction, 79.4% total)
The final result is an almost indistinguishable visual difference between all the files.

Implementation and compatibility

It’s easy to implement all these formats in our page using the <picture> html element. It’ll try to load .avif first and then fall back to the next source in case the browser doesn’t support it.

<picture>
  <source srcSet="BigBuchBunny.avif" type="image/avif" />
  <source srcSet="BigBuchBunny.webp" type="image/webp" />
  <source srcSet="BigBuchBunny.jpg" type="image/jpeg" />
  <img src="BigBuchBunny.jpg" alt="This is a big bunny">
</picture>

For WebP Browser compatibility check:
https://caniuse.com/webp

For AVIF Browser compatibility check:
https://caniuse.com/avif

Conclusion

When tuned, JPEG can provide great size saving for little quality loss. It’s universally compatible with all browsers and devices. Webp and Avif can provide even greater size reduction for the same or better quality however we need to keep in mind that not all browser and clients support them. Additionally they require greater processing power for encoding and decoding and need to be kept alongside their jpeg version for compatibility reason which results in greater storage space being used.

Despite this, they can provide great bandwidth reduction and are the right step in the growing world of online media consumption.