UI MarCom 3

Image Aspect Ratios

Image Aspect Ratios control image formats regardless of the source.

There are some common image formats used in digital design. In responsive design they are more like an aspect ratio for images regardless of the output size. Some UI-components desire a specific aspect ratio for images to display the content. If the uploaded image doesn’t fit the required format, it will be cropped automatically by the system.

When selecting an image, bear in mind that the uploaded image should be suitable for a variety of formats and viewports. The images should have the highest quality and largest size possible (images width of1,408 px or 1,920 px recommended).

Applicable aspect ratios

To apply image cropping in your code, you need to use the aspect ratio component.

Panorama
3:1 - 1,920 x 640
3:1 - 1,920 x 640
21:9 - 1,920 x 640
21:9 1,920 x 823
Landscape
16:9 - 1,920 x 1080
16:9 - 1,920 x 1080
4:3 - 1,408 x 1,056
4:3 - 1,408 x 1,056
Square or circle
1:1 round - 1,408 x 1,408
1:1 round - 1,408 x 1,408
1:1 square - 1,408 x 1,408
1:1 square - 1,408 x 1,408
Portrait
3:4 - 1,024 x 1,365
3:4 - 1,024 x 1,365

Covered

The original image will be cropped horizontally or vertically whereby the motive is cut at the edges.

16x9 ratio covered by the image

Contained

The original image format will be maintained without cropping, but it will be resized, and the pane of the aspect ratio will fill up the space.

16x9 ratio contains the image

Dos and don’ts

  • Use keywords in image file names and alt tags.
  • Never enlarge images with an additional white space to work around image cropping.
  • Do not use square images alongside quotes.
  • Do use the recommended image resolution for displaying high-quality images.