Displaying images correctly per device
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.
Slideshow on a desktop device
Slideshow on a mobile device
- WCMS use
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.
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.
When saving the images into the Media Library, they need to be nested in a specific hierarchy:
> 90-xxxx-2700x600 (if required)
The three (or two) largest images are children of the smallest image. For example:
- MVC.net 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" /> </picture>
- Version and status