Until recently, responsive images have been too complicated and fragile for general purpose use — despite how essential they are for responsive web design; without responsive images, mobile devices typically download 2-3x more data than is needed.
We're introducing a simple way to create responsive images — without sacrificing maintainability.
Your existing CSS breakpoints and
max-width rules for images will stay in control of client-size scaling (and now, which image version is requested).
This solution involves 3 components
- An RIAPI-compliant RESTful image API such as ImageResizer
- The super-tiny Slimmage.js library for responsive images
- SlimResponse, an HttpModule that generates the HTML needed by Slimmage.js for any
<img class="slimmage" src="image.jpg?width=150/>tag found in outgoing HTML. You can substitute an HTML helper for SlimResponse if you prefer.
Step 1. Install ImageResizer and SlimResponse
Install-Package ImageResizer.MvcWebConfig Install-Package ImageResizer.Plugins.DiskCache Install-Package Imazen.SlimResponse
Verify your web.config has both ImageResizer and SlimResponse installed, and that you can access ImageResizer's self diagnostics page when running your site at
Step 2. Install slimmage.js
Step 3. Annotate which images you want to be responsive
SlimResponse looks through outgoing HTML for
<img> tags with a
slimmage class applied, such as
<img class="slimmage" src="image.jpg?width=150&quality=90" /> <img class="thisclass slimmage thatclass" src="image.jpg?width=150&quality=90" />
or for "slimmage=true" in any image URL
<img src="image.jpg?width=150&slimmage=true&quality=90" />
As mentioned in the slimmage.js documentation, you MUST include the
width=value command for Slimmage to modify the value. If you want automatic quality adjustment, you also need to include
quality=90 in the image URL.
You can download the SlimResponse project and run the 'www' website for a simple demo of this functionality in action.
The slimage.js project offers a more interesting live demo.