4

Experimenting with Interchange Responsive Images

I'm experimenting with Interchange by Zurb Foundation to serve various images versions to different devices. For example 200x100 for mobiles, 300x100 for tablets and 600x100 for Desktops! This solution works with JS which is great but I'm a true believer that all websites should work to some degree with JS disabled.

The Code

I'm using the below code which triggers via the foundation-min.js that makes everything work as expected:

<img data-interchange="[/default.jpg, (default)], [/bigger-image.jpg, (large)]">

Fallback Method Suggested By Zurb Foundation

If you want to support browsers with JavaScript disabled, we recommend setting your default image in a tag so that these browsers will have a fallback:

<noscript><img src="/path/to/default.jpg"></noscript>

This sounds like a suitable solution but then looking at Firebug and looking at the net response I can see that when pages are rendered in Firefox it downloads the responsive image and that image in the noscript even through it's not being rendered i.e JS enabled.

The Rant

So the problem is that I want to serve images in the resolutions that looks great but also downloads fast too, afterall that is the main objective of using such methods but since it downloads the images in noscript this competely makes it a useless solution.

The Question

Does all mobiles browsers download images in noscript even when JS is enabled? What else fallback mobile/desktop methods can you suggest (without driving into the code too much, I'm not that lazy!)

  • Maybe imgs in noscript sections are fetched late, after the page has rendered (although that should be obvious in Firebug)?!? Maybe the image in the noscript section should be a low quality / highly compressed version? – MrWhite Jul 5 '14 at 12:06
  • Yep... but small version+fall back version is 2 requests, it defeats the objective of using a smaller version in the first place because then your having 2 download 2 files, so does mobile browsers download noscript images?, I'm hoping that this is a desktop problem only. – Simon Hayter Jul 5 '14 at 13:07
3

My own tests on noscript using firebug's net tab don't actually load any image contained within the noscript tags unless javascript is off.

Likewise, the first poster here has no such problems and points to the w3 specification saying that such tags will be treated as text when js is on. https://stackoverflow.com/questions/14719111/is-an-image-within-a-noscript-tag-only-downloaded-if-javascript-is-disabled

Thoughts for possible reasons for you getting a different result:

  1. Have you updated the config settings of firefox?
  2. Was the code you tested valid html?
  3. Is there any sort of caching going on?
2

According to Mozilla, there support for <noscript> on mobile browsers is good:

  • Android - (Yes)
  • Firefox Mobile (Gecko) - 1.0 (1.0)
  • IE Mobile - (Yes)
  • Opera Mobile - (Yes)
  • Safari Mobile - (Yes)

Mobile browsers that are implementing noscript to the standard should not download any images from within the tags when JavaScript is enabled.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.