Mobile Browsers! Do they ignore `<noscript><img>` (Responsive Design with Framework Zurb Foundation (Interchange/Noscript))

Question

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!)

Answer 1

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?

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