An image allows British Gas to share visual content.
British Gas has a variety of images to enhance content on the website and helps sell a story. This component allows having images on the website, while making sure that the page loads quickly (lazy loading) and follows the right ratios.
Resize your image see optimise your image
Use images as the primary content
Use the correct image format png/jpg
Put text inside the image
Use brand approved images
Use a white background in images
Think about the image responsive behaviour
Reduce images to the smallest size that does not degrade the image too much where it becomes distracting to the customer.
The components that hold images will take care of the rounded corners and any masking or overlaying of illustrations. Read about the component you wish to use with the image.
Always use this component to add images to the website.
To see examples visit Storybook.
<ns-image ratio="16x9" src="https://www.britishgas.co.uk/aem6/content/dam/britishgas/images/jumbotron/home-services/20-Home-Services-wilbur.jpg"></ns-image>
Does it live in a panel?
Does it live inside other components?
✅ Yes -
What layout classes can be used?
URL to the image.
Give a text alternative for screen readers.
Ratio of the image.
To make it CSS background image instead of an inline image tag.
To change the CSS size for a background image.
The URL should be from the CMS.
If the image is just for decoration then set the alt to an empty string.
If the image is required to understand what is going on, use the alt to add a description of wha tthe image shows.
Don't add text about the media type, such as "an image".
This is only for decorative images
Do you have insights or concerns to share? You can raise an issue via Github bugs.
See all the issues already raised via Github issues.
💩 🎉 🦄 You can also contact the team on Slack on the