Sitecore 8 RTE Image re-sizing

Question

We have recently upgraded from Sitecore 6.5 to Sitecore 8.

We use the RTE exclusively for our content (long story).

In 6.5 our authors could insert a link to an image and remove size parameters and have an image URL that looked like this in HTML view:

<img src="~/media/39ad74e4cc7749fd9ee31ba6b6b0cd07.ashx" />

Sitecore would automatically resize the image based on whether we were viewing in a desktop browser or a mobile screen (small). Even if the original image was 1600x900 , Sitecore would resize the image to fit the screen.

Now, in Sitecore 8, that functionality is gone. Using the same <img> tag that we had before, a 1600x900 image will always be rendered as 1600x900 whether on a desktop or mobile browser.

What is the solution in Sitecore 8 to have the server automatically resize the images for different screen resolutions? (We're having most trouble when viewing our site on mobile devices.)

My guess is that before the upgrade, you had some CSS that was resizing the images on the client. The Url you have given as an example will any resizing at all. Also Sitecore doesn't know the view port size, so it cannot resize images based on the device, unless you have extra code to do that. Sitecore has never had the functionality to "auto" resize an image, you would have had to give it parameters to do that. — Richard Seal

Richard Seal Richard Seal · Accepted Answer · 2015-12-17T19:09:54

Sitecore has never had this functionality out of the box. Because Sitecore is a server based component, it never knows what the view port size of the user is, unless that information is specifically sent via JavaScript.

There are a few main ways of doing responsive images:

You can let the CSS handle all the resizing. This has the benefit of being simple, no extra js processing, the image is always downloaded with the page. But it also means that you have to supply an image that is max size. So for most people, they will be downloading too much.
Use JavaScript to do it. Have urls to multiple sizes of the image, and use media queries to swap images in and out based on certain break points. I have used this module for that before http://xoxco.com/projects/code/breakpoints/

You would set the image up like this:

<img data-responsive="true" 
     data-small-url="@(imageUrl)?w=100" 
     data-medium="@(imageUrl)?w=200" 
     data-large="@(imageUrl)?w=300" />

Then setup your js like:

$(window).setBreakpoints({
    breakpoints: [
        480,
        768,
        1024
    ] 
});     

$(window).bind('enterBreakpoint480',function() {
  var $img = $('img[data-responsive="true"]');
  $img.attr("src", $img.data("smallUrl"));
});

$(window).bind('enterBreakpoint768',function() {
  var $img = $('img[data-responsive="true"]');
  $img.attr("src", $img.data("mediumUrl"));
});

$(window).bind('enterBreakpoint1024',function() {
  var $img = $('img[data-responsive="true"]');
  $img.attr("src", $img.data("largeUrl"));
});

Thats very rough and untested code, but should give you the basic idea. There are probably plugins that would do it for you also if you didn't want to write your own script.

There is a third option that uses some of the newer tags, but browser support would be limited for those. Here is a good article on that option: http://blog.navigationarts.com/responsive-image-sizing-with-html5-and-sitecore/

Sitecore 8 RTE Image re-sizing

3 Answers