Super User is a question and answer site for computer enthusiasts and power users. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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?


(I'm currently using Google Chrome 27.0.1453.116)

share|improve this question
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

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:

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) */

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

share|improve this answer

You must log in to answer this question.