Interchange uses media queries to dynamically load responsive content that is appropriate for different users' browsers.
***
***
### Using Interchange With HTML Content
Interchange can now pull in HTML partials so you can load different sections of your page for particular media queries. This is great for loading up a mobile-friendly component on small devices, and a more robust or heavier load component on desktops.
We use the data-interchange attribute on a markup container (probably a div) to do this. Here's an example which loads up a small, static map on mobile, a larger static map for medium-sized devices, and a full interactive Google map on large display devices.
{{#markdown}}
```html
{{> examples_interchange_markup}}
```
{{/markdown}}
Each rule passed to `data-interchange` is comma delimited and encapsulated in square brackets, and each argument within a rule is also comma delimited. The first parameter is the path to your image, and the second parameter is your media query, surrounded by parenthesis.
The last rule that evaluates to true will be the image that gets loaded. Excluding the `src` attribute keeps the browser from making two requests for images.
***
### Using Interchange With Images
Using Interchange with images alone is the same process as arbitrary HTML content, and a common use case for Interchange. This way you'll only load larger resources for devices that can handle it.
{{> examples_interchange_basic_rendered}}
{{#markdown}}
```html
data-interchange="[image_path, (media query)], [image_path, (media query)]"
```
{{/markdown}}
If you want to support browsers with JavaScript disabled, we recommend setting your default image in a `