Guiding principle: Only include elements that have a purpose
Images and photography should be used sparingly, only when they add meaning to content or help people complete a task.
The image file dimensions in the tables below will work for all screen resolutions at the given number of columns.
Aspect ratio | Recommended # of grid columns | Dimensions for recommended # of grid columns (px) | Example in a 12 column grid |
---|---|---|---|
1:1 | 3 | Image file dimensions: 512 x 512 Displayed size on desktop: 256 x 256 |
![]() |
4:3 | 4 | Image file dimensions: 704 x 528 Displayed size on desktop: 352 x 264 |
![]() |
3:2 | 4 | Image file dimensions: 704 x 464 Displayed size on desktop: 352 x 232 |
![]() |
16:9 | 4 | Image file dimensions: 704 x 400 Displayed size on desktop: 352 x 200 |
![]() |
2:1 | 6 | Image file dimensions: 1088 x 544 Displayed size on desktop: 544 x 272 |
![]() |
3:1 | 6 | Image file dimensions: 1088 x 368 Displayed size on desktop: 544 x 184 |
![]() |
4:1 | 6 | Image file dimensions: 1088 x 272 Displayed size on desktop: 544 x 136 |
![]() |
Aspect ratio | Alternative # of grid columns | Dimensions for alternative # of grid columns (px) | Example in a 12 column grid |
---|---|---|---|
1:1 | 2 | Image file dimensions: 320 x 320 Displayed size on desktop: 160 x 160 |
![]() |
4:3 | 3 | Image file dimensions: 512 x 384 Displayed size on desktop: 256 x 192 |
![]() |
3:2 | 3 | Image file dimensions: 512 x 336 Displayed size on desktop: 256 x 168 |
![]() |
16:9 | 6 | Image file dimensions: 1088 x 608 Displayed size on desktop: 544 x 304 |
![]() |
2:1 | 4 | Image file dimensions: 512 x 384 Displayed size on desktop: 256 x 192 |
![]() |
3:1 | 8 | Image file dimensions: 512 x 336 Displayed size on desktop: 256 x 168 |
![]() |
4:1 | 8 | Image file dimensions: 1088 x 608 Displayed size on desktop: 544 x 304 |
![]() |
Always compress a photo before uploading to the web. Image compression is an important usability consideration, because it allows for faster page loads on slow internet connections.
We recommend compressing JPEG files at an 84% quality level, at least.
For photographs and complex images, use the JPG or JPEG file formats.
For large illustrations that contain blocks of the same colour, PNG or SVG are the best image file formats.
For illustrations or photographs that include transparent sections, PNG or SVG are the best image file formats.
For icons and illustrative icons, we recommend using an SVG file format.
Use photography to create a deeper connection with your audience.
Photography should:
Try using photography that fits one of the following themes:
Every image must have an alt attribute.
Avoid using images to present text content. Text content should be written in HTML.
Alt text provides a text alternative to images, photography and other non-text content.
If an image is decorative and provides no added information, the <alt>
attribute should be blank. One way to determine if an image is decorative is to write the alt text, and then see if the alt text adds any extra value for the user.
Examples of alt text:
If you have other suggestions, advice or any questions on images and photography, the design system team would love to hear from you.