Responsive web design allows our content to shine no matter the screen size, so it can be accessed easily on multiple devices.

However, devices are also starting to vary based on screen resolution. Can responsive web design handle that as well?

I believe it can, and it must. Here’s my take.

Right now, the iPhone 4 has a retina-display, with much higher pixels per inch than an iPhone 3GS.

The 3GS is 165 ppi, the iPhone 4 326 ppi, the iPad 132 ppi. That’s just for iOS devices. Resolutions abound.

If you are using a responsive web design, with a fluid grid, the size of your images is likely determined by percentages. So your image will take up the same visual space on a high-resolution screen: that part at least is not a problem.

But how will that image look? Is your image 72 ppi, as most web images are? 92? How will that look when scaled up to 326 ppi? Probably not as crisp, right?

One thing I have heard people talking about is putting the smallest size image possible in the HTML, one appropriate for a 320px wide screen, for example. Then, use Javascript to swap out larger-size images as the browser width gets bigger. That way, ideally the user only downloads the image at the size that is needed, rather than slowing down a mobile page load with a large image, when it will only be shrunken down to a much smaller size through max-width: 100%.

Shouldn’t we be considering doing the same thing for higher-resolution screens?

Start with a low-res, small-size image in the HTML. Then, as the browser-width increases, switch in larger-size images, and as the screen-resolution increases, switch in images with the appropriate size and resolution.

Doing this manually would seem pretty labor-intensive: the combinations of image size and resolution are many. You almost would need to have a master image, then use some sort of server script spit out a bunch of different sizes and resolutions. This would obviously take up a good amount of server space.

However, the end result would be images that load as quickly as possible given the screen size and resolution, while also letting images be truly stunning on high-resolution devices.

There is a media query for resolution: since this would require Javascript, I am not sure if this would help or not.

With rumors that the next iPad will have a retina display as well, and some more obscure rumors that Mac displays could eventually be higher resolution too, this is a problem we would be wise to tackle sooner rather than later.