Image crunching
2023-09-25 | artgenerative
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:
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!
-cc 8
-cc 8 -dither sierra
-cc 16
-cc 16 -dither sierra
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