Why does Chrome distort my transparent PNG (adding a subtle inset "weak" area)?


Question

I'm having a hard time describing the issue in words, so haven't had any luck searching. I have a simple repeating pattern (though I've had the same trouble with other images; it doesn't seem to be related to the complexity or color depth), and when I save it as a transparent PNG, using it in Chrome shows a kind of ghosted artifacting.

enter image description here

enter image description here

The image should have solid-looking lines.

What I've tried:

  • Saving it as an 8-bit PNG with Alpha Transparency in Fireworks CS6
  • Saving it as a 32-bit PNG with Alpha Transparency in Fireworks CS6
  • Saving it as a 24-bit PNG with Alpha Transparency in Photoshop CS6

The issue appears in each of these versions, but not in Firefox or Safari (all browsers are their respective latest versions on Mac OS X 10.9.1), hence my assumption that it's some interaction between Chrome and the transparent PNG. I'm looking at just the image directly, not on a web page.

Saving the image on a background (with no transparency) makes the issue disappear, but isn't a viable option (and neither is saving with Index Transparency), because it's going on a web page with a variable background.

My question is two-fold:

  1. Do you see this issue? (I.e. is it just some weird setting on my computer somewhere?)
  2. Any idea what's causing it?
1
3
1/14/2014 4:59:00 PM

Accepted Answer

If I understand your question correctly, you are asking why your image, on a Retina display, looks a little blurry.

If that's the question, the answer is due to the retina display having to scale your image up 2x. The fix for this would be to:

or

  • use a vector format (SVG), which can scale without loss of resolution. This works great on new webkit browsers and the like. It may not work on older browsers (cough IE cough)
4
1/14/2014 5:58:00 AM

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/


Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow


Website under construction!!!
^