I, like many others, was blown away by Ethan Marcotte’s book Responsive Web Design. The combination of fluid grids, media queries and flexible media are a stroke of genius.
But one of the issues with using flexible images is the need to load a large image which is then scaled down using CSS:
img {max-width: 100%;}
I’ve written a jQuery plugin called Doubletake that dynamically resizes images as necessary. It is based on the width of the containing element rather than the screen size so it doesn’t employ cookies to store the viewport width. It’s also different from Filament Group’s approach from last year in that it’s entirely client side and isn’t limited to just two image sizes.
It can be configured to watch the window resize event but it’s intended mainly for use on the initial page load.
It’s not perfect by any means. Because it’s client side, it makes two image requests – loading the mobile-sized image initially and then scaling it up if necessary which is hardly ideal. I’m sure the JavaScript could be improved a great deal too.
It’s little more than food for thought really – an alternative take on the solutions for responsive images that have been proposed so far – but when combined with dynamic resizing tools like SLIR and src.sencha.io I think it’s quite an effective approach.