Responsive scaling

Displaying images correctly per device

Overview

Responsive images are needed where images are being used for promoted content areas or in large full-width spaces (slideshows, carousels, news articles etc). They allow images to be displayed appropriately on different devices.

Example

Slideshow on a desktop device

Sitecore slideshow on a desktop device

Slideshow on a mobile device

Sitecore slideshow on a mobile device

WCMS use

Image sizes

To make an image responsive, you must create several versions of it, each a specific size. The sizes you need to create are:

  • 480 x 400px
  • 1200 x 400px
  • 1500 x 400px
  • 2700 x 600px

The largest size is only needed if your image needs to stretch from one edge of the screen to the other, such as the slideshow on the Hillier Gardens home page.

Naming conventions

The images need to be named in a specific way:

Image size Image name
480 x 400px 00-imagename-480x400.xxx
1200 x 400px 30-imagename-1200x400.xxx
1500 x 400px 64-imagename-1500x400.xxx
2700 x 400px 90-imagename-2700x600.xxx

Where imagename is the name of your image, and xxx is the file extension.

Image hierarchy

When saving the images into the Media Library, they need to be nested in a specific hierarchy:

00-xxxx-480x400

    > 30-xxxx-1200x400

    > 64-xxxx-1500x400

    > 90-xxxx-2700x600 (if required)

The three (or two) largest images are children of the smallest image. For example:

Images for a slideshow in the Media Library

 

MVC.net use
Code

<picture class="scale-images"> 
 <!-- always set --> 
 <source srcset="Image" media="(max-width: 30em)"/>
 <!-- if set --> 
 <source srcset="30-image" media="(max-width: 64em)"/> 
 <!-- if set --> 
 <source srcset="64-image" media="(max-width: 90em)"/>
 <!-- if set --> 
<source srcset="90-image" media="(min-width: 90em)"/> 
 <!-- always set --> 
 <img src="Image" alt="Image alt text" /> 
 </picture>
Version and status
  • 1
  • current version
  • Concept
  • Alpha
  • Beta
  • Release