Which image format should I be using for my uploads on the Dashboard?

Optimizing the display of your widgets

Ugo Stephant avatar
Écrit par Ugo Stephant
Mis à jour il y a plus d’une semaine

To customize the look and feel of your paywall, you can download 2 images in the Appearance section of your Dashboard: the logotype and the cover image. In both cases, your images must be JPGs or PNGs. Particularities exist between the 2 graphical templates available and require images to be uploaded into certain dimensions.

Logotype

For performance reasons, we suggest that you don't upload a file bigger than 200kB. Naturally, the lighter it is, the better the user experience will be.

Logotype for the “compact” template

No matter the format of your logo (horizontal or square), its height will be 70px in the compact widget. Its width will be calculated proportionally. For an optimal display on recent screens, it is important to upload a 140px-height image minimum.

Example above: horizontal logo

Example above: square logo

Please note that on this template, there is no border around the logo. If you're uploading a logo with a transparent or white background, don't keep an internal margin because it will be centered on a mobile but left-aligned on a desktop. This can lead to a strange look and feel:

> The example above shows a logo where the internal margin has not been removed. As a result, the display is not optimal.

If you're uploading a version of your logo with a colored background, don't forget to keep an internal margin that will give it some space.

Logotype for the “landscape” template

No matter the format of your logo (horizontal or square), its height will be 100px in the landscape widget. Its width will be calculated proportionally. For an optimal display on recent screens, it is important to upload a 200px-height image minimum.

Example above: horizontal logo

Example above: square logo

With this template, there is a border around the logo so that the latter and the cover image can coexist without conflict. Moreover, a white background is set by default in this zone. Therefore, uploading a transparent version of your logo is useless. Instead, opt for a background-version of your logo (colored or not) that will include an internal margin, giving it more space.

Cover image

For performance reasons, we suggest that you don't upload a file bigger than 200kB. Naturally, as with the logotype, the lighter it is, the better the user experience will be.

Cover image for the “compact” template

The cover image will be displayed on 100% of the height of your widget. It will be horizontally centered and cropped to reach a 140px width on desktop. On a mobile, a virtical line will be shown instead. This line will be the skin color that is defined in the same Appearance section.

Cover image for the “landscape” template

The cover image will be displayed on 100% of the width of your column. With this, it will be vertically centered and cropped to reach a 140px height on desktop and a 90px height on mobile devices.

Need help choosing the right colors or want to preview the look and feel of your widgets on a desktop and a mobile? Our other articles are here to help!

Feel free to contact us on Intercom if you have any questions! 

Avez-vous trouvé la réponse à votre question ?