DEV Community

Cover image for Why your website should use dithered images
Nathaniel
Nathaniel

Posted on • Updated on • Originally published at endtimes.dev

Why your website should use dithered images

The average web page has nearly 1MB of images.

That's a lot of data. More bytes on average than html, css, fonts, and javascript combined.

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

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

Sending unnecessary data down internet tubes is considered bad practice. So, we optimize images with the correct compression, format, encoding, and dimensions.

These methods reduce file sizes without altering the content of the image. The image will look pretty much the same as when you first snapped it. (or downloaded it from unsplash).

But is all that content necessary?

Sometimes, like in the case of a clothing store, or a guide to foraging mushrooms.

But definitely not all the time.

In blogs, and magazines especially, images often serve an illustrative purpose — they reinforce a point in the text.

It's for those instances that I'd like to introduce you to dithering: a method of reducing file sizes in a stylized way.

What is Dithering?

Dithering is a retro way of reducing the colors in an image for use on old hardware or in print. It removes colors, and strategically place dots to emulate the missing shades.

It's easier to explain with an example…

Here's a picture of my dog taken on a modern smart phone:

undithered picture of my dog

(Original Picture of my Dog — 123 KB)

She looks great on our modern devices in full color.

But what if we had to display the same picture on an old black and white computer screen? A screen where each pixel is either off or on. (black or white).

How would we do this? How do we make every pixel in our image either black or white?

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.

So, we pick a threshold, some shade between black and white, and if a pixel is lighter than the threshold we turn it on. If it's darker we turn it off.

Easy, but, here's the result:

undithered black and white picture of my dog

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

That looks terrible.

You can still tell it's a dog, but you can't be certain it's my dog.

With just two shades we've lost too much of what makes her recognizable e.g. the contours of her face, her nostrils.

This is where dithering comes in. Dithering simulates all the missing shades with a diffusion of dots.

It swaps pixel brightness with dot density. The denser the dots, the darker the shade.

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

a dithered picture of my dog

(Reduced to black and white with dithering – 48 KB)

That's definitely my dog.

There are many methods of dithering but they all use the same basic principal.

Dithering works with any color palette too. You can apply the same idea above, but for each color in a pixel: red, green, blue.

You don't need to know the specifics of how dithering works to apply it to your website. But if you want to learn more, wikipedia has a good article that covers the different methods.

Examples of dithering and the final image file sizes (jpeg to png):

original dog image but 200px wide
(Our original image resized to 200 by 200 pixels — 30KB)


dog image reduced to 12 colors and dithered
(Reduced to 12 colors using 4x1 Ordered Dithering - 12KB)


dog image reduced to 64 colors and dithered
(Reduced to 64 colors using 4x4 Ordered Dithering - 14KB)


dog image dithered to look like an original gameboy game
(Dithered to look like the original GameBoy™ - 8KB)


dog image dithered to just 5 colors
(Error Diffusion dithering in red, green, blue, black, and white - 17KB)


dog image dithered to match the colors of my website
(Dithered using the color palette of my website - 9KB)


How does dithering reduce file sizes?

Dithering turns images that would normally need to be compressed with lossy compression, into images that compress very well with lossless compression.

Lossless Compression

lossless compression, the type used by png files, works by finding repeated sequences of pixels — then encoding a shortcut for that sequence.

Like if I replaced the word "dithering" in this post, with the letter "d". Then at the top of the post wrote the instruction "dithering=d". That would be a form of lossless compression. None of the information from the original post would be lost.

lossless compression is great when your image has lots of repeating sequences of pixels. But photos with a full range of color have very few (if any) repeating sequences — each pixel is slighly different to its neighbours. So, lossy compression techniques are used instead.

Lossy Compression

Lossy compression, the type used in jpeg files, is way more complicated. It doesn't work at all like lossless compression. It removes information specifically in ways that are hard for humans to perceive.

jpeg does a really good job compressing photos. It's great if the image contains fluffy real life things like rabbits and clouds.

However, if a jpeg contains stark contrasts and sharp lines, like text, graphics, or dithered images. It fails.

The same lossy compression technique that works on rabbits and clouds, results in weird artifacts in our image and much larger file sizes.

If you'd like to **learn more* about how jpeg compresses images computerphile have a good video series on it.*

A note on file formats

The original picture of my dog is a jpeg, and the dithered images are png or webp. The file sizes are the result of converting the jpeg to png after dithering.

If the original image was a png it would have 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.

The new-ish image format webp has both lossy and lossless modes, and results in even smaller dithered images.

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?

When to dither?

Not every image on the internet should be dithered.

There are times, like in e-commerce, or a photography blog, when images need to be full color. In cases like these it would be daft to dither.

But this is not all the time, not even close.

Would the visitors of your site get more value out of a full color images than dithered images?

Or would they benefit more from faster loading times, and saving money on data?

For this site it's a no brainer.

Some places I'd like to see more dithering

News Sites and Magazines

News sites and magazines use images to reinforce writing, or as proof that something really happened. Full color images are usually not needed for this.

Don't know about you, but dithered images wouldn't effect my news consumption at all.

I first learned about dithering from an online magazine, that runs off a solar panel: Low Tech Magazine. Sending dithered images uses less power.

Blogs

Many blog posts (including this one), start with a big eye-catching image. This is often a stock image vaguely related to the topic.

sterile-office.jpg strong-handshake.jpg 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 Dither Me This, a tool I made to dither images.

If you're working with a static site generator. I'm currently working on version of Dither Me This for node that will dither images at build time.

Top comments (24)

Collapse
 
cchana profile image
Charanjit Chana • Edited

Seems a little excessive to me, although I totally get where you’re coming from. I routinely compress images using various tools and I’m always willing to reduce quality (usually imperceptibly) if it makes loading content faster.

Auto playing hero videos and including unoptimised images are two aspects of delivering front ends that are all too often overlooked.

Collapse
 
henrihelvetica profile image
Henri Helvetica • Edited

I can appreciate the vigilance of data savings, but your take seems more personal than anything. You see, I can have oatmeal for breakfast, and rice for dinner -- everyday. But I know I might be one of a select few who has the appetite for such a diet. The majority of ppl? They want more flavour.
I don't sense the idea that in the age of great cameras, and ever better screens, that ppl are willing to accept poor fidelity. Now that's the the UX end.
On the DX end, this seems like extraordinary steps for poor images. Again, I'm all for data savings, but there are so many more steps I would take before considering dithering (which I wouldn't consider UNLESS I was serving in largely poor network conditions). Lazy loading is largely under utilized.
You mentioned HTTP Archive? Well @ 75th percentile, you can save as much as 700kb. httparchive.org/reports/state-of-i...
Image compression could also provide as much as 200kb in savings @ p75 as well: httparchive.org/reports/state-of-i...
So we have nearly 1MB about the gate. Let's not sizing them properly, art direction, and ultimately, reducing the amount of images (would you rather a bad image or none?). If I was mega desperate, I would experiment w/ desaturated images, and even add a slight near imperceptible blur to said images as this impacts the JPG's compression opportunities for the better. But these would be absolute last resorts.
Too much work is being done in this end of town to revert back to days of monochrome looks. AVIF is going stable in FireFox Feb 2021. We have to move fwd.
PS -- if you're curious at all, I curated a series of talks on images in 2020: bit.ly/image_ready_videos . Cheers and thanks for the post. Great convo.

Collapse
 
shadowfaxrodeo profile image
Nathaniel

I think dithered images look cool, so for me it's a no brainer. But, you're 100% right. I don't expect this to become the norm, nor probably should it, and we should concentrate first on the easy wins.

I'm working on some tools to help make dithering an easy win for those who do want to do it: github | dither-me-this.

Thanks for the list of videos, I'll watch them all. And I remember enjoying your talk at perf.now() so I'll give that another watch too. Thanks again.

Collapse
 
henrihelvetica profile image
Henri Helvetica

