I have a responsive website on Sitecore. The same image gets rendered for my website articles on all devices. I do not want to crop the images while rendering them in different devices as a relevant part of the image might end up getting cropped. I would like to know the best way to handle these situations wrt Sitecore. Thanks for your help in advance!
2 Answers
Images won't be cropped by Sitecore by default, and in fact this is additional custom functionality that needs to be implemented if required.
If you display the image on a page and your site has been designed to be responsive (i.e. using CSS to make images have a relative width rather than an absolute one), the browser will scale the image dependent on the width of the page. This is nothing specific to Sitecore and is just regular HTML/CSS.
However, this does mean the same image gets downloaded regardless of device size. This can be a waste of bandwidth, especially for mobile users who may be downloading an image that is suitably large for it to look great at high-resolutions, only for it to be scaled right down in the browser.
Fortunately, Sitecore can help here. Sitecore's image handler allows images to be dynamically resized by using URL parameters, so that a single image in the media library can be downloaded in the browser at multiple different sizes. These also get cached on the server so that future requests for the images are faster.
For example:
<!-- Display image at default size -->
<img src="/-/media/Default%20Website/sc_logo.ashx" />
<!-- Display same image but at a maximum width of 100px -->
<img src="/-/media/Default%20Website/sc_logo.ashx?mw=100" />
What I have done previously is to combine this with the PictureFill library, which allows you to specify a series of different URLs to use for an image and a CSS media query condition for each, for example:
<picture>
<source srcset="/-/media/images/article.jpg" media="(min-width: 1600px)" />
<source srcset="/-/media/images/article.jpg?mw=1600" media="(min-width: 1000px)" />
<img srcset="/-/media/images/article.jpg?mw=800" alt="Article image" />
</picture>
With this in place, you can have a single image stored in Sitecore, but the browser will only download the image that is most suitable to the current device's width.
Note that for simplicity, the above examples are using Sitecore Media URLs with the Request Protection disabled.
-
Thanks Kasaku. I also want to know how to handle the situation where an image is loaded with a specific width in the portrait mode but with a very different width in the landscape mode. In this case there are no new requests going to the server.– anw_000Commented Jun 22, 2017 at 6:23
-
That's no problem. Using the picture HTML element shown above, if the browser determines that a different media query applies, it will load the next applicable image.– KasakuCommented Jun 22, 2017 at 7:26
Suppose you have a article page where you want to show the image as full width and you have another module where you want to show the article listing with smaller images. You can upload an image of size of your full width module and you can specify the width on the img tag for your article listing module. It will resize the image with the correct aspect ratio. You should give a thought about what minimum number of sizes you need to use on different image placeholders.
