Image sizes
The design has a variety of image sizes, but we are working to develop ways to automate the process of uploading images and creating the various sizes and shapes required as much as possible.
Standard Image
- 1920 x 1080
- Caption for every image: tell us who / what your picture shows, where it is and why it’s interesting.
- 1:1.77
Header
- 2916 x 1002
- Horizontal
- 1:2.91
height: 197px; on smaller screens and height: 354px; on larger screens.
background-size: cover Tells the browser to make sure the image always covers the entire container, even if it has to stretch the image or cut a little bit off one of the edges. The focus area in the image will look something like:
There’s also a variety of formats used across the site. When the standard image gets cropped, there will be a safe area for cropping.
link-block–very-wide
- 1500 x 575
- Horizontal
- 1:2.6
link-block–wide
- 1500 x 750
- Horizontal
- 1:2
link-block–double-height
- 750 x 1500
- Vertical
- 2:1
link-block
- 1500 x 1500
- Square
- 1:1
Image selection
Choosing good images is something I know little about. While trying to improve my knowledge I came across a BBC training video which had some great tips.
On average, users spend six or seven seconds scanning a landing page before deciding what to click on.
Avoid boring and static shots to give your story the best chance to get clicked on. When choosing an image, it needs at least one of these criteria:
- relevance - added information, e.g setting and the background.
- depth of meaning - signifiers and symbols.
- animation - focus on emotion and defining moment, gesture, reaction, response.
Try to avoid cutting off heads, but we are not dealing with static designs. Images set to background: cover will be different for every device, so we need to be flexible in our expectations. We would suggest some kind of cropping is OK:
- As long as the focus is specifically on someone’s hands doing a skill
- You only chop the top of someone’s head off, ie, above the eyebrows is usually ok.