Responsive Images in Sitecore MVC

TL;DR

The source code can be found at github.com/dresser/SitecoreResponsiveImages.

Approach

This solution consists of extension methods for use with Sitecore MVC View Renderings. Responsive image support is provided by including additional data- attributes for the URLs for the different sizes within the img tag. This is a simple solution which does not tie you down to a particular JavaScript library.

The benefit of using a view rendering for this is that you can keep the information about the different responsive breakpoint sizes within the view -separate from any C# code and business logic. Additionally, it requires no changes to your Sitecore templates or items.

Please note that this solution applies only to images from Image fields in Sitecore, not images within rich text fields.

How to use it

The extension method is used as follows in a view rendering:

@Html.Sitecore().ResponsiveImage("ImageFieldName", item, new { w = 150 }, new ResponsiveSizes { Default="300", Mobile="300,450", Tablet="400,600", Desktop="600,900" })

string fieldName

(required)

the name of the image field of the item.

Item item

(optional)

The item from which to take the image. If no item is specified the view rendering's datasource is used. If no datasource has been set on the rendering, the context (page) item is used (same logic as used by Html.Sitecore().Field()).

object parameters

(optional)

the parameters used for rendering the image. Same form as when calling @Html.Sitecore().Field(). For all options see John West's article about the available media options.

To disable experience editor support for a responsive image, include the property DisableWebEdit=true.

ResponsiveSizes responsiveSizes

(optional)

The different responsive sizes supported.

Default is used for the src, so should be the smallest size possible. This can be specified as a single value e.g. "300" representing a width of 300 pixels, or "300x450" which would be 300 pixels wide by 450 pixels high.

Mobile, Tablet & Desktop specify the image sizes for different devices. These can be specified as "W" or "WxH" as for Default, or can contain a second dimension(s) separated by a comma for a retina device image e.g. "W1, W2" or "W1xH1, W2xH2".

Images are rendered with the following HTML attributes

<img src="/~/media/Images/MyPicture.ashx?w=600&hash=NNN" 
alt="My description" 
data-responsimg-mobile="/~/media/Images/MyPicture.ashx?w=300&hash=NNN, /~/media/Images/MyPicture.ashx?w=450&hash=NNN" 
data-responsimg-tablet="/~/media/Images/MyPicture.ashx?w=400&hash=NNN, /~/media/Images/MyPicture.ashx?w=600&hash=NNN" 
data-responsimg-desktop="/~/media/Images/MyPicture.ashx?w=600&hash=NNN, /~/media/Images/MyPicture.ashx?w=900&hash=NNN"/>

Notes about the hash parameter:
1) Hash values shortened for clarity.
2) The hash parameter was introduced with Sitecore 7.5. It is a security feature to prevent DoS type attacks where images can be requested at many different proportions, consuming huge amounts of processing resources. As Adam Najmanowicz mentions media request protection should not be turned off!

Page Editor / Experience Editor Support

This solution fully supports the Sitecore page experience editor (though it does not attempt to maintain responsive behaviour while editing - and neither does Sitecore!). When page edit mode is detected, images are rendered using the OOTB Html.Sitecore().Field() method with whatever parameters are passed in the parameters argument. One benefit is that you can customise the size of image displayed in the page editor to make user selection easier.

As shown in the first code snippet, the responsive sizes are defined in the view, so there is no change to the image selection/editing features within the Sitecore Experience Editor.

Other features

Along with the ResponsiveImage extension method are ImageAlt and ImageSrc. These can be used if you want to create different markup while preserving the necessary hash on media URLs. The ImageSrc also allows the same properties to be passed in the parameters argument. This is useful for rendering background-image tags on non-image html elements.

Dependencies

• jQuery
• responseImg

Show me teh codez

The complete source code can be found here: github.com/dresser/SitecoreResponsiveImages

Further reading

• A retina image approach for Sitecore
  (An extension method for returning hashed image URLs to be used within an img srcset attribute.)
• Render Responsive Image Glass Html Helper with Sitecore Image Processor Module
  (Uses Glass Mapper and the Sitecore Image Processor Module to render a <picture> element - also supports page editor.)
• Responsive Images in Sitecore
  (Pipeline based approach)
• Responsive vs Adaptive sites in Sitecore
  (General discussion on responsive vs adaptive site design in Sitecore - not image specific)
• Make Sitecore deliver images which fits the screen and Make Sitecore deliver images which fits the screen, part 2
  (Two articles by Anders Laub about optimisation of Sitecore images and enhanced cropping abilities)