Responsive Image

Responsive images are designed to adapt images to different screen sizes, ensuring they look great and load efficiently without disrupting the user's browsing experience.

Responsive Image component aims to output any image using a large original source image that has been resized appropriately to the clientside display of the image using the HTML5 picture and source elements while incorporating lazy loading.

When to use this component

Responsive image components are designed to display images that adapt seamlessly to different screen sizes, ensuring optimal quality and performance. They are particularly useful for improving the user experience on diverse devices, as they reduce load times and prevent images from appearing distorted. Additionally, responsive images provide flexibility to match the context of the user's screen, maintaining visual appeal and usability across layouts.

Examples in GOSS products

Image and Image Gallery inlines
Search template's card views
List template's item views

Accessibility considerations

There are options to control the output of the image alt attribute, including having it empty for decorative images, and provision for outputting a figcaption for images with longer descriptions.

General notes

The default behaviour is to display a placeholder box based on the original aspect ratio of the source image that shows an average colour until the image is within the user's viewport, where an appropriately sized version of the original image will be requested and appear with a CSS3 fade in animation once loaded.

Basic responsive image

A responsive image with no additional configuration options.

HTML Java

<figure id="c_20026301221661" class="gi-responsiveimage gi-responsiveimage--related gi-responsiveimage--lazy">
	<picture class="gi-responsiveimage__imagewrapper gi-responsiveimage__imagewrapper--nojs" style="background-image: url('/image/6873/Related/gi-responsive__placeholder.jpeg?m=1709187207393'); max-width: 1280px;" data-target-width="1280" data-target-height="758" data-image-sizes="1325,994,746,560,420,315,236,177,133,100"><source type="image/jpeg" srcset="" data-srcset="/image/6873/Related/gi-responsive__100.jpeg?m=1709187207393 100w,/image/6873/Related/gi-responsive__133.jpeg?m=1709187207393 133w,/image/6873/Related/gi-responsive__177.jpeg?m=1709187207393 177w,/image/6873/Related/gi-responsive__236.jpeg?m=1709187207393 236w,/image/6873/Related/gi-responsive__315.jpeg?m=1709187207393 315w,/image/6873/Related/gi-responsive__420.jpeg?m=1709187207393 420w,/image/6873/Related/gi-responsive__560.jpeg?m=1709187207393 560w,/image/6873/Related/gi-responsive__746.jpeg?m=1709187207393 746w,/image/6873/Related/gi-responsive__994.jpeg?m=1709187207393 994w,/image/6873/Related/gi-responsive__1325.jpeg?m=1709187207393 1325w" sizes="(min-width: 994px) 1325px, (min-width: 746px) 994px, (min-width: 560px) 746px, (min-width: 420px) 560px, (min-width: 315px) 420px, (min-width: 236px) 315px, (min-width: 177px) 236px, (min-width: 133px) 177px, (min-width: 100px) 133px, 100px"><img alt="Related" src="" data-src="/image/6873/Related/gi-responsive__100.jpeg?m=1709187207393" data-fallback-src="/image/6873/Related/gi-responsive__fallback.jpeg?m=1709187207393" class="gi-responsiveimage__image" width="380" height="225" loading="lazy" />
	</picture>
	<noscript><img alt="Related" src="/image/6873/Related/gi-responsive__fallback.jpeg?m=1709187207393" class="gi-responsiveimage__fallback" width="380" height="225" loading="lazy" />
	</noscript>
</figure>
<script>
	gi.responsiveImage.initialiseResponsiveImage('c_20026301221661');
</script>

<comp:responsiveImage
		media="#{imageMedia}"
		modifiers="related"
		alt="#{imageMedia.description}" />