Image example: standard image
Examples of half width images and video covers
Contents
1. Half width image
Below is an example of a half width (standard) image. The image will be a maximum of around 1100px wide (depending on the screensize) and and will maintain a ratio of 16:9. You should resize these images to 1200px wide by 675px high. Click on the hotspots to learn more.
1. Image width
Image has been resized to 1200px wide at its maximum dimensions. Note that the browser will constrain the width depending on the user's screen, but it will never exceed 1200px. The browser will enforce the aspect ration - 16:9, hence 1200px by 675px.
2. Image height
The physical image is 675px high. It is however vital that you ensure your image is prepared at this exact height, otherwise the browser will distort the image and reduce quality.
3. Image focus
In general, the half bleed image will show the majority of the image size it is prepared at. However, you may notice some trimming around the edges (top and bottom). When preparing graphics such as charts you should add spacing around the edge to account for this (circa 50px top / bottom / left / right). Please talk to the Web Team if your struggling.
4. Image size
This image has a file size of 113kb at its largest. The CMS will provide alternative file sizes automatically - but it uses the file you create to do this. It is therefore important that you ensure your image is high quality but low file size. Using WebP format will help with this, as will lowering the image quality when saving - to achieve a balance between quality and size.
2. Video
Below is an example of a video cover. These images should be formatted identically to standard / half-bleed style images (example 1 above).
