: Illustrator PNG w/ transparency Export - White Outline in Web when not 100%? I created a vector graphic in Illustrator CC and used "Save for Web" to create a transparent PNG of it. When rendered

@Yeniel278

You have discovered a central fact about pixel images. There is no such thing as a noncolored (transparent just means color is hidden) pixel. All pixels have color even transparent ones. When you implement a interpolation of the image you are invariably going to have to sample pixels in the transparent areas.

Naive implementations nterpolate each channel separately thus the color of the transparent area bleeds thru the process since your image is in fact white in transparent pixels. Even a non-naive implementations will sometimes have big problems because its just damn hard to do it perfectly right.

There are 2 ways to solve this.


Dont scale, this is a no brainer
Color the transparent pixels with.the color of the edge pixels. This is much harder than it sounds though. Since your tools wont do this for you without a LOT of extra work and cursing. Threres still a chance that it wont help you much.

Vote Up Vote Down

@Nimeshi706

This is because you are relying on the browser to resize your image.

There are some ways of getting around the issue with CSS - I think ms-interpolation-mode: nearest-neighbor; for Internet explorer and image-rendering: -moz-crisp-edges; for Firefox, I'm not sure about Chrome, Safari or others though. You should search or ask on stack overflow for that.

The only way to 100% avoid this is to save the PNG at the correct size.

Vote Up Vote Down

@Cooney243

In the prefereneces panel: Edit > Preferences > General or cmd+k
make sure anti-aliasing is selected. It will smooth exported png 24 files out nicely. Also make sure you are using png-24 as suggested above and when you are saving-for-web that you have art optimized selected (its in the drop down menu in the image size menu).

Vote Up Vote Down