by Flo Preynat

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.

<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.

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.

Responsive Images with foundation

Testing a smaller width will result in downloading the small version of our image (56KB) and the fallback, hence 74KB of media.

Responsive Images with foundation

Testing a small device width will result in only downloading the smallest version of our image, hence 18KB of media.

Responsive Images with foundation

Let’s make sure our fallback works and disable Javascript. No problems, we get the 18KB file in display.

Responsive Images with foundation

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.

Most Recent Posts

Special Recent Posts

Sip: a color picker refreshingly simple indeed

Sip: a color picker refreshingly simple indeed

July 10th, 2014

I've just discovered Sip, a color picker app for Mac users. "Just discovered" since it's been around[...]

Perch – the CMS that does not pollute your web design workflow

Perch - the CMS that does not pollute your web design workflow

July 7th, 2014

I have recently finished a project based on Perch, the clever 'little' CMS created by edgeofmyseat.c[...]

Responsive video code snippet

Responsive video code snippet

June 29th, 2014

More of a reminder than a pure detailed blogpost, this code snippet will be my go-to resource when I[...]

Project Naphta: a nifty extension to play with text embedded in images

Project Naphta: a nifty extension to play with text embedded in images

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'[...]

Free photos for your web design projects

Free photos for your web design projects

June 4th, 2014

Nothing beats using a real professional photographer when working on a cool project. You can be the[...]

Comments

  1. Mathias says:

    Hi.

    Cool feature. Didn’t try Zurbs Foundation yet.

    Do you know a similar solution with jQuery and Bootstrap?

  2. 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.

  3. 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.

  4. 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.