Take the 2-minute tour ×
Super User is a question and answer site for computer enthusiasts and power users. It's 100% free, no registration required.

Everytime I try to use transparent PNG images on sites, white edges keep appearing around the images, seen in the photo below. How come this is happening, and how do I stop this from happening?

1

(I'm currently using Google Chrome 27.0.1453.116)

share|improve this question
2  
How did you create the PNG? What compression (ie PNG24?) are you using? –  kobaltz Jul 5 '13 at 20:50
    
Is that a screenshot of the issue - it isn't transparent? How about attaching the actual image? –  Paul Jul 5 '13 at 22:53
    
@kobaltz: It's actually an AI file opened in Photoshop and saved as PNG. I saved them at a big width and height for retina display compatibility. Those white spots mostly occur whenever I scale them down using CSS, and I'm forced to use -webkit-optimize-contrast on it, but it leaves a very unsettling effect when scaled really small. –  user236029 Jul 6 '13 at 12:11
add comment

1 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 options here: https://developer.mozilla.org/en/docs/Web/CSS/image-rendering

share|improve this answer
add comment

Your Answer

 
discard

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