How to fix light edges on resized PNGs from Illustrator?

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)

Answer

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.

Attribution
Source : Link , Question Author : Kevin , Answer Author : ckpepper02

Leave a Comment