Mobile app version of vmapp.org
Login or Join
Kaufman565

: Why does Chrome distort my transparent PNG (adding a subtle inset "weak" area)? I'm having a hard time describing the issue in words, so haven't had any luck searching. I have a simple repeating

@Kaufman565

Posted in: #AdobeFireworks #AdobePhotoshop #Png

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.


The image: i.imgur.com/gxuCNDd.png




A screenshot of what I'm seeing (at Retina resolution [edit: based on the answers, the Retina display is my core issue]): www.dropbox.com/s/a44j8uih9c3q4e4/Screenshot%202014-01-13%2020.18.06.png



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:


Do you see this issue? (I.e. is it just some weird setting on my computer somewhere?)
Any idea what's causing it?

10.02% popularity Vote Up Vote Down


Login to follow query

More posts by @Kaufman565

2 Comments

Sorted by latest first Latest Oldest Best

 

@Kimberly620

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

developer.mozilla.org/en/docs/Web/CSS/image-rendering
Here is another link as well which talks about browser support:
css-tricks.com/almanac/properties/i/image-rendering/

10% popularity Vote Up Vote Down


 

@RJPawlick971

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:


create a separate png for retina displays at twice the horizontal and vertical dimension. Then use media queries to deliver the right image to the right screen: weedygarden.net/2010/10/retina-display-and-css-background-images/

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)

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme