As a responsive toolkit, Foundation is based on the fact that by default all devices load the same content, and the only difference from one device to another is how the content is displayed. As one of the newest plugins, Interchange is designed for selective loading.
Instead of loading large resolution images to all the devices, you can load an image specific to a device. Especially on small devices, where users may be sensitive to bandwidth and processor performance, this makes it easier to optimize your web pages for those devices.
The setup is straightforward. Set an image in your src
attribute as you normally would. Then add a data-interchange
attribute where you specify alternate images and the conditions on which they will be used.
Let's look at an example:
<img src="./images/200x200.png" data-interchange="[./images/400x400.png, (only screen and (min-width: 768px))]">
In this example, we specified one alternate image. You can have more than one alternate image as well...