Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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

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?
share|improve this question
An example of the image saved on a flat white background, which has no issues in Chrome: – Sarah Lewis Jan 14 '14 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:… 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. – Sarah Lewis Jan 14 '14 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 '14 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 '14 at 7:00
up vote 4 down vote accepted

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:


  • 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)
share|improve this answer
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. – Sarah Lewis Jan 14 '14 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 '14 at 16:42
Thanks for clarifying. I was expecting overall blurriness, but didn't connect that with what was happening at all! – Sarah Lewis Jan 14 '14 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 '14 at 17:13
@DA01: very good reminder! Thanks and duly noted! – Sarah Lewis Jan 14 '14 at 17:28

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

Your Answer


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

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