Why Your Website Should Be Using Dithered Images

Oversized images have a negative impact on your site's speed, accessibility, seo, and on the climate.

The average byte size of images per web page is nearing 1MB.

On the average WordPress site it's already 1.2MB and WordPress is used by 39% of websites.

That's a lot of data. It's more than the average bytes from html, css, fonts, and javascript combined.

Worse still, most of these are stock images of people in suits doing business.

There's is a solution. One that dramatically reduces file sizes while making your website look funky and stylish

Dithering!

What is Dithering?

Dithering is a retro method of reducing the colors in images to display them on old hardware.

For example, here's a picture of my dog...

(Original Picture of my Dog 123 KB)

She looks great on our modern devices in full color. But let's say we had to display the same picture on an old black and white computer screen. (Only black and white, not even greyscale.) How would we do this?

We need to make every pixel in our image either white or black. So each pixel is either on or off, 0 or 1.

The simplest way is to go through each pixel and if it's a light-ish pixel turn it on, if it's a dark-ish pixel turn it off. Here's the result:

(Reduced to black and white with no dithering 15 KB)

Now, that image look pretty terrible. You can still tell it's a dog, but with just two shades we've lost too much of what makes the original image so great. e.g. her nostrils and details on her fur

This is where dithering comes in.

Dithering is the process of placing dots in our image to emulate all the shades we're missing.

The next image uses only on and off pixels like the one above, but this time we've dithered it:

(Reduced to black and white with dithering 48 KB)

Exactly how this works will be the topic for another post. There's lots of methods of dithering an image. You can dither images with any color palette too.

(Our original image resized to 200 by 200 pixels 30KB)

(Reduced to 12 colors using 4x1 Ordered Dithering - 12KB)

(Reduced to 64 colors using 4x4 Ordered Dithering - 14KB)

(Dithered to look like the original GameBoy - 8KB)

(Error Diffusion dithering in red, green, blue, black, and white - 17KB)

(Dithered using the color palette of my website - 9KB)

Why Dither in 2020?

It's 2020, we've got a lot of problems, but limited colors on computer screens isn't one of them. So, why should you dither images?

• Speed. Large images make your website slow and inaccessible to visitors with slow connections.

• Visitor's Wallets. Large images cost visitors money, sometimes a lot of money. To put it in perspective, a mobile user in Malawi pays $27.41 per gigabyte in Canada its $12.55.

• Your Wallet. Serving large images costs you money too.

• Climate Change. Big images waste electricity and emit carbon. The internet is responsible for 3.7% of global carbon emissions. A number that keeps growing as we send more and more data.

• SEO. Faster loading times and a good user experience will rank your site higher on search engines.

What about other image optimizations?

Part of this issue can be solved by optimising image sizes, and serving images as webp. But a full color webp image is still much larger than a dithered png.

edit: you can get even more gains by using lossless WEBP on a dithered image

A note on image formats

The original image of the dog on this post is a jpeg, and the dithered images are png. This is because jpeg is really good at compressing full color photos, but struggles to compress dithered images. In contrast png does dithered images really well.

If the original image was a png it would have been a much larger file size. The reduction in size after dithering it would have seemed much more impressive. But the comparison wouldn't have been very useful.

When to Dither and when no to dither?

I admit. Not every image on the internet should be dithered.

There are sites where the images need to be full color: (i.e. A clothing store, a photography blog.) but there are lots of websites where dithered images would look great...

Two situations where I'd love to see more dithering are:

Blogs and Online Magazines

Most blog posts and magazine articles use images simply to illustrate a point in the written content of the piece. A full-color image is usually not needed.

"Featured Images"

Many (if not most) blog posts start with a big eye-catching image. This is often a stock image vaguely related to the topic.

cool coding idea ...computer-screen-with-code.jpg
money problems ...someone-scratching-their-head.jpg
meditation guide ...sunset.jpg

A reasonable argument could be made that these images should just be deleted. But if you really need to catch eyes...dither them.

How to dither images?

You can use this tool I've made to diher images: Dither Me This

If you're working with a static site generator, and want your images dithered at build time. I'll be updating this post with a git repo soon.

Let me know if you have any other questions about dithering!