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.
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: 500px)" srcset="/~/media/Images/Cookbook/myimage.jpg?w=150"> <img srcset="/~/media/Images/Cookbook/myimage.jpg?w=300"> </picture>