Interactive by Nature

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

Retina Display Photoshop Settings

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.

Comments

  1. 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 on August, 13th, 2011 at 8:26 am
  2. 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.

    admin on August, 18th, 2011 at 7:44 am
  3. Hi. Will both images be downloaded for a retina display, but only the hi-rez one displayed?

    Brent on December, 20th, 2011 at 9:18 am
  4. Brent, yes unfortunately both sprites will download to the device, but the high-rez sprite displays for double pixel ratio screens.

    admin on December, 20th, 2011 at 9:40 am
  5. Thanks, very helpful.

    Dan on January, 13th, 2012 at 8:43 pm
  6. 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!

    Colby on January, 22nd, 2012 at 4:03 pm
  7. […] 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. […]

    How To Make Your Email Signature Retina Display - < blog >< blog > on February, 6th, 2012 at 8:48 pm
  8. 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 Rocheleau on March, 3rd, 2012 at 2:24 pm
  9. 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!

    admin on March, 4th, 2012 at 9:35 am
  10. The New iPad (iPad 3) Quick Take « Bair Dot Com on March, 20th, 2012 at 4:55 am
  11. 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?

    Dan V on March, 21st, 2012 at 2:09 pm
  12. 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.

    admin on March, 21st, 2012 at 2:26 pm
  13. 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.

    Bernard Blokker on March, 31st, 2012 at 9:23 am
  14. 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.

    Tanneru on April, 3rd, 2012 at 8:17 am
  15. 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! :)

    Ruby on May, 29th, 2012 at 11:07 am
  16. […] the CSS media queries that are useful in responsive web design make it very simple to target background images that you […]

    TheEffectofRetinaDisplayonWebDesign The BrandBuilder Company on June, 14th, 2012 at 5:14 pm
  17. 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

    Jesse on June, 29th, 2012 at 10:19 am
  18. Thanks for the great tip! One question: How do you this for tags (not using css-background)?

    Australian Dictionary on July, 3rd, 2012 at 9:40 am
  19. For img tags I mean.

    Australian Dictionary on July, 3rd, 2012 at 9:41 am
  20. 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.

    admin on July, 3rd, 2012 at 10:02 am
  21. You are right Tanneru. I updated the post. Thanx!

    admin on July, 3rd, 2012 at 3:06 pm
  22. […] the CSS media queries that are useful in responsive web design make it very simple to target background images that you […]

    Brian LePore (POWRSURG)’s personal blogThe Effect of Retina Display on Web Design : Brian LePore (POWRSURG)'s personal blog on September, 23rd, 2012 at 8:07 pm
  23. Looks very promising. Will try it out. Thanks so much.

    Cullen SUN on April, 28th, 2013 at 11:17 pm
  24. 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 :)

    Grand Rapids Website Design on June, 29th, 2015 at 3:52 pm

Leave a Comment