Responsive Images – #intro

Since I first saw Simon Collison’s beautiful and responsive site ( I’ve been enamoured by the prospect of Responsive Web Design.

Some other great examples of RWD in action here:

A limitation in most Responsive Web Design implementations is due to it’s lack of control over the image elements of a site – though this is a limitation of CSS in it’s current form, rather than Responsive Design per se. CSS can control the background image elements for a layout, but not the foreground images.

For the majority of my retail clients the foreground images and other rich media elements are very much a pivotal aspect in their user’s experience – both in visual engagement, and in page load performance. It is their virtual shop front, and must allow for both an inspiring window display, and the ability to easily hold items up for closer inspection, without tripping over superfluous articles and displays standing in their way.

There were some interesting articles (for example by Filament Group) late 2010 -> mid-2011 around the use of cookies and .htaccess to facilitate responsive images, but in my recent attempts to recreate those solutions (or use those older demos) I could not get them to reliably work across the majority of browsers, perhaps due do the browser updates in that time period.

When it comes to ‘responsive images’ (a.k.a. Fluid Images) I really like Jeremy Keith’s concise perspective:

  1. The small image should be default.
  2. Don’t load images twice (in other words, don’t load the small images and the larger images).

It was also that post on Adactio  that led me to the examples at which I found most real-world usable, and last week I finally started to have some success with one technique using the <noscript and jQuery.

I plan to further explore the natural combination of Responsive Images and a capable Image Serving platform (such as Scene7) in some experiments that I am planning on running: