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:
(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:
(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:
(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):
(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)
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?
- Speed. Large images make your website slow and inaccessible to visitors with slow connections.
- Cost to visitors. 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.
- Costs for you. 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 in search results.
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)
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.
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.
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.
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.
What about webp or avif? Any word on how much is to be gained by other formats?
webp
is generally 25-34% the size of ajpeg
. So a ditheredpng
(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
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.
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
: 106KBOrginal Image lossy
webp
: 44KBDithered
png
(ordered 4x4): 37KBDithered Lossy
webp
: 105KBDithered Lossless
webp
: 17KBWhich 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.
You can use squoosh.app/editor to check avif as well
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.
The internet is fed by coal.
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.
(Dithered using the color palette of my website - 9KB)
You forgot the image, I think.
But nice article too!
Thanks. It's there just the formatting of the page made it look like it wasn't. It's fixed now.
What are you using to layout and style the site?
The site is built with Vue.js. But the layout and style are all my own javascript and css.
I think you should spin the css into a seperate open source css framework. Looks cool 👌🏼
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.
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.
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.