Dev Comms Lead at @Catchpoint, working on @RealWebPageTest™.
Toronto Web Performance, JAMstack TORONTO curator.
Conference speaker, consultant and organizer.
#DevsWhoRun.
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.
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: 106KB
Orginal Image lossy webp: 44KB
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.
What about webp or avif? Any word on how much is to be gained by other formats?
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.
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