Responsive scaling

Displaying images correctly per device


In order to be display images correctly on different devices, we need to ensure we have responsive scaling on our images.

In the Media Library you can upload and manage versions of the same image so that they can be displayed appropriately on different devices - to support performance and art direction.

WCMS use

Image hierarchy

In the media library you can upload images into an image hierarchy.

An image with valid options will be set up as follows:

-  Image (image item, 480x480)
-  30-image (image item, 1200x400)
-  64-image (image item, 1500x400)
-  90-image (image item, 2700x600)

Any image can have child images attached to it. Child images are always expected in the above order.

Child images are only used for the following renderings and page template areas:


  • Carousel > LinkedImage_image
  • Slideshow > LinkedImage_image
  • Overlay image > LinkItem_image

Page template areas

  • HCC_NewsArticle > NewsArticle_HeroImage
  • Your_Hampshire_Hero
  • Venue_Template_Hero use

<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" /> 
Version and status
  • 1
  • current version
  • Concept
  • Alpha
  • Beta
  • Release