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:

Resources: at least 500px wide because those are displayed over a full width when on mobile
Workspace image: at least 200px wide
Campaign banner: 600px wide and more
Campaign email image: 600px

Did this answer your question?