iIR Redux

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>
view raw snippet.html hosted with ❤ by GitHub

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);
}
view raw iir.css hosted with ❤ by GitHub

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);
}
}
view raw iir-retina.css hosted with ❤ by GitHub

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.

Like it? Share it

Share on LinkedIn

Share on Google Plus

Comments

  1. Does the technique break if background-size isn’t supported? (Among IE, only IE9+ supports background-size.)

  2. Great question. Thankfully, using media queries effectively blocks browsers that don’t understand them from accessing the rules, so IE8 and below will ignore the whole block and would never see the high-res focused rules. IE9—which understands media queries, but does not (to my knowledge) support a pixel ration of more than 1 on any device—would similarly ignore the media query.

    So, to sum up:  it would not cause any issues older browsers or even modern browsers that don’t have any use for the high resolution images.

    • Aaron Gustafson
    • | #