I’m attending the Responsive images meetup on September 16th at Mozilla’s Paris headquarters, and I’m very much looking forward to it.
It should be an interesting event (*) in the wake of WebKit’s srcset implementation. I’m really keen to see what other browsers have got lined up, and it’s good to take part in constructive meetings, with the hope to see this responsive image issue resolved… At least one of those days.
While waiting for the event to happen (which I shall surely relate in a blog post), I have decided to take some time today to show you one of the responsive solutions available out there, with a closer look at Zurb Foundation’s interchange.
The Concept
In a nutshell, the Foundation Interchange component uses media queries to load the images that are appropriate for a user’s browser, using the data-interchange attribute to specify media queries and their associated image files. It’s javascript dependent so what you do is setup a fallback image (giving the default image the smallest file size available).
In practice
Quick demo then, with a simple foundation page, a few versions of a cool picture (**) of the guy who’s started this whole responsive design malarkey (Mr Ethan Marcotte, round of applause) and the inevitable Codepen.
How easy was that? You can use Foundation’s pre-set media queries (such as small, medium, large, portrait, landscape, retina) or set your own like I just did above.
The result
I used three versions of the picture in my demo. The large (2000 × 1331) for device width above 1100px, the small (900 × 599) for device width between 600px and 1100px, and the smallest (480 × 319) used for small devices (and for javascript-disabled users).
Testing a large browser will result in downloading the large version of our image (353KB) and the fallback version (18KB), hence a total of 371KB of media.
Testing a smaller width will result in downloading the small version of our image (56KB) and the fallback, hence 74KB of media.
Testing a small device width will result in only downloading the smallest version of our image, hence 18KB of media.
Let’s make sure our fallback works and disable Javascript. No problems, we get the 18KB file in display.
Demo is over at Codepen.
Verdict
Not the best solution, a bit slow on the media file switch if you resize the browser, javascript dependent, but still… quite a promising plugin from Zurb. They’re bound to move this concept to other types of media and make it more efficient. I certainly enjoy the simplicity of it.
Your thoughts are obviously more than welcome.
Notes:
(*) driven by Responsive Images Community Group members Marcos Caceres and Yoav Weiss.
(**) Credits to Anton Peck for this cool picture of Ethan.
My name is Flo Preynat and I am the freelance webdesigner and developer behind shoogle designs. I live in France and specialize in responsive web design. Give me a shoogle or get in touch with me on twitter.
Follow @shoogledesigns
Hi.
Cool feature. Didn’t try Zurbs Foundation yet.
Do you know a similar solution with jQuery and Bootstrap?
Hi Mathias,
Natively, I don’t think so. You would need to add an additional component such as Adaptive Images.
thx,
flo
Will take a look into this, need a good solution for our new site. Ive seen a few solutions, not quite sure which is going to give us the best performance and end user experience.
Mathew,
Maybe check out Pixtulate which can scale, crop and format your images on the fly server-side. This way you can just use your standard tag and provide the exact size you need as query parameters in src. No need for additional markup.
It’s a good approach but I don’t like the fact that on bigger screen you’ll end up downloading 2 images. Even if the fallback image is pretty small I’ll get a double HTTP request.