Not only do you need to accommodate design layouts for mobile devices, but you also need to take into account high pixel density displays, like Apple’s Retina devices. These displays have a pixel density up to 326 pixels per inch compared to standard desktop monitors which are around 100 ppi.
Responsive Web Design is a simple technique until you consider images. There are a number of issues:
- Bandwidth can be saved if smaller images are sent to smaller-screen devices.
- On lower resolutions, it may be preferable to show a cropped image with the main detail rather than a resized view of the whole image.
- Devices with higher-density displays (Retina) could be sent higher resolution images.
I have a suspicion the problem has been overstated. Few of us will ever bother to create numerous device-targeted images; there are too many options and life is too short. That said…
Are Displays So Different?
If we look at the lower end of the display spectrum, we find mobile phones. Even the cheapest smartphone has a 800×480 display. That’s approximately half the dimensions (quarter the area) of a mid-range laptop but it’s still a reasonable resolution. And remember the browser runs full-screen which few people would do on a PC.
To the other extreme we have double-density displays, commonly known by Apple’s trademarked term — Retina. Recent iPads have a native resolution of 2,048×1,536 or 264 pixels per inch where individual pixels can be too small for the naked eye. To ensure websites and apps remain usable, the device reverts to a standard 1,024×768 resolution but uses the extra pixels for smoother fonts and icons.
My point is: display specifications are converging. High-end mobile resolutions already match or exceed typical PC screens and display densities can only go so far; why create triple-density displays when double-density pixels are already invisible? The need for responsive images will reduce as hardware improves.
My Images are Blocky!
I’m yet to be convinced Retina image quality is a major problem…
- Images are usable.
- Relatively few people (currently) own double-density devices.
- The majority of Retina devices are smartphones and tablets. Should we be sending higher-resolution images to gadgets with more limited processing power and network availability?
- Finally, why are we adding high-resolution photographs to our websites when bandwidth and responsiveness remain so important?
Of course, none of this matters when your boss demands “less-blocky” images on his iPad. However, I would recommend a more pragmatic cross-browser approach in preference to larger images, i.e. replace bitmaps with SVG images, CSS3 effects or webfont icons when possible (refer to 5 Ways to Support High-Density Retina Displays).
The Industry Decides
I may be slightly dismissive, but many people care about the responsive image problem. A recent meeting of W3C members finally reached a consensus and vendors are likely to support the imagesrcset attribute proposal. When implemented, you will be able to use code such as:
<img src="normal.jpg" srcset="midres.jpg 1.5x, highres.jpg 2x" />
Devices with standard resolutions or browsers which don’t support srcset will load normal.jpg. Devices with 1.5x density screens will show midres.jpg and 2x density screens will show highres.jpg.
Unfortunately, pixel density is not the only factor and the viewport width (and possibly height) should also be considered. Therefore, srcset could eventually support the following cryptic syntax:
<img src="x.jpg" srcset="y.jpg 800w 1x, y.jpg 400w 2x, z.jpg 1200w 1x, z.jpg 600w 2x" />
In this example, y.jpg is loaded on standard-resolution devices with a maximum 800 pixel width and double-density devices with a maximum 400 pixel width.
srcset is hard to read, prone to errors and I suspect it will be too easy to incorrectly target or miss a range of devices. However, it was considered more backward-compatible and easier to implement than other proposals.
Of course, the proposition could still change. I have a horrible feeling we’ll all be using double-density displays and extra-large images before this becomes a usable standard!
check out the http://www.webkit.org/demos/srcset/
With just a few clicks, you just magically created a integration test for your registration process.
Pranjithkumar's Blog 