: Mobile Browsers! Do they ignore `` (Responsive Design with Framework Zurb Foundation (Interchange/Noscript)) Experimenting with Interchange Responsive Images I'm experimenting with Interchange by Zurb

@Radia820

Posted in: #Images #Mobile #Optimization #PageSpeed #ResponsiveWebdesign

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

Vote Up Vote Down

Login to post a comment!