Optimizing Images for Retina Displays

For all businesses, mobile websites are becoming necessary as more people choose mobile devices such as smart phones and tablets to browse on the web versus a desktop. As those technologies grow, so do their capabilities. One of the most recent advances in mobile technology is the retina display.

Retina Display Defined
As defined by Webopedia, retina display is:

A marketing term developed by Apple to refer to devices and monitors that have a resolution and pixel density so high – roughly 300 or more pixels per inch – that a person is unable to discern the individual pixels at a normal viewing distance. Apple’s Retina Display made its debut on 2011’s iPhone 4S, which featured a 960×640 pixel screen with four times the number of pixels (326 pixels per inch) as the iPhone 4.

 

In simpler terms (for the non-techies), a retina display describes a screen that packs in more pixels than a regular device to enhance the visual quality. However, when an image is displayed on a retina device, it can sometimes appear blurry and not visually appealing.blurry and clear

Until recently, it hasn’t been easy to always render a high quality image. Now there’s a way for a developer to ensure that a mobile user will see the best version of the image.

So how can a developer ensure that image quality is as good as the right-side photo above?

First step is simple, double the size of the image, but don’t override the original image, that will still be used on non-retina devices. Instead, use the same file-name but tag on “@2x” to the end of the image name. It is considered a standard to recognize that this version is twice the size of the original image. Once this image is saved you are done with step one and we can move on to step 2.

Next, determine how the image will be used. There are two different ways that images are used on websites: background images using CSS, or in-line images using HTML. Depending on which of these the image will be used for will determine how to handle switching out the images. When it comes to actually switching out the images, the CSS method will use media queries to determine the pixel ratio, and the HTML method will use JavaScript.

CSS and the @media Query Method

To set specific styles based on the pixel ratio, you will have to use a media query which looks like this: @media (-{browser-identifier}-min-device-pixel-ratio: 2) { }

In this case, the {browser-identifier} refers to moz, webkit, o, or ms depending on the browser you are targeting, so it is best to create a rule for each. Specifically for Opera, this handles the pixel ratio as a fraction and not an integer so instead of “2” it should read “2/1”. Within that media query, you’re able to use selectors to target the element and switch out the background image. Make sure to test this, some browsers may also require the use of background-size styles in order to re-size the background to the right size.

JavaScript Method

The window object in JavaScript has a built in property that describes the pixel ratio. So using the following if-statement you will be able to swap the source based on the appropriate pixel ratios. if(window.devicePixelRatio == 2){}

Once the document is ready or the window is loaded, you will need to target any and all images that need to be switched out. If there are only a couple images, then the best bet is to directly target those images using an id and a selector that directly targets that image. But if there are multiple images you will want to target all images.

Once the images are targeted, for each one, you will want to split the element source based on “.” to create an array of the image-name and the file-extension. Then, just replace the source by tagging the “@2x on to the image-name and then adding the file-extension back on.

Finally, just re-size the image appropriately and then you are done! You now have images on a mobile website optimized for retina displays and looks great on all devices.

Questions? Ask me in the comments!
Photo credit

Leave a Reply

Your email address will not be published. Required fields are marked *

six + 5 =