homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

Retina images for responsive websites
What is best practice?

5+ Year Member

Msg#: 4476515 posted 8:13 pm on Jul 17, 2012 (gmt 0)

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.



WebmasterWorld Senior Member tedster us a WebmasterWorld Top Contributor of All Time 10+ Year Member

Msg#: 4476515 posted 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.

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.


WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

Msg#: 4476515 posted 5:29 pm on Jul 18, 2012 (gmt 0)

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:


5+ Year Member

Msg#: 4476515 posted 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?


WebmasterWorld Senior Member swa66 us a WebmasterWorld Top Contributor of All Time 10+ Year Member

Msg#: 4476515 posted 10:53 pm on Jul 18, 2012 (gmt 0)

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.


5+ Year Member

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.
Hope the link's ok, and always interested in any other ideas and techniques.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved