Devices and their capabilities are changing all the time. Indeed, it isn't just different viewport sizes we must contend with. Already, we need to consider viewports that have higher resolution displays. The iPhone 4 was the first widely used device to implement a high-resolution display. Its screen is 960 by 640 pixel resolution at 326 pixels per inch, double the resolution of the prior version (iPhone 3GS) and double the pixel per inch density of laptops such as the 2011 15" MacBook Pro. Expect many more devices from tablets and laptops to desktop screens to follow suit. Thankfully, our responsive tools already provide us with the capabilities to support enhancements for these devices.

Let's suppose we wanted to load a higher resolution version of a site logo for users of high-resolution displays. It's a situation I encountered when performing a recent redesign of my own website at http://www.benfrain.com. Here is the markup for my logo area:

<div class="logo">
  <a href="http://benfrain.com/"></a>
</div>

And here is the CSS rule that loads the logo:

  #container header[role="banner"] .logo a {
    background-image: url("../img/logo2.png");
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    height: 7em;
    margin-top: 10px;
}

Initially, the logo looked like the one shown in the following screenshot:

Perfectly functional but I wanted the logo as crisp as possible on higher resolution displays. So, I made two further versions of my logo (one for the default state and one for the hover state) at double the size of the existing logo and named them [email protected] and [email protected]. I then added the following media query in my CSS:

@media all and (-webkit-min-device-pixel-ratio : 1.5) {
  #container header[role="banner"] .logo a {
    background-image: url("../img/[email protected]");

  }
  #container header[role="banner"] .logo a:hover {
    background-image: url("../img/[email protected]");
  }
}

The media query targets devices with a minimum device pixel ratio of 1.5. Therefore, high-resolution displays like those on the iPhone 4 and later come into this category and render the styles within. You'll notice this rule includes a –webkit- prefix. As ever, remember relevant prefixes for the devices you need to target.

And now, with high-resolution devices, the higher quality version of the logo is loaded instead, as shown in the following screnshot:

Admittedly, the difference is subtle. It's probably best to look at the differences in the flesh to appreciate the difference but the more detailed the image, the more likely it is to appear beautifully crisp on a high resolution display.

There are considerations to using this technique. Larger images equate to larger file sizes and longer download times so again, just because you can, doesn't mean you should.

Where supported, Scalable Vector Graphics (SVG) alleviate many of the image scaling issues that we currently face. As the name suggests, they are designed to produce images that can display crisply at whatever scale is needed. However, media queries and SVG don't help with inline photos for high resolution displays. You'll need to implement JavaScript based solutions in those instances.