Compressing images for the web

05-04-2026

I wanted to make a little gallery of some of my favourite fursona art, and although that worked OK, I needed to shrink my image sizes down. Simply resizing yields some results, with 1 MiB for 50%, and 188.6 KiB for 20% (as expected), but we could go further!

For this, I've used an image drawn by Daud_Dalmata, which originally looked like the following:

One possible alternative is re-generate the image with 16 colours (and no dithering - we'll get to that), which yields slightly better results, at the expense of image quality, and very "sharp" edges between colours

magick daud.png +dither -colors 16 -resize 20% daud_rd16.png

This is fine, but PNGs are not great for that sort of thing - the compression algorithm doesn't lend itself too well to that. So what if we use GIFs instead? This time, with 256 colours! This gives us a 56 KiB image. With 16 colours, that's 54.3 KiB, but we suffer from the same issues as the PNG!

magick daud.png +dither -colors 16 -resize 20% daud_rd16.gif

We can fix that by applying some dithering, which blends pixels together to make the transition smoother. Our dithering algorithms of choice for now is Riemersma, but there are other algorithms available. The image size increases slightly, to 58.5 KiB, but the image quality is much better!

magick daud.png -dither Riemersma -colors 16 -resize 20% daud_rd16.gif

But GIFs are still not the most efficient file format, for that, we can look into WEBP. What if we try resizing our original PNG, with lossless WEBP compression? This gives us a 136.5 KiB file size (down from 188.6 KiB) with literally no visual difference.

magick daud.png -resize 20% -quality 100 daud_r_lossless.webp

If we allow a lossy algorithm, however, like say 95% quality, we get a much smaller image, at 32.3 KiB (since we got lots of white pixels, it compresses rather well), with a "tolerable" loss in image quality:

magick daud.png -resize 20% -quality 95 daud_r_95.webp

If we go even further, by using the default 75% quality, we get a 16.6 KiB image. The image quality, however, is noticeably worse and you start getting compression artifacts:

magick daud.png -resize 20% daud_r.webp

If 16.6 KiB, which would load in 3 seconds on a 56 kbps dial-up connection (remember, a kibibyte is roughly equal to 8 kilobits) is still not enough, we can go further by reducing the colour count, and applying Riemersma ditehring to get a decent-ish image quality for only 12.2 KiB:

magick daud.png -dither Riemersma -colors 16 -resize 20% daud_rd16_rie.webp

But what about AVIF? If we use a lossless algorithm, we get 183.2 KiB, so if we want to display the "original" image, WEBP seems like the best choice in this particular case. But usually, AVIF offers slightly better colour depth and compression. As for support? Both are roughly equal - WEBP is supported by 96.96% of browsers, while AVIF is supported by 96.19%.

JPEGXL is meant to be better than both WEBP and AVIF, but in this case, it resulted in a 118.3 KB file, just under 20 KiB saved compared to WEBP. Sadly, it is only supported by 14.74% of browsers, making it borderline unusable in 2026.

If you want to save as much space as humanly possible, dithering and a smaller colourspace is the way to go, but image fidelity suffers immensely. Otherwise, WEBP/AVIF seems like the practical choice, with JPEGXL proving to be decent if you don't have to account for browser support.