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.
|💚 Do's||💔 Dont's|
|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.
The ns-image component can be used in the following components:
|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 thumbnail placeholder image. (src) can be used to bring in the src property.|
|The loading mode of the 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.
💩 🎉 🦄 If you have any questions, contact us on Microsoft Teams in the Nucleus Design System channels.