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 ...
For further actions, you may consider blocking this person and/or reporting abuse
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?
webpis 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
avifbut 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
webpwas 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.
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.
(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.