Skip to main content
All CollectionsSetting up your platformDesigning and styling your platform
What are the recommended dimensions and sizes of the platform images ?
What are the recommended dimensions and sizes of the platform images ?

All you need to know about image sizes, dimensions and displaying. Also find some good and less good examples.

Joost Vandenbroele avatar
Written by Joost Vandenbroele
Updated over 3 weeks ago

There are multiple places where you can customize your platform with images (pictures or designed visuals or graphics) to make your platform more engaging and communicate the right look and feel. Here are the exact guidelines per image type to make sure your images crop correctly and don't look blurry.


1. Types of images on your platform

An image can be a simple picture or a designed visual or graphic. These are the different types of images that you can build in your platform and projects:

  • Homepage banner

  • Project/folder card

  • Project/folder banner

  • Input (idea) card

  • Logo

  • In-text images

  • Proposals

  • Event cards


2. Image sizes

To avoid pixelated images, always make sure your image is heavy enough, i.e. it needs to have a resolution (dpi) of 72dpi at least. Images should be a png or jpg and maximum of 10 MB in size.

* dpi, or dots per inch, is a measure of the resolution of an image. The higher the dot density, the higher the resolution of the image.


3. Image dimensions, ratio and responsiveness

Recommended dimensions are different per image type. It's important to note that images display differently depending on the device you use to visit the platform. See point 4 for display recommendations.

This table outlines the suggested dimensions and ratio per image type. The image upload tool helps you with cropping any image to the right ratio at all times.

Image type

Displayed where?

Dimensions

Ratio


Mobile ratio

Homepage banner

Can be full-width banner or 1 row or column, based on your settings.

1440 x 480 px

3:1

May be displayed as approximately 1:1 on mobile phones

Project/folder card

On homepage or in folder to represent a project

1400 × 1050 px

4:3

Will also show as 4:3 on mobile phones

Project/folder banner

Displayed on the top of your project or project folder page

2400 × 600px

4:1

May be displayed as approximately 3:1 on mobile phones

Input (idea) card

Displayed on top of the input (idea e.a) or in the input overview



1024 × 1024px

1:1

May be displayed as approximately 2:1 or 3:1 on mobile phones

Site Logo

Top left in navigation menu


​Minimum height:
48px

2:1

Event Card within a project

Displayed at the bottom of your project pages

1800 × 600px

3:1

Proposal card

Main picture displayed on the list with all other proposals.


1000x500px

2:1

In-text image

in project/phase descriptions or survey questions

Image titles are mandatory for accessibility reasons

can be resized in the text

Event Card

At the bottom of project pages AND in the Events tab on the navigation bar

1800 × 600px

3:1

Your platform is responsive. This means images display differently based on the screen type (desktop, tablet, mobile phone). We therefore recommend avoid having any text or info on the image and only use decorative images.

  • Why do we recommend not having text or info on images?

Not only is this better for accessibility and readability, but any text is likely to get cropped at different browser sizes. Think of your images as providing visual interest rather than critical content - you can use the title and description fields to convey written information and add additional images to your project and folder descriptions if you'd like to provide more information for your platform visitors.

4. Image displaying in the homepage banner (+examples)

For the homepage banner you can choose between 3 options: "Full width", "Two rows" or "Fixed Ratio".

For any of the3 layout options it's important to pick an image that preferable has no text or info on it.

For every image type, there is a different behavior, to make sure the platform works well on all devices. The "Safe Zone" is the area that is shown at all times.

Full-width banner

The full-width banner gives the best visual effect but resizes & crops the most. Only use this with abstract images.

Two-rows banner

This banner is in particular useful with images that don’t work well with text from the title, subtitle or button. These items will be pushed below the banner.

Fixed-ratio banner

The fixed-ratio banner maintains it's height and most of it's width at all times. This is a good banner type if you want the main area of the image to be visible at all times.

The recommended ratio for the fixed-ratio banner is 3:1. This image is always cropped to a certain ratio to make sure all crucial aspects are on display at all times. If you upload an image that isn't already a 3:1 ratio, you'll be able to drag the image up and down to make sure the important parts show in the fixed area.

5. Image displaying in projects

In a project there are three places where you can add images: Project/folder card, Project/folder banner and an Input (idea) card.

When you upload an image to use as project/folder card or as project/folder banner, you can drag the image and choose which part of the image is always visible. The grid shows what will always be visible and the vague part of the image will be cut off. When you upload an image that is already the right dimensions, you won't be able to drag the image around.

Idea cards will always show in a 4:3 ratio. Here there is no option to drag the image in the grid.

6. Finding a good image

💡 Having trouble finding a good image? Copyright-free image galleries such as Pexels and Unsplash or Burst can often be a good starting point to find nice images with good quality.

7. Attachements

An attachment cannot exceed 50 MB, per attachment. You can attach as many attachements of 50MB as you wish.

8. Resizing images

While you are able to resize images in the normal test boxes on the platform by clicked and dragging the extremities up and down to resize it, as soon as you are inside the content builder (project description, report, homepage builder...) it is not possible to edit the size of the image that way. The image will follow the size you upload it as.

There is a trick you an use if you need to resize an image inside the content builder. You can use columns within columns to make the image smaller:



Need more help or support? Contact our Support Team via the chat bubble.

Did this answer your question?