2

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.

5
  • What anti-aliasing method are you choosing?
    – Scott
    Jun 16, 2015 at 19:37
  • I don't know the reasons why it does this when resizing online but I've experienced that too. Might be browser based. The best is to have your image at the exact size you need for web, and the image will be a bit lighter too. Maybe this thread could be helpful: stackoverflow.com/questions/9945363/…
    – go-junta
    Jun 16, 2015 at 19:43
  • Are you saving it to PNG-8 or PNG-24?
    – gburning
    Jun 16, 2015 at 22:47
  • Saving as PNG-24. Jun 17, 2015 at 18:09
  • It is plausible that something in the chain is altering the resolution of the alpha channel. I know for example older PHP GD routines use 7-bit alpha internally: the implication is that you lose color precision on transparency since there are only 128 possible grey levels.
    – Yorik
    Oct 15, 2015 at 20:00

3 Answers 3

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

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

1
0

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.

1
  • Hi Cai, welcome to GDSE and thanks for your answer. If you have any questions, please see the help center or ping one of us in the Graphic Design Chat once your reputation is sufficient (20). Keep contributing and enjoy the site!
    – Vincent
    Oct 15, 2015 at 13:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.