Sitecore Stack Exchange is a question and answer site for developers and end users of the Sitecore CMS and multichannel marketing software. It only takes a minute to sign up.
Sign up to join this community
What is the proper way to do responsive images in Sitecore? At the moment, we are using two images fields: one for desktop and another for mobile. Is that a good way?
As a separate (but related) question, Is there any good image optimizer which supports Sitecore 8.2? I have found an image optimizer in the marketplace, but it seems like it doesn’t work properly with 8.2.
The most important thing here is that Sitecore does not crop the images by default, so your site should be designed to be responsive using CSS. With responsive design, the browser will scale the image dependent on the width of the page. But Sitecore's image handler allows images to be dynamically resized based on the URL parameter. ex -
<img src="/-/media/feature/calout/maincallout.ashx" />
<img src="/-/media/feature/calout/maincallout.ashx?mw=300" />
Using different images fields for desktop and mobile is not a good way in most of the time, but sometimes based on the HTML design or functionality we can create separate image fields for desktop and mobile, an example is different logos in desktop and mobile for a site(transparent and non-transparent). But if it is just for scaling the image then I don't think it is a good idea to use separate image fields.
There are few image optimizers on the marketplace with GitHub code, if you think those are not working for your solution, you can download the code base and make it compatible with your Sitecore version.
But I personally like Dianoga - https://github.com/kamsar/Dianoga, which is an automatic image optimizer for the Sitecore media library. It reduces the size of your images served from Sitecore by 8-70%, completely automatically. Dianoga sits in getMediaStream pipeline, which Sitecore uses to transform media items before it writes them to its disk cache.
