Why Your Website Should Not Use Dithered Images

Over the past month or so I've come across a couple articles that talk about how web content creators should use a technique called “dithering” on their website’s images in order to send less data to their users and have their site load faster.

The first article was Why Your Website Should Use Dithered Images by Nathaniel. Nathaniel created a web tool called Dither Me This that allows users to upload images and choose different dithering modes to “reduce the file size of an image… but in a stylish old-school way.”

The website claims:

“Dithering was (still is) used to display pictures on old screens with limited colors. But has the modern advantage of making web pages load faster.”

The other article I came across (at a separate time, even though it's linked to in Nathaniel's blog post) was How to Build a Low-tech Website? It talks about Low Tech Magazine rebuilding their website with an environmental angle, and how they’ve decreased the amount of energy their website uses by sending less data to the user. The article says “we chose to apply an obsolete image compression technique called “dithering””, and claim “compared to the old website, the images are roughly ten times less resource-intensive.”

What is dithering?

Here's a nice description from Wikipedia:

“Dithering is used in computer graphics to create the illusion of color depth in images on systems with a limited color palette. In a dithered image, colors that are not available in the palette are approximated by a diffusion of colored pixels from within the available palette. The human eye perceives the diffusion as a mixture of the colors within it. Dithered images, particularly those using palettes with relatively few colors, can often be distinguished by a characteristic graininess or speckled appearance.”

A dithered photograph of Michelangelo's David

So where does the compression part come into this? If you reduce the color palette for the image then you can reduce the “color depth” or “bit depth” of an image. For example, if your only colors are black and white, then each pixel of the image only needs to be represented by a 1 (for white) or 0 (for black), and the dithering pattern can trick your eyes into seeing the grays in between.

Does dithering reduce your image’s file size?

So let’s do some tests and see if dithering an image actually reduces file size, and whether it’s the best solution for the job. If we can get our image file sizes smaller, our website will get faster, and we’ll use less energy to transfer bits across the web.

This isn’t a completely scientific process, so we’ll just use four images: black and white complex, black and white simple, colored complex, and colored simple. These images are arbitrarily chosen off of Unsplash just as someone might do when they’re picking an image for their own blog. We’ve got four images we’ll call B&W Complex, B&W Simple, Color Complex, and Color Simple.

All of the test images combined in a 2 by 2 grid

These images are very large. Way larger than you should be using in production. But it shouldn’t really matter how big the image is, right? If dithering reduces file size, then we should see that.


B&W Complex
(5456px × 3632px)

B&W Simple
(5616px × 3744px)

Color Complex
(3000px × 4000px)

Color Simple
(4696px × 3131px)

Original JPG

1.53 MB

3.50 MB

1.69 MB

552 KB

Dithered JPG

16.1 MB
↑ 952.29%

16.4 MB
↑ 368.57%

24.7 MB
↑ 1,361.54%

29.9 MB
↑ 5,316.67%

Dithered PNG

2.73 MB
↑ 78.43%

2.27 MB
↓ 35.14%

4.63 MB
↑ 173.96%

4.25 MB
↑ 669.93%

Original WebP

384 KB
↓ 74.90%

1.74 MB
↓ 50.29%

660 KB
↓ 60.95%

240 KB
↓ 56.52%

Original AVIF

126 KB
↓ 91.76%

982 KB
↓ 71.94%

358 KB
↓ 78.82%

85.5 KB
↓ 84.51%

Here’s the process for how I got these results:

Similar to what was said in Nathaniel’s article, JPGs are not going to do well with dithered images, and we can see that they do absolutely horribly. But, according to the other claims made by the article, we should have seen decreases in file sizes for the Dithered PNGs for all the images…and we only see that one image achieved that.

We can also see that converting the original non-dithered image to WebP gets a much smaller file size, and the original aesthetic of the image is preserved. Just for fun I also added AVIF, one of the newer formats that can only be used in Firefox and Chrome right now, and you can see that the file size is absolutely tiny for the size of the image.

Does resizing get better results?

Now, one of the things that happens when using Nathaniel’s dithering tool (and is mentioned in his article), is image resizing. He doesn’t explicitly mention this as a requirement to get good results, but perhaps dithering works better on smaller images. So here’s the Color Simple image (which had the worst results when converting from the Original JPG to the Dithered PNG) resized to a width of 500 pixels:


Resized Color Simple
(500px × 333px)

Original JPG

133 KB

Dithered JPG

354 KB
↑ 166.17%

Dithered PNG

53.4 KB
↓ 59.85%

Original WebP

6.31 KB
↓ 95.26%

Original AVIF

3.12 KB
↓ 97.65%

By shrinking the image, we were actually able to get a reduction in file size when going from the Original JPG to the Dithered PNG! But…as you can see it’s still nowhere close to the file size we get by just converting the Original JPG to WebP.

But, the original article mentions we can get an even smaller file size from the Dithered PNG by converting it to a Lossless WebP (a WebP that compresses more like a PNG than a JPEG).


Resized Color Simple
(500px × 333px)

Dithered PNG

53.4 KB

Dithered  WebP

30.1 KB
↓ 43.63%

And these results confirm that! We were able to shrink it by 43%, down to 30.1 KB. But is that smaller than the WebP we created from the original image?


Resized Color Simple
(500px × 333px)

Original WebP

6.31 KB

Dithered  WebP

30.1 KB
↑ 377.02%

Not even close. The Dithered WebP is 377% bigger than the Original WebP.

Final Comparisons

Original JPG (133 KB)

Photo taken out in an ocean in the morning with small waves and a blue and pink sky

Dithered Lossless WebP (30.1 KB)

A dithered image of a photo taken out in an ocean in the morning with small waves and a blue and pink sky, it has a grainy appearance similar to the feeling of sandpaper

Original WebP (6.31 KB)

Photo taken out in an ocean in the morning with small waves and a blue and pink sky


Unless you’re going for an aesthetic look, converting your images to dithered versions for your blog posts is not a great idea. Not only do you have to resize them to be much smaller if you actually want to see any difference in file size while dithering, the dithering doesn’t get you anywhere close to the amount of savings you’d get by just converting the original image to WebP.