It’s very easy to add real responsive client side images to your website, that download smaller and smaller versions on demand depending on the screen size. And best of all you it only takes a few minor changes from you.
1) Install ImageProcessor.Web
ImageProcessor is a great little add on that makes resizing images and the image quality a breeze. It’s very similar to ImageGen but you just need to append ?width= after the image and ImageProcessor does the rest. It has both a client side and code version, so you can resize in your code and save the images yourself if you want to.
Website: http://jimbobsquarepants.github.io/ImageProcessor/
Nuget: https://www.nuget.org/packages/ImageProcessor.Web/
Umbraco Package: http://our.umbraco.org/projects/collaboration/imageprocessor
2) Install SlimResponse via Nuget
Just install SlimResponse into your project, this project looks through outgoing HTML for <img> tags with a slimmage class applied, then adds the appropriate markup to allow slimmage.js to turn them into responsive images.
Website: https://github.com/imazen/slimresponse
Nuget: http://www.nuget.org/packages/Imazen.SlimResponse/
3) Add Slimmage to your project
Lastly, go to the site below and download the slimmage.js file and add it to your master/main page throughout your site like you would any other normal JavaScript file.
Website: https://github.com/imazen/slimmage
4) Done
Now you have all the above done, to kick slimmage to life you literally just need to add the slimmage class to your images along with the width attribute on the image (Or optional quality as well)
<img class="slimmage" src="image.jpg?width=200" alt="" /> <img class="yourownclass slimmage" src="image.jpg?width=200&quality=95" alt="" />
One thing to note, you must include the width=??? parameter on the image url for slimmage.js to modify the value and work (See slimmage docs) or it’ll do nothing. Also if you want the automatic quality adjustment too, then you need to include the quality=??? parameter on the image url as well.
