3

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?
4
  • An example of the image saved on a flat white background, which has no issues in Chrome: i.imgur.com/AP0ZYHw.png Jan 14, 2014 at 4:43
  • To clarify: I'm not asking about why it's blurry on Retina (I'll be optimizing for that, too, but this is a separate issue). Take a look at this screenshot of the same image taken on Safari: dropbox.com/s/mgfgtmba2s9uq7p/… Note that it doesn't have the same faintness on the interior of the gold lines as the one taken in Chrome. That's the bit I'm wondering about. Jan 14, 2014 at 16:36
  • I'm glad I found this question because I'm experiencing the same thing. It's only Chrome and only on Retina. In my was given an image whose entire edge is a one-pixel line of transparent pixels. Inside is a several pixel thick field of gray. In Chrome, I see one row of gray pixels, then one row of white, then the rest of the gray. This is not retina blurring, but apparently Chrome trying to be clever about how it enhances edges for retina display. In this case: poorly.
    – atw13
    May 18, 2014 at 2:39
  • did you ever solve this problem? I'm getting the same thing, and so frustrating that there doesn't seem to be any questions about it online.
    – user462575
    Dec 18, 2014 at 7:00

2 Answers 2

4

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)
5
  • 1
    I don't think that's what I'm asking, but frankly, I have no idea why I'm seeing what I'm seeing, so it could be a knock-on effect of Chrome + my Retina display. I added a comment to the question showing a screenshot from Safari to demonstrate the difference in the screenshots. Jan 14, 2014 at 16:40
  • @SarahLewis have you created separate images for Retina displays yet? If not, that is the why you are seeing what you are seeing. A retina display has to scale all of your images up--which typically causes a certain amount of blurring. My guess is that Safari and Chrome have slightly different rendering techniques for scaling images, hence the slight visual differences. That said, making proper retina versions of the images should fix things.
    – DA01
    Jan 14, 2014 at 16:42
  • Thanks for clarifying. I was expecting overall blurriness, but didn't connect that with what was happening at all! Jan 14, 2014 at 16:54
  • @SarahLewis also note that your browser may have additional scaling. It's really easy to accidentally re-scale pages in new browsers...especially on a macbook with the pinch zoom. Make sure your browsers are set to 100% zoom when looking at your pages.
    – DA01
    Jan 14, 2014 at 17:13
  • @DA01: very good reminder! Thanks and duly noted! Jan 14, 2014 at 17:28
3

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/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.