DEV Community

loading...
Cover image for Why Your Website Should Be Using Dithered Images

Why Your Website Should Be Using Dithered Images

shadowfaxrodeo profile image Nathaniel Originally published at endtimes.dev Updated on ・6 min read

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.

Discussion (25)

pic
Editor guide
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 Author

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
wick3drose profile image
wick3dr0se

I can't be tearing up the quality of my photos on a Siberian Husky website; However I did resize and compress each image and they're between 30-100kb and still great quality. I have 80 some images on 1 page and it's only 2.8M on that page. I like the idea but not sure it would ever be that useful for me

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
wick3drose profile image
wick3dr0se

I agree, I've also added more. I use lazy loading only on big images. I resized the 80 images to 250 width and made a masonic grid appearance with the various size pictures by using responsive flex. A good amount of them are .jpg. A 100% quality jpg has always come out as less than a loseless webp. I recently went for the next-gen formats and converted my jpgs to webps. Not only can I not use the .webp images on many other sites but the quality appears exactly the same, thumbnails do not appear (I can likely change this easy since I'm using ArchLinux), and every single file I've converted to webp comes out larger. I've started converting my webp's back to jpg actually. It was giving me 10-40 more KB per image which was really adding up. I don't think webp is 100% ready for production use yet.

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 Author • 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 Author • 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.

Collapse
bezpowell profile image
BezPowell

What an amazing article. I used dithering a lot (though a didn't really understand it properly) when I was at college to etch images onto wood using a laser cutter. As you have said, it isn't suitable for every site, but any reduction in image size is great for the environment and web performance; and the technique could look very good for certain sites (retro gaming sites spring to mind).

Something that I was considering recently was whether an oversized, dithered image could be used in place of greyscale images. The browser would scale it down and it might appear almost indistinguishable from an actual greyscale image. Thanks to your article I'm now going to have a play around with this.

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
timebandit profile image
Imran Nazir

What are you using to layout and style the site?

Collapse
shadowfaxrodeo profile image
Nathaniel Author

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
yellow1912 profile image
Info Comment marked as low quality/non-constructive by the community. View code of conduct
yellow1912

Ecommerce shop owners: oh don't mind the shitty images on my site, I do that for the climate. I can already see buyers flocking to that store to buy (or not).

I think your argument about speed fails flat when you distort the image quality so much it feels like the web 10 years ago. Perhaps for a hobby site maybe(in that case why not skipping the images as well, that will help the climate even better. Or perhaps just don't have website, turn off your computer to save electricity and go work out for better health?).

Now dithering may make sense with some trick. For example, one can display a low quality image, asking for users to click on it to see higher quality image only if they want. In that case, you can still shave off some bytes while meeting users' expectation.

Collapse
cyberhck profile image
Nishchal Gautam

Did you read full article? He has specifically written its not for every site, and in example he's said not for e-commerce.

So many sites lower quality of hero image and put a translucent overlay on top of them, this is one place it'll absolutely help. Also if you have gallery and you want to display thumbnail it'll help.

Please don't jump to comment without going through all points.

Collapse
shadowfaxrodeo profile image
Nathaniel Author • Edited

I did write in the article that this wouldn't be applicable to say, a clothing store.

I mean, you're joking, but I actually bought pants from this shop just the other day: Organic Basics - The Low Impact Website. I only heard about it because of it being low impact. It only shows images on request, and the quality of the images varies based on the available renewable energy.

Climate is only part of the issue. It's not even the main issue mentioned.

Some, if not most images do not need to be large files. The key info they're conveying is the same at a lower quality. Some images obviously need to be high resolution in order to convey the necessary information.

Collapse
wick3drose profile image
Info Comment marked as low quality/non-constructive by the community. View code of conduct
wick3dr0se

I'd suggest you don't ever touch Javacript so that you can "conserve resources". Like internet is fed by coal 🙉

Thread Thread
shadowfaxrodeo profile image
Nathaniel Author

The internet is fed by coal.

Thread Thread
wick3drose profile image
Info Comment marked as low quality/non-constructive by the community. View code of conduct
wick3dr0se

No some electricity is. Internet directly is not. I've been in the telecommunications field since I was 16. It's definitely not. Go vegan and vote Biden while you're at it 😂

Collapse
wick3drose profile image
wick3dr0se

I like how you think. A little bit of this aggressive feedback makes a good developer 🤔
Followed!