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