Foundation’s Interchange is a responsive content solution that enables resource requests to adapt according to available screen real estate. Images are a particularly applicable use-case for Interchange since a massive, landscape photo doesn’t have the same effect on a phone as on a 27-inch monitor.
When you expect to present an image at every break-point, Interchange as described in the documentation works nicely: the last rule to evaluate to true will be the resource that gets loaded. But what about situations where you want to display an image on say, large and medium screens while displaying nothing on small devices?
Inside the “data-interchange” attribute, you might specify an appropriate image for large screens and another for medium screens. Then, you would add the “show-for-medium-up” class to your element. Everything appears to work as expected: the large image appears for large screens; the medium image on medium screens; and no image on small screens.
However, on small screens, an image still gets requested, eating up bandwidth unnecessarily. This is the case even if you don’t have an entry for “small” in the “data-interchange” attribute; the last case to evaluate to true would be medium, and the browser will request this resource. Since the whole point of using Interchange is to request only the content you need, this is not a desired outcome.
The solution to this issue is not especially novel, although it is not mentioned in the documentation. To avoid uselessly loading the medium image on small screens, add a “small” case to the “data-interchange” attribute but leave blank the space before the comma where you would normally specify the resource URL.
For an example, check out the sample code below.
<img alt="Profile" data-interchange="[/img/profile.jpg, (default)], [, (small)], [/img/profile-medium.jpg, (medium)], [/img/profile-large.jpg, (large)]" />Since there is no URL, when Interchange detects a small screen, nothing gets requested. Voila, no unnecessary bandwidth usage. Subsequent resources will load more quickly and your visitors will appreciate you saving them some extra bandwidth.