A few years back, I wrote a little article celebrating the fact that you could actually apply image-replacement techniques to images themselves. At the time, I was using it mainly for converting black and white printer-friendly logos to colorized or reversed alpha-transparent PNGs, but I postulated that the technique could also easily be used to replace high resolution print-friendly imagery with web-ready graphics (impracticle as that may be). Little did I know, six years later we’d see the advent of ultra-high resolution handheld devices like the iPhone 4 and iPad 3. Hell, at the time I was still rocking a Treo.
In a few recent projects, we’ve been offering high resolution graphics—mainly logos, icons and the like only for now as we’re not looking to kill anyone’s mobile bandwidth allotment—to devices with a pixel density of two or more (@media screen and (min-pixel-density:2)). Interestingly, the same technique I came up with years ago is perfectly suited for this purpose in addition to letting you set a small, low resolution baseline image (mobile-first, ya know), replacing it with larger and/or higher resolution images as real estate or device supports it.
For those not keen to read my original article, here’s the jist (or gist—harharhar): take your favorite image-replacement technique and apply it to an img element. As a means of demonstrating the concept, here’s two images:
| <p id="social-links"> | |
| <a href="…"><img src="fb-print.png" alt="Like us on Facebook"/></a> | |
| <a href="…"><img src="twitter-print.png" alt="Follow us on Twitter"/></a> | |
| </p> |
With those in place, you simply apply your preferred image-replacement technique to the img elements. I’m partial to Leahy/Langridge:
| #social-links img { | |
| background: center center no-repeat; | |
| display: inline-block; | |
| height: 0; | |
| width: 25px; | |
| padding-top: 25px; | |
| overflow: hidden; | |
| } | |
| #social-links img[src*=fb] { | |
| background-image: url(fb-screen.png); | |
| } | |
| #social-links img[src*=twitter] { | |
| background-image: url(twitter-screen.png); | |
| } |
All that’s required to re-purpose this technique for high resolution images is to add in the background-size property (set to the dimensions of the original low density image, of course):
| @media only screen and (-moz-min-device-pixel-ratio: 2), | |
| only screen and (-ms-min-device-pixel-ratio: 2), | |
| only screen and (-o-min-device-pixel-ratio: 2), | |
| only screen and (-webkit-min-device-pixel-ratio: 2), | |
| only screen and (min-device-pixel-ratio: 2) | |
| { | |
| #social-links img { | |
| background: top left no-repeat; | |
| background-size: 25px 25px; | |
| display: inline-block; | |
| height: 0; | |
| width: 25px; | |
| padding-top: 25px; | |
| overflow: hidden; | |
| } | |
| #social-links img[src*=fb] { | |
| background-image: url(fb-2x.png); | |
| } | |
| #social-links img[src*=twitter] { | |
| background-image: url(twitter-2x.png); | |
| } | |
| } |
I think it’s a pretty useful technique overall. Of course it’s only really useful for presentational images; it doesn’t really make sense for content images. And, of course, there’s still the question of whether it’s advisable to load a high-resolution image for someone who may be on a metered connection. If you are concerned about that sort of thing, take heart that the W3C is working on the issue. In the meantime, however, you may want to consider Foresight.js.
