Images for different breakpoints

Question

I have read various implementation approaches to render images in desktop/mobile view without cropping/stretching it.

Last time I had a chat with a fellow developer, they insisted on having a separate field for mobile image on a content item - so in all 2 fields, one for desktop image and one for mobile. I reckon that makes things hard for the content authors.

What is the best/easiest approach to address this issue - most efficient solution to have just one field for image for content authors to manage, yet have the image render nicely on different breakpoints without stretching them for larger breakpoints? Is that even possible? If not, which is the most user friendly way to implement this?

Answer 1

One option is to use sizes srcset on your <img> element. I've recently been a project where this was the approach.

Set it up like this. Example from a Razor View.

<img src="@Model.ImageUrl" sizes="(max-width: 764px) 50vw, 25vw" srcset="@Model.ImageSrcSet" />

While this technically does not give you options for mobile devices, it does give you something along the lines of what you are asking.

More information about sizes and srcset here: Responsive Images - The srcset and sizes Attributes

On the Sitecore side of things, you need to generate a list of Image Urls for the image. With different maxWidth constraints. One way to achieve that, is something like this:

ImageField imageField = item.Fields[imageFieldName];
if (imageField?.MediaItem != null /*&& imageField.MediaItem.Versions.Count > 0*/)
{
    var imageUrl = HashingUtils.ProtectAssetUrl(MediaManager.GetMediaUrl(imageField.MediaItem, new MediaUrlOptions {MaxWidth = maxWidth}));

    // ReSharper disable once UseObjectOrCollectionInitializer
    var urls = new List<string>();
    urls.Add(HashingUtils.ProtectAssetUrl(MediaManager.GetMediaUrl(imageField.MediaItem, new MediaUrlOptions {MaxWidth = 100})) + " 100w");
    urls.Add(HashingUtils.ProtectAssetUrl(MediaManager.GetMediaUrl(imageField.MediaItem, new MediaUrlOptions {MaxWidth = 200})) + " 200w");
    urls.Add(HashingUtils.ProtectAssetUrl(MediaManager.GetMediaUrl(imageField.MediaItem, new MediaUrlOptions {MaxWidth = 300})) + " 300w");
    urls.Add(HashingUtils.ProtectAssetUrl(MediaManager.GetMediaUrl(imageField.MediaItem, new MediaUrlOptions {MaxWidth = 400})) + " 400w");
    urls.Add(HashingUtils.ProtectAssetUrl(MediaManager.GetMediaUrl(imageField.MediaItem, new MediaUrlOptions {MaxWidth = 500})) + " 500w");
    urls.Add(HashingUtils.ProtectAssetUrl(MediaManager.GetMediaUrl(imageField.MediaItem, new MediaUrlOptions {MaxWidth = 600})) + " 600w");
    urls.Add(HashingUtils.ProtectAssetUrl(MediaManager.GetMediaUrl(imageField.MediaItem, new MediaUrlOptions {MaxWidth = 1150})) + " 1150w");
    urls.Add(HashingUtils.ProtectAssetUrl(MediaManager.GetMediaUrl(imageField.MediaItem, new MediaUrlOptions {MaxWidth = 1290})) + " 1290w");
    urls.Add(HashingUtils.ProtectAssetUrl(MediaManager.GetMediaUrl(imageField.MediaItem, new MediaUrlOptions {MaxWidth = 1440})) + " 1440w");
    urls.Add(HashingUtils.ProtectAssetUrl(MediaManager.GetMediaUrl(imageField.MediaItem, new MediaUrlOptions {MaxWidth = 1920})) + " 1920w");

    return new Tuple<string, string>(imageUrl, string.Join(",", urls));
}

Be sure to call in with a reasonable maxwidth as default, something like 300 or whatever is appropriate.

The upside to this; the device will try and download the most appropriate image resolution for the display device. Which is good.

The downside to this; many mobile phones have very high resolution displays on a very small surface area. This approach can still end up selecting a too high resolution image for a 3G connection.

That said; even if you DID do a 2nd field for "mobile images" - you would still need to determine "mobile". If you're going to do that based on device parameters - well then the above solution will do just as well. If - however - you aim to download the "mobile" image when the phone (or any device) is on a slow(ish) connection - well then you need something different. I'm not even sure how you could detect this.

Answer 2

This really depends on a lot of factors. If the dimensions of the image will be different in different devices, than it's going to be challenging to use the Sitecore Resizing/Cropping ability to handle that scenario, because the image may get cropped incorrectly, so in that case it's probably best to have different images per aspect ratio.

If however on your item you have a mobile and desktop version that are at an identical aspect ratio, than you should really look at ways of keeping this to just one field (Like you said, having multiple will add additional work for the content editor, which isn't ideal). In the one field, you can make sure the user uploads the largest image size (for desktop) and then you can either handle the shrinking of the image with CSS or you could do this with the Sitecore image crop/resizing functionality.