Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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)

share|improve this question
1  
@Dominic: The cut-off parts were from me screengrabbing the PNG error. –  Kevin Aug 11 '13 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 '13 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.

share|improve this answer

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.

share|improve this answer
    
I've clarified the entire question and changed the image. –  Kevin Aug 13 '13 at 6:33
1  
Does the downvoter care to explain? –  Scott Oct 4 '13 at 21:19

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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