Achieving responsive images
In responsive websites, getting different sized images based on the screen size (viewport) would be a great option to serve optimized images to make pages faster and provide better user experience.
In this recipe, you will learn rendering different sized images dynamically using MediaUrlOptions. We will render the <picture> element to achieve responsive images in HTML 5.
Getting ready
A Sitecore image will be rendered as <img src="/~/media/Images/image.jpg" />. To get a responsive image, we will render the <picture> tag as follows. If you are not aware of it, get some basic knowledge from http://goo.gl/GmHprC.
<picture> <source media="(min-width: 800px)" srcset="/~/media/Images/Cookbook/myimage.jpg?w=200"> <source media="(min-width: ...
Get Sitecore Cookbook for Developers now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
