Responsive images using css only

One of the biggest challenges on responsive sites is handling images across different size screens and resolutions. Here we are going to look at the future support for it and also a simple method to solve this problem using css only.
When you are building a responsive site, you want to use high quality images to show off your content. However this means a tradeoff as the user needs a faster internet connection and ideally a larger screen to view the content. The solution to this problem is responsive images, where you can change the image size/quality based on the users device.

There are plans to include responsive images in the new w3 specification for browsers, but as of 2014 it has patchy support: http://caniuse.com/#search=responsive

Another solution out there is to use the Picture polyfill to bring support to more browsers: http://scottjehl.github.io/picturefill/ However this involves using the library, javascript and will require more processing power on a mobile browser to render the page. Lets look at a way we can do this with pure css!

First off we need an image embedded into the page using html:

<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Photograph_of_1936_of_a_Cabin_Behind_the_Amoureaux_House_in_Ste_Genevieve_MO.jpg/320px-Photograph_of_1936_of_a_Cabin_Behind_the_Amoureaux_House_in_Ste_Genevieve_MO.jpg" alt="" />

This will load the smaller size of the image into the page. Next we add some css to change the image url. Note you may not need so many media queries, depending on the resolutions and sizes you wish to support. I've included the main sizes here:

/* 48em = 768px */

@media (min-width: 48em) {
    img {
       content:url("http://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Photograph_of_1936_of_a_Cabin_Behind_the_Amoureaux_House_in_Ste_Genevieve_MO.jpg/640px-Photograph_of_1936_of_a_Cabin_Behind_the_Amoureaux_House_in_Ste_Genevieve_MO.jpg");
    }
}

/* 64em = 1024px */

@media (min-width: 64em) {
    img {
       content:url("http://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Photograph_of_1936_of_a_Cabin_Behind_the_Amoureaux_House_in_Ste_Genevieve_MO.jpg/1024px-Photograph_of_1936_of_a_Cabin_Behind_the_Amoureaux_House_in_Ste_Genevieve_MO.jpg");
    }
}

/* 80em = 1280px */

@media (min-width: 80em) {
    img {
       content:url("http://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Photograph_of_1936_of_a_Cabin_Behind_the_Amoureaux_House_in_Ste_Genevieve_MO.jpg/1280px-Photograph_of_1936_of_a_Cabin_Behind_the_Amoureaux_House_in_Ste_Genevieve_MO.jpg");
    }
}

If you wish to support screens of different pixel densities you can optionally add more media queries:

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 0em),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 0em),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 0em),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 0em),
only screen and (                min-resolution: 192dpi) and (min-width: 0em),
only screen and (                min-resolution: 2dppx)  and (min-width: 0em) { 
    img {
       content:url("http://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Photograph_of_1936_of_a_Cabin_Behind_the_Amoureaux_House_in_Ste_Genevieve_MO.jpg/640px-Photograph_of_1936_of_a_Cabin_Behind_the_Amoureaux_House_in_Ste_Genevieve_MO.jpg");
    }
}

All browsers that support media queries + css content:url will work with this method including: IE9+, Firefox, Safari and Chrome. The only disadvantage is that the low quality is always loaded by default. Unless you move the img src to a media query.

You can see a full working example here:
And here is another version with extra rules to support retina screens:
http://jsfiddle.net/kmturley/t1k5rs18/1/