We've been working in the responsive realm for a while now and one of the most painful parts of the process is dealing with images. Large images can cause extremely long load times on small devices that might not have a huge data bandwidth. There have been many "best practices for now" movements to deal with this.
We would typically just hide the images with CSS and offer new images for smaller devices. But those hidden images would still load behind the scenes, leading to slower load times. As of today, however, we can now easily load up the right image based on the screen size, orientation or pixel density and not worry about the DOM getting clogged with too many requests.
Interchange, as part of our Foundation 4.2 release, offers a flexible and lightweight approach to responsive images. Your site's visitors will only download the images that are appropriate for their device: mobile users get mobile friendly images and desktop users get the larger images.
How it Works
Interchange utilizes media queries to determine which image should be loaded based on the dimensions of the user's browser window. Each media query and it's associated content is passed to the data-interchange attribute.
The idea of progressively loading images has been around since Mosaic. There have been other solutions out there, like Scott Jehl's PictureFill, as well as, the <picture> element. However, we wanted to create a plugin that propelled Foundation ahead of the curve when it came to responsive images and also point toward the future. We'll eventually use this plugin for some really awesome features in Foundation 5, but we wanted to start off by testing the concept with images first.
When you load up a Foundation page that uses Interchange, you can take a peek at inspector and see the magic happen. Whatever image you put inside the src of the image element will render by default. Then, the Javascript will progressively load larger images based on media queries that you pass into the data-interchange attribute. This will greatly improve the mobile rendering time by reducing the resources that get loaded into the DOM. Your sites will be faster and leaner, giving the user a much better initial experience when the page loads.
Foundation release. We also squashed some bugs and made sure this is one of the most stable versions ever.
- Top Bar Overhaul (toggle with click)
- Nested Section deep linking
- Reveal supports AJAX content
- Auto reflow Section tabs
- Add Dropdown hover interaction
In the meantime, hop on over to our Playground page to learn more about Interchange and find out how to download it.
Visit the Interchange Playground Page