Advertisement


Transparency dithering issue when saving for web


Question

I am trying to optimize the graphics for a webdesign, since I am not satisfied with the performance in terms of load-times. The logo is quite big and in PNG24 so I experimented to see how much I could shrink it. It was thrilled to see that I could get from 158KB to 61KB with practically no image quality loss until I started implementing the picture in the design and noticed white "ghosting" transparency issues around some of the edges. Then I started playing around with transparency dithering, but the best result I managed to get was with diffusion dithering enabled, but the amount set to 0% (yeah, it actually still has an effect?!), but I still find the edges a bit to jagged for what I am looking for. I made a collage where I put the tree versions of the logo on a subtle gradient, which makes it easier to see the issues on the following link:

images

Any suggestions on how I can get closer to that attractive ≈ 60KB filesize without giving up on the smooth edges when not performing dithering?

BTW: I'm using the "save for web" dialogue in Photoshop CS5.5 in case you're wondering.

2013/04/12
1
2
4/12/2013 3:43:00 PM

1.) In PhotoShop, Save For Web and save as a 24-bit transparent PNG.

2.) Use a third party to compress the image. I like https://tinypng.com/

3.) Your image was compressed down to your target 60kb with lossy compression preserving full alpha transparency. No white edges, no image quality loss.

2014/10/09
2
10/9/2014 9:50:00 PM