Images
Arts & Médias presents images that fit in only a few ratios. These ratios are mostly dependent on the breakpoint at which the site is viewed.
This documentation is presented here for editors to have a references, but also for people to know how to submit images to us (to ensure that the focal point of the image is visible on all breakpoints).
-
File Size: Images should not exceed 300kb.
-
Dimensions: Images should be provided at 1280px x 720px.
-
Ratio: The context in which images are presented will dictate at what ratio the image will be presented. When the images are presented in another ratio than 16:9, the top and bottom of the image will be cropped. Continue reading to obtain guidance on how to ensure the image's main focal point is not cropped out.
-
Alt Text: All images—except logos and portraits—require alternative text, so that sight-impaired users can obtain a description of the image. Read this article on the subject for more information.
-
Credit and Copyrights: Photographers and copyright holders must be credited.
Each context may present images with different ratios. Below are the details for each so you can prepare images properly so they work for each context.
The hero image for content pieces use the 2:1 ratio for all breakpoints.
Book covers are different in that books are most often in portrait. The details page of books stretches images to fit in a specific width, and shows the full height.
Below are the amount of columns in which the image is fitted:
- mobile and above: 3 columns (out of 6)
- tablet and above: 4 columns (out of 12)
Profile pictures are presented as a square, so whatever width exceeds the square is cropped. In this case, ensure that the focal point fits within a square.
Below are the amount of columns in which the image is fitted:
- mobile and above: 6 columns (out of 6)
- tablet and above: 4 columns (out of 12), in the sidebar
When a piece is previewed in a list, whether it's on the index page of the piece content or a feature page (e.g. home page, discover page, etc.), its hero image is presented using the 4:1 ratio.
This means there is only a slim band in the hero image that is visible.
This explains why logos—which are likely only used for some events or some organizations—are presented with a lot of whitespace around them. If it weren't the case, the logos would cropped, which should be avoided.
The featured piece tile is not often used. This component is sometimes present in the sidebar (e.g. the About page) or in some other contexts (e.g. the error template).
The featured piece tile may be visible at the top of the main index page of each content type if a sponsor choose to support that.
The home page and the articles main index page both showcase a featured piece tile, that of a featured article.
Below are the ratios used for the hero image per breakpoint:
- mobile and above: 2:1
- large desktop and above: 3:1
- very large desktop and above: 4:1
The home page's featured article makes an exception in that it presents the hero image with the following ratios:
- mobile and above: 8:3
- tablet and above: 2:1
As discussed above, a book cover is a unique case. In this component, the book cover is fitted and centered in the amount of columns alloted to the component.
The Photoshop file for this image—which contains guides—is available for download if you'd like to have a boilerplate file to prepare your images.