Techniques for Context Specific Images

Chris Coyier //

One of the shortfalls of using CSS media queries as the only ingredient of a mobile solution is that the same content gets served to both desktop browsers and mobile devices (which theoretically are slower and have less network speed).

Serving the same HTML to both... not as big of a deal. Serving up images that are many times bigger than they need to be on mobile, that's more of a problem. A number of smart people have tried to solve this problem, so I just wanted to highlight their work here:

The CSS3 Way

While this one by Nicolas Gallagher currently doesn't work in any browser, I think it's my favorite. You put the smallest of the images you have as the default source, then list the URL paths to larger versions as HTML5 data attributes.

<img src="image-mobile.jpg"
     data-src-desktop="image-desktop.jpg"
     alt="">

Then you use CSS generated content to replace the graphic with the larger one, via media queries, if the screen width indicates it's a desktop.

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

Even the current dev version of the CSS spec, which has been trimmed way down from the original, retains this ability.

Nicolas clearly outlines the potential downsides of this in his article, I feel like each of them is addressable with future technology.

The JavaScript Way

While the above CSS3 way is theoretical at this time, this JavaScript technique by Scott Jehl of the Filament Group is ready to use (if still experimental).

This technique is actually a combination of JavaScript, HTML, and .htaccess (so Apache servers only). The readme file explains it best:

As soon as rwd-images.js loads, it tests the screen width, and if it's large, it inserts a BASE element into the head of your page, directing all subsequent image, script, and stylesheet requests through a fictitious directory called "/rwd-router/". As these requests reach the server, the .htaccess file determines whether the request is a responsive image or not (does it have a ?full query parameter?). It redirects responsive image requests immediately to their full size, while all non-responsive-image requests go to their proper destination through a URL rewrite that ignores the "/rwd-router/" segment.

The Cookie Way

Keith Clark has a method of storing a cookie which contains the screen size of the current device. That cookie can be tested before images are served and used to decide what size to serve.

It works by setting a cookie of the screen dimensions.

document.cookie = "device_dimensions=" + screen.width + "x" + screen.height; 

Then images are actually routed through a simple script. The file name is a parameter.

<img src="images/?test.png">

The script reads the cookie and serves up the appropriate image. See the full article for all the code.

Any others?

Have you see any other projects that have attempted to tackle this problem? I'd love to keep this article up to date with the best methods.