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.
2. Image sizes
4. Image displaying (+ examples)
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
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 5 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 and ratio
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 recommedations.
This table outlines the suggested dimensions and ratio per image type:
Image type |
Displayed where? |
Dimensions |
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 - Square
|
On homepage or in folder to represent a project |
575 x 575 px |
1:1 |
May be displayed as approximately 2:1 or 3:1 on mobile phones |
Project/folder card
|
Displayed on your homepage or in folder to represent a project |
|
1:2 |
|
Project/folder banner |
Displayed on the top of your project or project folder page |
952 x240px |
5:1 | May be displayed as approximately 2:1 on mobile phones |
Input (idea) card |
Displayed on top of the input (idea e.a) or in the input overview |
|
1:1 | May be displayed as approximately 2:1 or 3:1 on mobile phones |
Site Logo |
Top left in navigation menu
| Minimum height 45 px; no width minimum or maximum |
|
|
4. Image displaying (+examples)
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.
What if you do want to have text or info on the image?
Make sure to have that text or info centered in the the middle of the image (banner size) or in the middle third of the image (card size) so that the content displays well both in landscape format and as a square. This way, as the image sizes up and down based on the device, the content will remain visually appealing.
Examples for homepage banner:
You can change the desired layout of your homepage banner. For any of the 3 layout options it's important to pick an image that preferable has no text or info on it.
✅ What works:
This image has no text or info on it and works in all circumstances:
If you have text in the middle of your banner image, make sure to not pick the full-width banner:
❌ What doesn't work:
This image has text in the middle of it. That interferes with the built-in copy and button:
Picking another lay-out would be a better option:
Example for project or project folder banner:
Same as with the platform banner, we recommend not to use text or info on the image. If you do, center it as much as possible.
✅ What works:
This image has no text or info on it and works in all circumstances:
Text on this image stays readable because it's placed in the middle of the image:
❌ What doesn't work:
When resizing, the text become unreadable. You can use the project title or description to get the info across.
Examples for project or input cards:
Project cards ideally have a 1:1 ratio and no text or info on it. However, if you do have text or info on your image and/or your image is long rectangular, center the text as much as possible or leave white space around your text, especially above and under:
✅ What works:
Leave enough whitespace around your image when you upload it to the platform. It will work as a project card:
Make sure that the info on the image that you upload is e.g. centered to the middle third - if you want it to be readable in all circumstances:
✅ What doesn't work:
This uploaded image has text that is not centered to the middle third and has no space around it and therefore doesn't crop correctly as a project card:
5. 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.
6. Tools to resize your images
** Coming up **
Need more help or support? Contact our Support Team via the chat bubble.