The Client-side adaptive image module helps build responsive web designs with fluid images by providing an Image field formatter that allows you to select appropriate image styles for various client widths. With this module, you can ensure that for each Image field only the most appropriately sized image gets downloaded by the client.
You can serve light images to mobile users while still providing the best quality images to visitors equipped with large screens.
- Per-field configuration (for each view mode).
- No cookies required.
- No external libraries required.
- No extra server configuration needed.
- Does not attempt to perform any client OS detection.
- Reverse proxy cache friendly.
How it works
What the module does is basically this:
- Wrap a fallback image in a <noscript> element.
- Attach references to alternate images to the <noscript> element using data attributes. Data attributes are an HTML5 feature but work in older browsers as well.
- Watch for window resize events, and replace the images when appropriate.
You might be interested in the following Drupal modules, which provide similar functionality using different techniques and/or architectures:
This project has been sponsored by: Whisky Echo Bravo