Illustrator PNG w/ transparency Export - White Outline in Web when not 100%?

Question

I created a vector graphic in Illustrator CC and used "Save for Web" to create a transparent PNG of it. When rendered on my site, though, it adds a faint light outline around the gray circle in the included sample screenshot. Notice, though, that it only appears if the image is changed in size (made its container smaller, so the image scaled down).

Image at 100%, no white outline - nice and crisp:

Image scaled down to 95% (or any % besides 100), artifact outline that makes it look blurry:

I've never had this issue before and have tried adjusting the artboard to whole px amounts, removed the color profile, changed the raster transparency settings, switched between cmyk and rgb color modes, unchecked convert to sRGB, and a multitude of other tweaks I'm forgetting at the moment, but this is pretty frustrating and I'm hoping this wonderful community can provide some insight.

Answer 1

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.

1. Dont scale, this is a no brainer
2. 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.

Answer 2

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

Answer 3

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.