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.
I've also read about several techniques, but nothing seems totally adequate or standardized to me right now.
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.
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?
Media queries for the device pixel ratio should do the trick
Msg#: 4476515 posted 3:46 pm on Aug 20, 2012 (gmt 0)
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.