How to fix light edges on resized PNGs from Illustrator?

Question

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:

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

Answer 1

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.

Answer 2

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.