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.
• Desktop: 3:1 (3x as wide as it is high)
• Tablet: 5:2
• Mobile: 5:4
• Desktop: 2.5:1 (2.5x as wide as it is high)
• Tablet: 5:2
• Mobile: 5:2
• Desktop: 5:4 (1.2x as wide as it is high)
• Tablet: 5:4
• Mobile: 1:1
• 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).