DEV Community

Discussion on: Why your website should use dithered images

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