Menu icon Foundation
Data-Interchange img vs. Hide & Show img

I've created some responsive image tests using ZURB Foundation. I've compared "hide & show" and "data-interchange (in multiple ways)". Is this analysis correct? Are there other better ways to do this with ZURB Foundation?

I also tried some alternative data-interchange approaches (not listed below) that didn't work, so I omitted them. I also didn't benchmark the performance, or look for unwanted visual artifacts.

 

HIDE & SHOW

Pros:

  • Can have separate alt, width, height, and class attributes for each image.
  • Easy to implement.

Cons:

  • Both images are downloaded when the page loads.

Example:

<img src="http://foundation.zurb.com/sites/docs/assets/img/interchange/small.jpg" alt="small image" width="" height="" class="hide-for-large">

<img src="http://foundation.zurb.com/sites/docs/assets/img/interchange/large.jpg" alt="large image" width="" height="" class="show-for-large">

 

DATA-INTERCHANGE (IMG)

Pros:

  • An image is only downloaded when that screen size is active.
  • Easy to implement.

Cons:

  • Can't have separate alt, width, height, and class attributes for each image.

Example:

<img data-interchange="[http://foundation.zurb.com/sites/docs/assets/img/interchange/small.jpg, small], [http://foundation.zurb.com/sites/docs/assets/img/interchange/large.jpg, large]" alt="shared alt, width, height, and class value might be inadequate">

 

DATA-INTERCHANGE (DIV)

Pros:

  • An image is only downloaded when that screen size is active.
  • Can have separate alt, width, height, and class attributes for each image. 

Cons:

  • More difficult to implement.

Example:

<div data-interchange="[http://localhost:8000/img-small.html, small], [http://localhost:8000/img-large.html, large]"></div>

<!-- where img-small.html contains: -->
<img src="http://foundation.zurb.com/sites/docs/assets/img/interchange/small.jpg" alt="small image" width="" height="" class="">

<!-- and img-large.html contains: -->
<img src="http://foundation.zurb.com/sites/docs/assets/img/interchange/large.jpg" alt="large image" width="" height="" class="">

 

Thank you.

Jim

data-interchangeResponsive Image

I've created some responsive image tests using ZURB Foundation. I've compared "hide & show" and "data-interchange (in multiple ways)". Is this analysis correct? Are there other better ways to do this with ZURB Foundation?

I also tried some alternative data-interchange approaches (not listed below) that didn't work, so I omitted them. I also didn't benchmark the performance, or look for unwanted visual artifacts.

 

HIDE & SHOW

Pros:

  • Can have separate alt, width, height, and class attributes for each image.
  • Easy to implement.

Cons:

  • Both images are downloaded when the page loads.

Example:

<img src="http://foundation.zurb.com/sites/docs/assets/img/interchange/small.jpg" alt="small image" width="" height="" class="hide-for-large">

<img src="http://foundation.zurb.com/sites/docs/assets/img/interchange/large.jpg" alt="large image" width="" height="" class="show-for-large">

 

DATA-INTERCHANGE (IMG)

Pros:

  • An image is only downloaded when that screen size is active.
  • Easy to implement.

Cons:

  • Can't have separate alt, width, height, and class attributes for each image.

Example:

<img data-interchange="[http://foundation.zurb.com/sites/docs/assets/img/interchange/small.jpg, small], [http://foundation.zurb.com/sites/docs/assets/img/interchange/large.jpg, large]" alt="shared alt, width, height, and class value might be inadequate">

 

DATA-INTERCHANGE (DIV)

Pros:

  • An image is only downloaded when that screen size is active.
  • Can have separate alt, width, height, and class attributes for each image. 

Cons:

  • More difficult to implement.

Example:

<div data-interchange="[http://localhost:8000/img-small.html, small], [http://localhost:8000/img-large.html, large]"></div>

<!-- where img-small.html contains: -->
<img src="http://foundation.zurb.com/sites/docs/assets/img/interchange/small.jpg" alt="small image" width="" height="" class="">

<!-- and img-large.html contains: -->
<img src="http://foundation.zurb.com/sites/docs/assets/img/interchange/large.jpg" alt="large image" width="" height="" class="">

 

Thank you.

Jim

James Watkin over 2 years ago

In my Pros and Cons above, I described a preference for not downloading an image until it's needed. I suppose if one isn't concerned about network bandwidth, then one might prefer to have both images download when the page loads so there's no delay to download the image(s) when changing the size of the browser window.

Jim