Image sizing

How to resize images on Looop and dimensions to consider before uploading.

Odi avatar
Written by Odi
Updated over a week ago

We often hear questions like:

  • What is the best size for my resource cover images? 

  • How is the banner image cropped? 

  • Why does my cover image crop out the text?

  • How do we resize and crop images on Looop?

Consider this example:

The image clearly will not fit into the display container.

So, we reduce the size of the image until one axis (horizontal or vertical) fits. In this case, the horizontal axis fits first. The image is centred in the container, so that the centre of the image is placed at the centre of the container. Then any 'extra' image is cropped in this way, regardless of the size and shape of the image you upload, Looop will always display it perfectly fitting the container. However it is worth noting that this process does not take into account what is in the image.

That's good to know, but what size image should I upload?

Often customers want to control exactly how their images will be presented on Looop, especially if they want to use text in their images and need to ensure that it doesn't get cropped. This is a little tricky, because we change the size of the 'containers' depending on what sort of device you're using Looop on. 

For mobile, the containers are different to those for desktop web. So there is no 'perfect' size or format to use, however by being aware of the container ratios and understanding how resizing works you can create images that will look good in any setting.

Campaign banner:
• Desktop: 3:1 (3x as wide as it is high)
• Tablet: 5:2
• Mobile: 5:4

Resource cover:
• Desktop: 2.5:1 (2.5x as wide as it is high)
• Tablet: 5:2
• Mobile: 5:2

Workspace cover:
• Desktop: 5:4 (1.2x as wide as it is high)
• Tablet: 5:4
• Mobile: 1:1

Pathway cover:
• Desktop/tablet: varies widely - from 4:1 to 2:1 - Note: this will be changed soon to closer match Workspace covers
• Mobile: 5:2

We don't have specific dimensions to follow, but the sizes we recommend for best results are:

Resource images (within a resource): 710px wide (no height restriction)

Resource banner images: 310 x 120px

Workspace banner images: 217 x 174px

Workspace bookmark banners: 327px X 98px

Workspace description box: 1300px wide

Campaign banner image: 964 x 332px

Campaign email banner image: 568px wide (no height restriction)

Pathway banner images: 632 x 160px

Certifications: 210 x 297mm or 8-1/4 x 11-3/4Inches or 420 x 595px (opposite for horizontal orientation)

MS Teams Bot: png format, 192px x 192px

In cases where there is no specified recommended height, image can be however tall. In cases where both the recommended height and width images with different aspect ration will be cropped with this pattern:

Logo: The logo that goes on the toolbar at the top of your domain - the ideal dimensions are 128px high x 250px wide max (.jpeg or .png).

Did this answer your question?