Retina Display for Mobile Web

Posted on January 2, 2013 | No Comments

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 for Mobile Web

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.

Category: retina display
Tags: retina display

Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.