Thx. But let do me know if/when you'd like to present Dither Me This. Happy to provide a stage/opportunity. Sounds like a lightning talk? 15 min? Happy to chat about it. Keep me posted! Thanks again.

Collapse
 
ben profile image
Ben Halpern

In contrast png does dithered images really well.

What about webp or avif? Any word on how much is to be gained by other formats?

Collapse
 
shadowfaxrodeo profile image
Nathaniel • Edited

webp is generally 25-34% the size of a jpeg. So a dithered png (depending on how you do it) is still significantly smaller.

I've never even heard of avif but now I have, I'll do some research!

edit: I'll add a webp estimate size to Dither Me This

Collapse
 
ben profile image
Ben Halpern

I'm wondering if the dithered webp has any gains on the dithered png. Avif comes to mind but definitely still not enough browser support to really worry about it.

Thread Thread
 
shadowfaxrodeo profile image
Nathaniel • Edited

Okay! So I thought I'd already done my research and knew the answer to this. But I didn't know lossless webp was a thing! So I tried it again with a 640 x 800 picture of a parrot and this is what I got:

Original Image jpeg: 106KB
Orginal Image lossy webp: 44KB

Dithered png (ordered 4x4): 37KB
Dithered Lossy webp: 105KB
Dithered Lossless webp: 17KB

Which means you can actually get better results with a dithered webp than png. So thank you for your comment. I'm going to get to work adding webp download to the tool.

Edit: anyone reading this who is wondering why Jpeg and lossy Webp get bigger after dithering them. Computerphile did a good video about it it's about how jpeg compression works.

Thread Thread
 
stereobooster profile image
stereobooster

You can use squoosh.app/editor to check avif as well

Collapse
 
henrihelvetica profile image
Henri Helvetica • Edited

I don't believe much is is to be gained here. WebP is already being updated (wepb2) for fidelity to mirror more of what AVIF is offering (webp is 10yrs old), and AVIF will do 420, 422, 444 and 8,10 + 12bit and @ relatively managed sizes. So the idea that we should be going back to monochrome looks is a tough sell to me. New codecs are pretty damn good and will only get better. I doubt ppl are trying to look @ these images on HDR screens.

 
shadowfaxrodeo profile image
Nathaniel

The internet is fed by coal.

Collapse
 
henrihelvetica profile image
Henri Helvetica

80 imgs/3MB is on the high side, but as long as you're as responsible as possible it should be fine:
📍 lazy loading
📍 sized properly
📍 all optimized
That's some of the work that's immediately within your grasp.
You can then take it further and served new gen formats like webp (supported across the board) and even AVIF (chrome + opera desktop, FF behind a 🚩 now, stable Feb '21) . Tooling is available as well now too.

Collapse
 
lorenzoblog profile image
Lorenzo

(Dithered using the color palette of my website - 9KB)
You forgot the image, I think.

But nice article too!

Collapse
 
shadowfaxrodeo profile image
Nathaniel

Thanks. It's there just the formatting of the page made it look like it wasn't. It's fixed now.

Collapse
 
timebandit profile image
Imran Nazir

What are you using to layout and style the site?

Collapse
 
shadowfaxrodeo profile image
Nathaniel

The site is built with Vue.js. But the layout and style are all my own javascript and css.

Collapse
 
timebandit profile image
Imran Nazir

I think you should spin the css into a seperate open source css framework. Looks cool 👌🏼

Collapse
 
jdog787 profile image
JDOG787

Interesting! I think sometimes this would be unnecessary, but in some cases it might be helpful depending on what your doing. It also makes the images look kinda cool too.

Collapse
 
drownedgod profile image
drownedgod

I saw the title and clicked fully expecting the article to say "because you discovered time travel and it's 1995" and nothing else. Because that's the only reason.

Collapse
 
shadowfaxrodeo profile image
Nathaniel

Maybe you should travel back in time, read the article, and post a more informed response.

Some comments may only be visible to logged-in visitors. Sign in to view all comments.