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

@Holmes874

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 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.

Vote Up Vote Down

@Murray976

I did some playing with the image... extracted a copy from your PNG24 example and tried several methods. In the end I'd use this, myself:



(not great on white.. better on a grey)

What I did was use PNG8 with no color diffusion, then set the transparency diffusion to 50% dithered, and added a grey matte color (#dddddd). That slight grey matte helps the edges look clean on a wide range of greys even if they don't match the specific matte color. You can play with various CSS background colors using this jsFiddle link. You'll see it seems to work well on a range of lighter grey backgrounds. It seems to start failing once you pass #999 for the page color.

It is far from the smooth edge of a PNG24. But there's no way to get the PNG24 smooth edge in an indexed color image (PNG8) So it's a trade off... which is more important the smooth transparency or the file size? And granted I'm working from an extracted copy of the image. Your results may be better with original files.

Vote Up Vote Down

@Smith574

I know you didnt say this but why wouldn't you just code everything in CSS if you are worried about load times and file sizes?


Circles tutorial, David's demo and another good tutorial by Brian Hadaway
Angled text tutorial


EDIT:
Other circular questions on the stack here and here

Vote Up Vote Down