Why Your Website Should Use Dithered Images (2020)

Hi there author of the article here, I did a lot of testing when I wrote the article, and even made a tool for dithering. https://doodad.dev/dither-me-this/ It completely depends on what kind of dithering you do — ordered dithering with a small color palette will give you a much smaller file size than a full color jpeg. WebP and AVIF also support lossless compression and can be used for even smaller file sizes using dithering.

#Design Tools #User Experience #Developer Tools 11 social mentions

2

Website Image Speed Test

#User Experience #Marketing #Developer Tools 2 social mentions

3

Dither it!

I'm a big fan of this piece! For those looking to play around further, there's https://ditherit.com/ and on the command line, good ol' imagemagick comes through with something like convert picture_with_cool_colors_you_like.png -colors 10 -unique-colors sourcecolormap.png convert source.jpg -resize 500x500\> -ordered-dither o4x4 -remap sourcecolormap.png output.png mutatis mutandis. :).

#Image Editing #Photos & Graphics #Design Tools 9 social mentions

4

Squoosh

This is generally some pretty terrible advice. Really, don't follow it. At least not without testing its impact. Dithered 8-bit/256-color images will look 'better' than non-dithered 8-bit/265-color images, but it will almost always be worse that a 24-bit JPEG (no alpha) or 32-bit webP (includes alpha) <i>and</i> have a much larger file size. I did some quick tests with https://squoosh.app. The 8-bit dithered PNG is >4x the size of the JPEG. It also shows some terrible banding on any kind of gradient in the image. The PNG is 5x larger than a better looking webP version of the same image. I tested a lot of images (photos, drawings, digital artwork, etc) and some of the images were 10x larger as dithered PNGs vs webP/JPEG. Only one was smaller as a dithered PNG.

#Image Editing #Photos & Graphics #Image Optimisation 190 social mentions

5

pngquant

Not as drastic as the dithering in the linked post, but if you work with png files, pngquant is worth a look. It's lossy, but the image quality is still quite good. https://pngquant.org/ Also, better to compile from source. There are os packages, but they tend to be older versions of pngquant that have various issues.

#Image Optimisation #Image Editing #Image Effects 28 social mentions