glitchy's

blog

Image crunching

2023-09-25 | artgenerative


One of the most satisfying things for me when making websites is optimising the images. I used to pay for tinypng so it would bulk compress images for me, but I'd rather do it myself and don't like potentially giving my data away.

Thankfully, PNGCRUSH exists, which lets you bulk optimise images locally:

pngcrush -dir ./output -reduce -brute ./input/*.png

But that's not enough for me, I don't just want lossless optimisation, I want smaller images with worse graphics and limited palettes.

Let's start with that first part, smaller images. There are many ways to make images smaller, and that involves scaling them down with interpolation algorithms:

rabbit downsized to 128p with bicubic interpolation
Bicubic
87.2kb
rabbit downsized to 128p with nearest-neighbour sampling
Nearest neighbour
62.4kb
rabbit downsized to 256p with bicubic interpolation then to 128p with nearest-neighbour sampling
Mixed
87.9kb

And if you want to go further from here, there's tools in Krita and Photoshop to limit the palette, which can be somewhat useful, but it's a lot of work to get right and doesn't necessarily result in the most efficient files.

So I've got some wonderful news for everyone, there's a better way of doing this:

Image Worsener

This tool lets you rescale and resample images, apply limited palettes, dither, plus a bunch more all in one!

rabbit with 8 colours per channel
-cc 8
5.5kb
dithered rabbit with 8 colours per channel
-cc 8 -dither sierra
8.0kb
rabbit with 16 colours per channel
-cc 16
9.0kb
dithered rabbit with 16 colours per channel
-cc 16 -dither sierra
12.1kb

Here i've put the mixed image through image worsener with different parameters. Larger colour palettes and dithering will increase the filesize, but also improve the quality, so it's worth playing around with worsening to find the best ratio of detail to size. Most of the time, I use 16 colours per channel and sierra dithering.

I love the effect, it reminds me of how bitmaps and gifs used to look on the internet when I was growing up. It's comfortable and cozy, and perfect for personal blogs or neocities pages.

Here's the bash script i use to worsen and crush images at once (crunching?)

mkdir ./worse;
for file in *.png;
  do imageworsener ${file} ./worse/${file} -cc 16 -dither sierra;
done;
pngcrush -dir ./output -reduce -brute ./worse/*.png

The script runs inside the directory with images you want to crunch, loops through all .png files and worsens them into /worse, then crushes them into /output

You'll need pngcrush and imageworsener downloaded, and might need to change the application paths for your own machine, but yeah this is pretty much my process <3

Credits: European Rabbit © JJ Harrison, used under CC BY-SA 3.0