We help IT Professionals succeed at work.

PNG Transparency save image for web

Sumukha
Sumukha asked
on
Hello,

Some images that I edit for websites have a transparent part, i.e. a fading edge (using a 20px feather on a 2000px wide image).
When I use  save for web > png, I never get the same desired effect as when I use save as png.
Saving as png has  transparency, when I use save for web the transparency always looks dirty.

How can I achieve this?

Thanks!
Comment
Watch Question

CERTIFIED EXPERT

Commented:
When using Save for Web... are you using png-24?

Author

Commented:
no. png-8
CERTIFIED EXPERT
Commented:
Ok. Try png-24. It should get the look you are looking for.

Author

Commented:
Yes, you are right. For some reason I did not use it anymore, because the file size was sometimes very big. Now I see that that is similar to the save as -version.
CERTIFIED EXPERT

Commented:
[do not award points, this is just behind the scenes info]

 PNG's come in two flavors. The png-8 is designed to replace gif images. Like gif's, they are limited to 256 colors, so whenever you save an image with a full range of colors, such as a ramp or gradient, the colors get reduced to just a few, making the "dirty" image you are referring to.

Png-24's on the other hand, can handle a full range of colors just like a jpeg, however, unlike a jpeg, there is no breakdown of quality from compression, so they stay nice and smooth.

Explore More ContentExplore courses, solutions, and other research materials related to this topic.