How do you prevent a transparent PNG-24 image from getting light edges when resized without having to force them out using the Webkit Optimize Contrast CSS rule?

Clarification: Resizing the image in Chrome results in lighter colored lines inside the letters and shapes near the edges. Those light edges are making the image jagged rather than sharp when sized down to 200px x 50px from its original 350px x 90px size.

Here is a better screenshot of the problem:

Screenshot of

(Original image was made using Save for Web on Illustrator)

  • 1
    @Dominic: The cut-off parts were from me screengrabbing the PNG error.
    – Kevin
    Aug 11, 2013 at 14:38
  • Can you provide a little more information? What does it look like when it isn't re-sized? What white spots are you referring to (an enlarged screenshot with some arrows pointing would work)?
    – JohnB
    Aug 11, 2013 at 16:00

2 Answers 2


This was driving me so crazy too, I had to sign up to answer it so no-one else feels that frustration...

It appears to be down to the image-render that the browser is using to resize those transparent PNGs that's adding a light edge to it.

I've found adding the following css properties to the image element (or if it's a background image, the element itself) fixes the issue for me in Chrome and Firefox:

img, div.with-resized-background {
      image-rendering : -webkit-optimize-contrast
      image-rendering : optimizeQuality

You can read about more Image Rendering options here.


The image you posted is cut off because your artboard was smaller than the artwork in Illustrator.

You need to either ensure you do not have Clip to Artboard checked in the Same for Web window. Or you need to ensure all artwork falls on the artboard.

Update after question edit

Assuming those white specks are not part of the original image, I would suspect those white portions are a direct result of a Chrome rendering bug and there's no specific way to correct for only Chrome rendering.

  • I've clarified the entire question and changed the image.
    – Kevin
    Aug 13, 2013 at 6:33
  • 1
    Does the downvoter care to explain?
    – Scott
    Oct 4, 2013 at 21:19

Your Answer

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

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