Retina Display for Mobile Web
As of late, I’ve been tasked with optimizing images for the iPhone4’s Retina Display. Retina Display has 4 times the number of pixels than previous iPhones and all other smart phone screens currently on the market. The text and graphics look amazing! This is due to the high pixel density of 326ppi.
Looking through various blogs and tutorials, I was unable to find a straight forward solution on how this is done for browser based mobile applications, NOT downloadable mobile applications. After figuring it out, I decided to post my version.
It’s actually quite easy with the use of Media Queries, CSS and simple a Photoshop procedure.
Step 1 – Images
Make two versions of the image you want to optimize for Retina Display. Make the first version as you normally would. Let’s name the first version image-mobile.png.
On the second version, double the size by opening the Image Size options in Photoshop and increasing the size by 200%. Save the file adding @2x to the name. i.e. image-mobile@2x.png
Step 2 – CSS
Define your styles and background image URL.
/* image styles */
.image-class {
width:64px;
height:12px;
background: url(/images/image-mobile.png);
background-repeat:no-repeat;
}
Step 3 – Media Queries
Use Media Queries to detect the pixel ratio, currently available on the iPhone4 and the next generation iPod Touch. It’s very important that the Media Queries go after you declare the styles and image URL. This is so the original styles can be overridden when the iPhone’s pixel ratio is detected. The most important part of this whole thing is including the background-size: property. You want to set this to the same dimensions as the original image size. In this case, it’s 64px 12px.
/* image retina display */
@media screen and (-webkit-min-device-pixel-ratio: 2),
screen and (min--moz-device-pixel-ratio: 2) {
.image-class {
background: url(/images/image-mobile@2x.png);
background-size:64px 12px;
}
}
Basically, what we’re doing in the code above is detecting if the device has double the pixel ratio. If so, use these styles and this optimized image instead of the previous one. Setting the background-size: property will insure that the new double size image gets sized down to seamlessly fit into your interface.
Note: Media Queries are part of the CSS3 specification, so this will only work in supported browsers.
Hi! I’m an entrepreneur not a developer. 🙂 I’m working with an app developer to design my 1st iphone app. It is image driven & he recently told me I had to adjust all the images I send him to have retina display. I’ve read all I can…understand the concept. I have photoshop but once you talked about CSS and Media Queries I was lost. Do I need special software for these two steps? Is this something I can do? Can you help me? I hope so. Where do I go after step one in photoshop is completed to do the other two steps?
Many thanks for any help,
Evon Biondi
Evon, Sorry for the slow response. I was on vacation and now have strep throat. Your app developer should know what to do with the CSS and Media Queries, assuming this is a browser based app. I would just send your developer the optimized images and the link to this post. No special software is needed, just knowledge of CSS3, as Media Queries are part of the CSS3 specification.
Hi. Will both images be downloaded for a retina display, but only the hi-rez one displayed?
Brent, yes unfortunately both sprites will download to the device, but the high-rez sprite displays for double pixel ratio screens.
Thanks, very helpful.
Spent the past week and a half looking through forums and web postings on how to accomplish this task. Got my website converted to Retina display in twenty minutes after your posting. Thank you so much. Keep them coming!
[…] Links If on the other hand you want to apply this to your Website where you can use CSS, I recommend using the Media Queries. Here is a good post that explains how to Retina Display for Mobile Web. […]
Thank you so much this article is fantastic! I have been working on jQuery Mobile for a while and have been struggling to work out images. This fix seems perfect to be honest – still renders in-browser and on Android devices too.
Jake, working with jQuery Mobile is also what got me interested in Retina Display implementation. I’m glad you found this post helpful. Good luck on your projects!
[…] http://www.interactivebynature.net/blog/wordpress/2011.02.23.retina-display-for-mobile-web […]
Hi, Thanks for the solution. This has just become an issue for me, and solves it a treat!
A question though… if both images are downloaded, what is the point of creating 2 images? Surely just display the high res image for everything. One less call no?
Thanx Dan! I apologize, but I gave Brent the wrong information in an earlier comment (Sorry Brent). Because the call to the high res sprite is in the media query that looks for double pixel ratio, only the needed sprite is downloaded.
Thanks for this solution! I have to note that scaling your images up by 200% is not the same as using a hi-dpi image. Your image editor will just interpolate the missing pixels and the image will still end up blurry.
You really need to start with a hi-resolution image, and then scale it down for “old fashioned” browsers without a hi-dpi screen.
Shouldn’t it be:
‘screen and (min–moz-device-pixel-ratio: 2)’
Otherwise it will show the high-res images in firefox on non-high-res screens.
Wow, this retina display stuff is more complex than I thought! As a “computer” person but not so much a “smartphone” fan, I had no clue! I am familiar somewhat with CSS3 media queries though; so I’m glad its simple enough to fix using the queries. Best of luck to all in mobile design & development…Ahh! 🙂
[…] the CSS media queries that are useful in responsive web design make it very simple to target background images that you […]
Great little intro to retina display. One thing to note and I think someone already brought it up, but if you are working with raster images, which most of the time web developers do, you need to start with the image being the 200% larger and scale down for other media types.
Otherwise, you are just enlarging pixels that aren’t there, therefore you are getting any benefit from this whole exercise.
I think a good image workflow, is to start saving out native images for retina display and then downsampling them for regular displays.
If you are working in fireworks and all your layers are vector (not bitmap), then increasing the image size really will work.
Again, great tutorial and I don’t want to detract from the good work you have done here
Thanks for the great tip! One question: How do you this for tags (not using css-background)?
For img tags I mean.
You’re welcome! That’s a good question. I don’t know of a way to do this using image tags. What I’ve done in the past is put a transparent GIF over the background image to give the image alt and title tags for accessibility. Let me know if you find a solution.
You are right Tanneru. I updated the post. Thanx!
[…] the CSS media queries that are useful in responsive web design make it very simple to target background images that you […]
Looks very promising. Will try it out. Thanks so much.
Thanks for posting this very helpful post! I have been slacking for a while now with retina display for mobile devices. I’ve been in the stone age…lol. I’m glad I came across this post though. Using Media Queries, CSS and simple a Photoshop procedures, I am now on my way to a better web designer 🙂