| 4:12 pm on Jul 18, 2012 (gmt 0)|
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.
| 5:29 pm on Jul 18, 2012 (gmt 0)|
| 5:46 pm on Jul 18, 2012 (gmt 0)|
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?
| 10:53 pm on Jul 18, 2012 (gmt 0)|
Media queries for the device pixel ratio should do the trick
| 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.
Hope the link's ok, and always interested in any other ideas and techniques.