The problem with adaptive images
Designer and developer Christopher Schmitt examines the problem of adaptive images and looks at issues such as screen resolution and Retina displays, bandwidth and browser width
Like the James T Kirk character in Star Trek, I don’t believe in no-win scenarios. That is until I come across the idea of serving adaptive images in responsive web design.
Adaptive images isn’t just about the issue about scaling images, which has already been demonstrated by Ethan Marcotte (see unstoppablerobotninja.com/entry/fluid-images). It’s about dealing with other issues and variables to keep in mind when delivering the best user experience. Variables such as:
- Screen resolution
- Bandwidth
- Browser width window
The problem with trying to determine the best image to send to the browser is these kinds of factors can be independent of each other. And that's the problem:
Knowing the value of one item, such as screen resolution, doesn’t mean you get the full picture of the user’s browser experience.
Advertisement
Tiny displays
First, the iPhone 4 introduced the notion of the Retina display. Retina display is the inability to distinguish a computer display from that of a piece of paper when using the device.
Before the iPhone 4 one might have gotten away with letting just the browser width dictate, since the idea was that the smaller the screen a site’s visitor has, the slower your internet connection is as well. However, that’s not the case as displays are becoming great at compacting lots of image data in a small screen.
CSS and retina displays
To detect if a site visitor is using a Retina display, use the vendor-prefix property webkit-min-device-pixel-ratio with a value set to 2 in media queries. If you want a separate style sheet that contained only CSS rules for delivering retina images, the CSS code would look like this:
- <link
- rel="stylesheet"
- type="text/css"
- href="/css/retina.css"
- media="only screen and (-webkit-min-device-pixel-ratio: 2),
- only screen and (-moz-min-device-pixel-ratio: 2),
- only screen and (-o-min-device-pixel-ratio: 2),
- only screen and (min-device-pixel-ratio: 2)"
- />
When you want to write CSS rules within a style sheet, you can write the retina display detection code with the @media rule :
- @media screen and (-webkit-min-device-pixel-ratio: 2),
- screen and (-moz-min-device-pixel-ratio: 2),
- screen and (-o-min-device-pixel-ratio: 2),
- creen and (min-device-pixel-ratio: 2) {
- .image-class {
- background: url(filename-mobile@2x.png);
- background-size: 100%;
- }
- }
While on a broadband connection with a fast computer, you might not notice the drag, but users browsing on a mobile network will.
Thought experiment
There are various challenges to delivering the appropriate image in an adaptive web environment. To help get our heads focused on the issue, let’s think of this problem in another way with the following thought experiment:
Let’s say a visiter comes to your site with the iPad 3 (officially promoted by Apple as “the new iPad” when it came out). This is the first tablet that came out with retina display that rivals and even surpasses most desktop displays and high-definition television sets. (Also see 15 top tips for developing for the new iPad 3). In addition, the iPad 3 has the ability to connect to the internet through mobile and wireless connectivity.
Since the screen of the iPad is the same dimension as the iPad 2, the browser “width” is going to be the same. With that as the setup, here are the questions:
- Realising that the browser width isn’t helpful to determining the best image and if a site visitor is surfing the web on an iPad 3 with 3G, which image do you deliver on your site?
- Do you deliver the low-resolution, mobile friendly version?
- Or do you let the iPad 3 have the larger version, but with the longer download time?
Measure a few additional times, cut a couple more
The ultimate solution to delivering responsive web design images is to have an image download once and that image would always be the appropriate image for each device and browser it finds itself in. However, that’s not possible at this time.
The best approach in most current solutions is to set mobile friendly images as the value for SRC attributes for image elements. It turns out that there are many patches or polyfills to this problem. Actually, there are 22 at the last count.
Working with Chris Coyier and others, we’ve made a spreadsheet (see telejec.tv/JdvEkt ) that marks the benefits and characteristics of each solution.
Each solution is different, offering their own sets of pros and cons. Some require backend support, others are only client-side solutions. Check out the list of solutions and find the right solution for your needs.
Don't miss Christopher Schmitt's Tips and tricks for Retina images in responsive web design.
Header image by Mrs Logic.
6 comments
Comment: 1
Don’t use unprefixed properties / values / media features that are not specified. You won’t find 'min-device-pixel-ratio' in the latest working draft, not even in the latest editor’s draft.
Is that media feature useful with any other prefix than '-webkit-' anyway?
Comment: 2
Comment: 3
Comment: 4
Comment: 5
The code lines containing 'screen and (min-device-pixel-ratio: 2)' (and 'creen…[sic!]' respectively ;-)) are wrong because there is no such media feature 'min-device-pixel-ratio' specified in CSS. As Lea said in her ALA article, “Any -webkit- feature that doesn’t exist in a specification (not even an Editor’s draft) is not CSS3.”
This Webkit feature might slip in the spec in the future; it might not. And if it does, it might still undergo changes on its way. That’s what makes the inclusion of the unprefixed 'min-device-pixel-ratio' dangerous.
And as far as other vendors have not taken up Webkit’s idea and have not implemented this feature (or would do so in foreseeable future), there’s little reason to include '-moz-min-device-pixel-ratio' or '-o-min-device-pixel-ratio'. BTW, you’ve left out '-ms-' on purpose?
Slightly off topic, but still covering the same ground: Unprefixed 'background: linear-gradient(top, black, white)' is also wrong because it is not spec-conform. http://www.1stwebdesigner.com/css/mastering-css-gradients-in-less-than-1...
Comment: 6
If you re-read the article you will hopefully notice a few typos and mis-used words (e.g. "Start Trek", "wherein"). In general the sentences in the article tend to have some grammatical issues that obfuscate their meaning, but my biggest complaint is the following sentence:
"Retina display is the inability to distinguish a computer display from that of a piece of paper when using the device."
I agree that understanding retina display is important to understanding the overall problem, however your sentence is written in a confusing manner and fails to accurately explain 1) what retina display is and 2) why it matters. "Retina display" is not an "inability" to do anything, it is simply a marketing term for a type of screen.
More precisely, retina display describes a screen with a pixel density that may be indistinguishable from analog media such as ink on paper.
Perhaps you consider this a nitpick or don't see the difference between what you wrote and what I am saying, but if your goal is to explain the issue with authority you should strive to provide more grammatically correct, accurate and precise definitions for the key terms.