Skip to main content
Double the Pixels, Double the Fun: Coding for High-Resolution Devices

This just in: A website should work and look great on any platform. Responsive web design is a standard, not a feature. However, if you find yourself working on a website that is not going to be made responsive in it’s first phase of launch, you can still make sure it looks good on high-resolution devices. 

High-Resolution Devices

Have you noticed how much sharper images appear on an iPhone, iPad, or high-resolution Android device? High-resolution devices can make your website’s awesomeness leap off the screen, or they can reveal its pixelated shortcomings. Take, for example, one of our most recent projects: Sarasota in Shorts. The project wasn’t ready for mobile or tablet in it’s first phase, but it still needed to look good on high-resolution devices. Images assets need to be created for both low and high-resolution devices, but what then?

CSS Images assets

There are two ways to serve image resources to the browser: background images and inline images. A background image will be set in the style sheet, and the inline image will be set in the markup of the page. When calling the background image, it is necessary to also call a separate style for our hi-res assets.

[css]@media only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)[/css]

The code above is calling a device pixel ratio of 2, using the default as well as a few different browser prefixes to future-proof the code. Basically, the goal is to fit twice as many pixels into the same amount of space for each image, so the code is calling out to those devices that support this technology. Once the CSS is called from the media query, the correct asset can be served. The high-resolution assets are twice the size as the default, so this will need to be reset.

[css]div{background-image:url(../img/sprite.png);background-size:150px 150px}[/css]

The background size is declared, and the image is resized to the desired scale for presentation.

 

Javascript detect

Images that are in the markup need a different technique from CSS; Javascript will be used to detect the device ratio and rewrite some content.

[javascript]// Set pixelRatio to 1 if the browser doesn't offer it up.if (window.devicePixelRatio == 2) {var images = $("img.hires"); // loop through the images and make them hi-res for(var i = 0; i < images.length; i++) {// create new image name var imageType = images[i].src.substr(-4);var imageName = images[i].src.substr(0, images[i].src.length - 4);imageName += "@2x" + imageType;//rename image images[i].src = imageName;[/javascript]

The above code first looks for the device pixel ratio, then appends some additional markup to images with the class of “hires”. By changing the file name from “image.jpg” to “image@2x.jpg”, the code now calls the high-resolution asset.

These techniques get more complicated with a responsive website, but the fundamentals are the same. First call the device and ask for the ratio, then serve the correct asset. These are the basic steps to call the correct image asset for high-resolution devices, and learning them will insure that any website you code will look pixel-perfect on any device.