Resolution Independent Images for HTML5 based mobile sites & apps

In the last year i’ve done quite a lot of work with HTML5 for mobile Apps. This is both websites running in a mobile browser and actual HTML5 based webview applications.

One of the biggest problem has been the many different screen resolutions across the different platforms, this poses a problem as a design usually is fixed in size regardless of the device but you will want crisper cleaner images on the high resolutions phones such as the iPhone4 and Galaxy Nexus. Now if we just take phones (ignoring tablets) there is a number of resolutions that need to be supported, the number i’m usually concerned with is the horizontal number of pixels. So to cover 90%+ of phones we have 320, 480, 540 and 640.

This’ll mean we need 4 different resolution of images right? And a lot of CSS3 media queries? Doesn’t it?

The answer is no.

The easiest way to solve this problem is to design all you html pages to fit exactly to 320 pixels. Both the iPhone and Android webviews/browsers will scale the html pages up to fit (android takes a bit of fiddling but i’ll cover that another day)

Okay now you are building to 320 pixels wide to fit on a phone all your images must also be the correct resolution for 320pixels too right? but then they’ll look rubbish on higher resolution screens….

Luckily for us there is a way to avoid this problem. Very simply create all the images twice the size you need them to be. So if it’s a logo for example that should be 128×128 on screen, instead blow it up to 256×256. Obviously if you were to now show that image it’d be far too big. The secret is to specify in the width and height attributes the original image size (256×256 in this case) and then resize it using CSS to the actual size you want to show it.

The two images shown here will look exactly the same on your computer, the one on the right is actually 256×256 pixels but is resized using css to 128×128 pixels. On a normal computer screen you see it as a 72dpi 128×128 image just like the one on the left, but on an iPhone 4 for example you will see a high definition retina version in the same 128×128 space (go on give it a try). This is a feature added into modern web browsers and works perfectly well on mobile devices both in the native browsers or in a webview. The code used is displayed below.

<img style="width: 128px; height: 128px;" title="aylogo@2x" src="https://www.andyyardley.com/wp-content/uploads/2012/03/[email protected]" alt="" width="256" height="256" />

This only covers images, but the same can be done for backgrounds. You follow the same procedure and create your background twice the size it should be. You then use the following code in your css style

-webkit-background-size: 128px 128px;
-moz-background-size: 128px 128px;
background-size: 128px 128px;

So there you have it, this can be applied to any website. It’s great if you want to show high resolution images on an iPad, or make your existing mobile site look good on the higher resolution android phones.