ns-image
Introduction#
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.
Image guidance#
| Component | Variant | Ratio | Dimensions | Size | Type | Placeholder |
|---|---|---|---|---|---|---|
ns-card | support | 16:9 | 640x360px | <50kb | .jpg | ns-card-support-640x360px |
ns-editorial | n/a | 4:3 | 480x360px | <50kb | .jpg | ns-editorial-480x360px |
ns-landmark | summit | 16:9 | 1440x810px | <200kb | .jpg | ns-landmark-summit-1440x810px |
ns-landmark | valley | 16:9 | 800x450px | <100kb | .jpg | ns-landmark-valley-800x450px |
ns-landmark | valley | 4:3 | 800x600px | <100kb | .jpg | ns-landmark-valley-800x600px |
ns-lockup | n/a | 16:9 | 800x450px | <100kb | .jpg | ns-lockup-800x450px |
ns-lockup | n/a | 4:3 | 800x600px | <100kb | .jpg | ns-lockup-800x600px |
ns-lockup | n/a | 1:1 | 800x800px | <100kb | .jpg | ns-lockup-800x800px |
ns-selector | n/a | 16:9 | 640x360px | <50kb | .jpg | ns-selector-640x360px |
Best practice#
| 💚 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 |
Considerations of best practices#
- 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.
Usage#
Component placement#
The ns-image component can be used in the following components:
Specification#
| Attribute | Type | Default | Options | Description |
|---|---|---|---|---|
src | string | URL to the image. | ||
alt | string | Give a text alternative for screen readers. | ||
ratio | string | 16x9 | 16x9, 4x3, 1x1 | Ratio of the image. |
background | boolean | false | true, false | To make it CSS background image instead of an inline image tag. |
backgroundSize | string | cover | cover, contain | To change the CSS size for a background image. |
Specification notes#
Src#
- The URL should be from the CMS.
Alt#
- 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".
Background#
- This is only for decorative images
Feedback#
- 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.