Transparency dithering issue when saving for web
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:
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.
Popular Answer
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.