: 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

@Megan533

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.

Vote Up Vote Down

@Nimeshi706

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.

Vote Up Vote Down