Responsive Images in Sitecore MVC

This article describes custom extension methods for responsive images in Sitecore MVC. It uses the responsImg jQuery plugin but could easily be adapted to other libraries for responsive images.
17 October 2015


The source code can be found at


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
the name of the image field of the item.
Item item
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
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
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.


Show me teh codez

Show me teh codez

The complete source code can be found here:

Further reading

Tags: Sitecore MVC
comments powered by Disqus