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

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

share|improve this answer

Late answer but this works:

/* applies to GIF and PNG images; avoids blurry edges */
img[src$=".gif"], img[src$=".png"] {
    image-rendering: -moz-crisp-edges;         /* Firefox */
    image-rendering:   -o-crisp-edges;         /* Opera */
    image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
}

https://developer.mozilla.org/en/docs/Web/CSS/image-rendering

Here is another link as well which talks about browser support:

https://css-tricks.com/almanac/properties/i/image-rendering/

share|improve this answer

Your Answer

 
discard

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