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: https://i.stack.imgur.com/aZgg9.png
- A screenshot of what I'm seeing (at Retina resolution [edit: based on the answers, the Retina display is my core issue]): https://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?