Retina images for responsive websites

What is best practice?

[Alex_TJ]

I've been researching some of the techniques and tools for delivering @2x images to devices with retina displays. It's starting to get very confusing.
What's currently the best solution? Is there a technique that's becoming established?
Thanks for any help.

[tedster]

I've also read about several techniques, but nothing seems totally adequate or standardized to me right now.

Every approach requires more than pure HTML. CSS and JavaScript both come into play, as what is needed is to "sniff" in order to detect a retina display - then replace the normal resolution image with a "double size" image if a retina display is detected. So you've got to access the DOM through JavaScript to overwrite the regular size image with the filename of the retina, double-sized image.

Some implementations actually serve the smaller resolution image first and then overwrite it. That wastes bandwidth. Other implementations load the entire jquery library in order to work. Again, that takes a lot of bandwidth -- and when you do that, the user gets a delay under most connection speeds.

I hope someone here has information about a good approach, because right now it looks like a jungle to me.

[Fotiman]

JavaScript isn't needed. Just use media queries in CSS. And use CSS sprites. If you're looking to replace actual in-content images, then yes, that might require JavaScript, but if the images are presentational only, then you can do it with CSS sprites. Here's an article that talks about it:
[miekd.com...]

[Alex_TJ]

It was actually that article that got me thinking seriously about retina images.

Retina displays are probably only mid to low single figures at the moment, but that's going to be changing very rapidly over the next few months, especially with the Macbook Pro.

The glitter and fuzz images are easy enough to handle with CSS, as that article explains, but the in-content images are more important, and more difficult. I found a good comparison table a while ago, but that just made things even more confusing by doubling the number of techniques I thought were possible.

What's everyone doing with their websites for retina images?

[swa66]

Media queries for the device pixel ratio should do the trick

Apple themselves are using quite a complex piece of javascript on their apple.com homepage. it's at http: //images. apple. com/global/ac_retina/ac_retina.js (spaces added to avoid the link) Should be easier to read once you format it for humans.

[Alex_TJ]

I came across a pretty good article in Smashing Mag today - I think we'll go for the retina.js for content images and css for the rest, though as Tedster said that means 2 images are downloaded and there's a noticeable swap.
[coding.smashingmagazine.com...]
Hope the link's ok, and always interested in any other ideas and techniques.