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 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 at 100

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

Image Resized

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

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.

Attribution
Source : Link , Question Author : Jonathan Bowman , Answer Author : joojaa

Leave a Comment