Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

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: i.imgur.com/AP0ZYHw.png –  Sarah Lewis Jan 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: 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. –  Sarah Lewis Jan 14 at 16:36
add comment

1 Answer

up vote 2 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:

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)
share|improve this answer
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. –  Sarah Lewis Jan 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 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 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 at 17:13
    
@DA01: very good reminder! Thanks and duly noted! –  Sarah Lewis Jan 14 at 17:28
add comment

Your Answer

 
discard

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.