An activity's cover photo is used in multiple places on the platform, in different sizes and dimensions. This can sometimes make it difficult to choose a good image (Looking for an image? You can find royalty-free images here).
In addition, an image often looks slightly different on different screen sizes (phones, tablets, laptops, desktops) or becomes blurry when an image has to be enlarged.
So, how do you choose an image that looks good in most circumstances?
Dimensions
Within Deedmob we use two formats:
1920x700 on the activity page (minimum size)
1920x1080 on the activity cards
As you can see, the formats differ (unfortunately there is no one-size-fits-all solution that works functionally and aesthetically). As a result, in both cases pieces of the selected images are automatically "cropped" when they are shown in the other format.
1920x1080: A strip will be cut off at the bottom and at the top when the image is displayed on the activity page.
1920x700: A strip will be cut on both the left and right when the image is shown on the activity card.
To ensure that the image looks good in all places, it is therefore important to ensure that the most important content is placed centrally on the image.
Examples
1920x700: the black strokes show how the image is being cropped. |
|
Good | Not Good |
| 
|
| 
|
1920x1080: the black strokes show how the image is being cropped. |
|
Good | Not Good |
| 
|
|  |
Now that you know this, you should be able to choose or create a good image.
Editing and cropping an image
Sometimes it is necessary to edit or crop an image yourself beforehand for the best result. For simple editing, you can use the image editing program on your computer. Is that not enough? There are plenty of free tools available, online and offline. Three of our favorites:
Optimize the image for the web
Is your image ready to use? Then it doesn't hurt to optimize the image for the web and reduce the file size (kb/mb). The smaller a file, the faster a page loads. There are a lot of free tools available online that will do this for you. For example:
Websiteplanet Image Compressor (jpg/png compression)
Optimizilla (jpg/png/gif compression)
Now the image is really ready to use!
An overview of all the tips
Make sure you use the correct formats. See above.
Do not use small images. They need to be enlarged and will not look nice on many screens.
Larger images are allowed, but make sure that the proportions remain approximately the same.
Make sure the main content of the image is centrally positioned so that it remains visible after cropping.
Try to avoid using text. If you do use text, make sure that:
you use as little text as possible
the text is big enough
the text is centered so that it remains in full view
If necessary, you can crop the image yourself before uploading it.
Good luck and have fun!