fun with dithering.

wednesday, september 20th, 2023.

I decided to play around with dithering a bit using two of the pictures I posted Monday:

Posting pictures as dithered PNGs to my website is a bit of an aesthetic choice, modeled after LOW←TECH MAGAZINE's dithering as well as a bunch of other smol websites. For my own twist, I decided to import the NES palette into GIMP and use that to do my dithering. Instructions are available for importing a palette into GIMP and dithering images to a specific palette.

Once downsized and limited to the NES palette, they're quite a bit smaller than the original JPEG images. Here's a comparison showing the file sizes in bytes between this post's dithered PNGs and the JPEGs that I posted Monday:

-bash-5.2$ stat -f "%6z%t%N" \
> marin_muirwoods.* \
> music_midtown_2023.*
115368  marin_muirwoods.jpg
 37473  marin_muirwoods.png
 96608  music_midtown_2023.jpg
 30854  music_midtown_2023.png

A reduction to a third of their original sizes! That's not bad at all. Not many of the images I've posted on this website fit under 40KB!

I also found a little CSS trick to make sure that the images scale without blurring:

img.dithered {
  width:100%;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

Lospec has a ton of palettes that are calling my name something fierce, but I think I might stick with the NES palette as my dithering choice for now and see how I like it.

Until next time, be well! :)