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.
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.
<div class="row"> <img src="smallest.jpg" data-interchange=" [smallest.jpg, (only screen and (min-width: 1px))], [small.jpg, (only screen and (min-width: 600px))], [large.jpg, (only screen and (min-width: 1100px))]"> </div>
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.
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.
Demo is over at Codepen.
Your thoughts are obviously more than welcome.
Most Recent Posts
Special Recent Posts
July 7th, 2014
I have recently finished a project based on Perch, the clever 'little' CMS created by edgeofmyseat.c[...]
June 9th, 2014
We've all been there. You want to select a good chunk of text on a website, only to realise you can'[...]