Images
This provides guidance on the use of foreground and background images.
Alt text
Alt text is the written copy that appears in place of an image on a webpage if the image fails to load on a user's screen. This text helps screen-reading tools describe images to visually impaired readers and allows search engines to better crawl and rank your website. It should be included against all foreground images.
Image styles and sizes
When uploading images, the dimensions should be equal to the largest size the image will render in a desktop browser. Where practical all components should have defined image sizes allowing designers and developers to use the correct dimensions. Image styles are pre-configured within the built components to stop CMS editors from uploading oversized images that could break the layout. The height is unrestricted by default, allowing for flexibility.
NB. When uploading images it is the assembly agencies responsibilities to ensure all images are cropped to the correct height.
The four image styles are:
| Breakpoint | Image dimensions |
|---|---|
| Desktop | 1000 x auto |
| Tablet | 495 x auto |
| Mobile | 575 x auto |
For more guidance regarding image sizing please click here:
Image sizing guidance: https://confluence.cloud.bayer.com/spaces/WSF/pages/520731760/Image+Sizing+Guidance+in+FDS
Advanced image sizing guidance: https://confluence.cloud.bayer.com/spaces/WSF/pages/520721016/Advanced+image+guidance
File sizes/compression
All images should be compressed before uploading to the CMS. Do not upload uncompressed images, this can make your website load slower. Ideally all images should be smaller than 100kb. There are many to free to use online tools such as https://tinyjpg.com/ that you can use.
When uploading an image to the CMS, a level of compression is done. Please be mindful of this as images that are compressed too much will appear blurry or pixelated.
File formats
JPEGs should be chosen for larger photos or illustrations as they will give you better results in terms of colour and clarity with a relatively small file size. Where you wish to preserve background transparency, PNGs should be used. Images should be saved with a basic description of the image to support SEO.
Image priority
Where both a background colour and background image are used within a component, the background image will take priority over the background colour. This allows for PNGs to overlay background colours.
Background images
A background image’s width should equal that of the largest width of the component. In other words, if the maximum width of the website is 1920px, then the width of the background image for full-width components (example: hero panels) should be greater or equal to 1920px.