Responsive Images, Now & The Future · Designed by a Turtle

With the huge flurry of mobile users now using the internet and browsing the web on those tiny screens of theirs – websites must adapt to accommodate this. One of the many big issues at the moment in the web design community is responsive design and if it should be used over mobile only sites (Google thinks so). If you are one of the lucky few making a new responsive design or trying to make your current design responsive then this article might just help you with making your images responsive.

Here are a couple of methods to making your images responsive.

Method 1: CSS#

The simplest method is just to add a max-width of 100%, which resizes the image, and an automatic height which keeps the image in proportion (only really needed if height has been explicitly specified in the HTML img tag).

Advantages:

Very simple to implement.
Doesn’t require any JavaScript or server side code.

Disadvantages:

Still loads a full size image (inefficient to load a 1024×768 image on slow mobile internet with a 480 x 800 screen).
Max-width not supported by IE6.

img
{ 
	max-width: 100%; 
	height: auto;
}

Demo{.btn.btn-primary}

Method 2: Server-Side (PHP & Htaccess)#

Okay, as a pre-warning – this method does also require a little JavaScript. This is the method of using something like AdaptiveImages to load a correctly sized image based on the user’s screen size. Firstly, it sets a cookie using JavaScript which gets read by the htaccess file. This then gets redirected to a PHP file which finds and serves the correct image at the correct size.

Advantages:

Serves up smaller image file sizes for mobile devices (therefore quicker & more efficient).

Disadvantages:

Requires the editing of an htaccess file – which some might consider complex.
Requires PHP5+, Apache2 & GD lib (which is normally default with PHP).

Method 3: jQuery#

Update 11/07/12: As pointed out by Jesse Chase in the comments, a jQuery plugin called jQuery Picture is available. It works with Nicolas Gallagher’s proposition (mentioned in the next section) and uses jQuery to then load the appropriate image. It can either work with a proposed tag or with an already valid, but maybe inappropriate,

. All it takes to make a picture responsive once it’s setup is a small line of jQuery:

$(function(){
    $('figure.responsive').picture();
});

Advantages:

Simple to Install
Cross-browser

Disadvantages:

Uses JavaScript, which can be turned off (could affect accessibility?)
Requires jQuery

Proposed Methods (The Future – maybe?)#

Before you ask, these methods are just proposals at the moment.

Nicolas Gallagher…

… on his blog, proposed using CSS3 media queries as well as the markup that the filament group proposed which uses the normal src to serve a small image and a data-fullsrc attribute to specify the location of a larger image. The code to illustrated this is shown below and has been taken from Nicolas’ blog post.

<img src="image.jpg"
     data-src-600px="image-600px.jpg"
     data-src-800px="image-800px.jpg"
     alt="">

@media (min-device-width:600px) {
    img[data-src-600px] {
        content: attr(data-src-600px, url);
    }
}

@media (min-device-width:800px) {
    img[data-src-800px] {
        content: attr(data-src-800px, url);
    }
}

Yoav Weiss…

… talked about his proposal, which is based on the one above in that it uses CSS and media queries to determine the image to be loaded – but it takes into consideration the nature of a dynamic website with a high turnover of content (like CNN he mentions) by not requiring the full URL in CSS (even though it’s specified in the HTML), but just adding a prefix. He proposes code like this:

img
{
    src-prefix: "big_";
}

@media screen and (max-width: 600px)
{
    img
    {
        src-prefix: "small_";
    }
}

Conclusion#

Responsive images will only become more of an issue with the expansion and versatility of the web. Although many methods can currently be used to achieve responsive images, with their wide use a generally accepted way will likely arise. Hopefully the W3C will standardise a method and browsers will implement it (or the other way around).

Personally, I like Yoav’s method of prefixing with CSS the best. In an idealistic world it would be an easy solution to a deep problem, but what if you were not change the image names (in some peculiar scenario) and they were suffixed instead? In which case the method proposed by Nicolas would be a safer option because it specifies the whole URL.

What do you think? Let me know in the comments.

p.s. Also, some great articles on the subject by Mat Marquis, Chris Coyier & Robert Nyman.

p.s.s. Do you like the Kitten? The photo was taken by Paul Reynolds.

Update 15/05/13: As pointed out by R. Palmer, there’s an interesting article by the Filament Group on the compression of these images.

Method 1: CSS#

Advantages:

Disadvantages:

Method 2: Server-Side (PHP & Htaccess)#

Advantages:

Disadvantages:

Method 3: jQuery#

Advantages:

Disadvantages:

Proposed Methods (The Future – maybe?)#

Nicolas Gallagher…

Yoav Weiss…

Conclusion#

About the Author: Edd Turtle