Toutes les collections
Mise en place de votre plateforme
Quelles sont les dimensions et tailles recommandées pour les images de la plate-forme ?
Quelles sont les dimensions et tailles recommandées pour les images de la plate-forme ?

Tout ce que vous devez savoir sur la taille, les dimensions et l'affichage des images. Trouvez également de bons et de moins bons exemples.

Joost Vandenbroele avatar
Écrit par Joost Vandenbroele
Mis à jour il y a plus d’une semaine

Il existe de nombreux endroits où vous pouvez personnaliser votre plateforme avec des images (photos ou graphiques) afin de rendre votre plateforme plus attrayante et de communiquer la bonne image et la bonne sensation. Voici les directives exactes pour chaque type d'image afin de vous assurer que vos images sont correctement recadrées et qu'elles ne sont pas floues.


1. Types d'images sur votre plateforme

Une image peut être une simple photo, un visuel ou un graphique. Il s'agit des différents types d'images que vous pouvez intégrer à votre plateforme et à vos projets :

  • Bannière de la page d'accueil

  • Carte de projet/dossier

  • Bannière du projet/dossier

  • Carte d'entrée (idée)

  • Logo

2. Taille des images

Pour éviter les images pixellisées, assurez-vous toujours que votre image est suffisamment lourde, c'est-à-dire qu'elle doit avoir une résolution (dpi) de 72 dpi au moins. Les images doivent être au format png ou jpg et d'une taille maximale de 5 Mo.

* dpi, ou dots per inch, est une mesure de la résolution d'une image. Plus la densité de points est élevée, plus la résolution de l'image est importante.

3. Dimensions de l'image, ratio et réactivité

Les dimensions recommandées varient selon le type d'image. Il est important de noter que les images s'affichent différemment selon l'appareil que vous utilisez pour visiter la plateforme. Voir le point 4 pour les recommandations en matière d'affichage.

Ce tableau indique les dimensions suggérées pour et le ratio par type d'image. L'outil de téléchargement d'images vous aide à recadrer n'importe quelle image au bon ratio à tout moment.

Type d'image

Où sont-elles affichées ?

Dimensions

Ratio


Ratio de mobilité

Bannière de la page d'accueil

Il peut s'agir d'une bannière pleine largeur ou d'une ligne ou d'une colonne, en fonction de vos paramètres.

1440 x 480 px

3:1

Peut être affiché à un rapport d'environ 1:1 sur les téléphones portables.

Carte de projet/dossier

- Carré

Sur la page d'accueil ou dans un dossier pour représenter un projet

960 x 720 px

4:3

S'affiche également en 4:3 sur les téléphones portables.

Bannière du projet/dossier

Affiché en haut de la page de votre projet ou de votre dossier de projet

1440 x360px

4:1

Peut être affiché dans un rapport d'environ 3:1 sur les téléphones portables.

Carte d'entrée (idée)

Affiché en haut de l'entrée (idée e.a) ou dans la vue d'ensemble de l'entrée



575 x 574 px

1:1

Peut être affiché comme approximativement 2:1 ou 3:1 sur les téléphones portables.

Logo du site

En haut à gauche dans le menu de navigation

Hauteur minimale 45 px; pas de largeur minimale ou maximale

Carte d'événement dans un projet

Affiché au bas des pages de votre projet

aucune dimension d'image forcée n'est appliquée

(ratio classique de 3:1 recommandé pour les bannières)

Votre plateforme est réactive. Cela signifie que les images s'affichent différemment selon le type d'écran (ordinateur de bureau, tablette, téléphone portable). Nous vous recommandons donc d'éviter tout texte ou information sur l'image et de n'utiliser que des images décoratives.

  • Pourquoi est-il recommandé de ne pas faire figurer de texte ou d'informations sur les images ?

Non seulement cela améliore l'accessibilité et la lisibilité, mais tout texte est susceptible d'être recadré en fonction de la taille du navigateur. Vous pouvez utiliser les champs titre et description pour transmettre des informations écrites et ajouter des images supplémentaires aux descriptions de vos projets et dossiers si vous souhaitez fournir plus d'informations aux visiteurs de votre plateforme.

4. Affichage de l'image dans la bannière de la page d'accueil (+exemples)

Pour la bannière de la page d'accueil, vous avez le choix entre 3 options : "Pleine largeur", "Deux rangées" ou "Ratio fixe".

Pour chacune des trois options de mise en page, il est important de choisir une image qui, de préférence, ne contient pas de texte ou d'informations.

Pour chaque type d'image, il existe un comportement différent, afin de s'assurer que la plateforme fonctionne bien sur tous les appareils. La "zone de sécurité" est la zone qui est affichée en permanence.

Bannière pleine largeur

La bannière pleine largeur donne le meilleur effet visuel, mais c'est elle qui redimensionne le plus les images de & . N'utilisez cette méthode qu'avec des images abstraites.

Bannière à deux rangs

Cette bannière est particulièrement utile pour les images qui ne s'accordent pas bien avec le texte du titre, du sous-titre ou du bouton. Ces éléments seront placés sous la bannière.

Bannière à rapport fixe

La bannière à rapport fixe conserve en permanence sa hauteur et la majeure partie de sa largeur. Il s'agit d'un bon type de bannière si vous souhaitez que la partie principale de l'image soit visible à tout moment.

Le ratio recommandé pour la bannière à rapport fixe est de 3:1. Cette image est toujours recadrée selon un certain ratio afin de s'assurer que tous les aspects cruciaux sont affichés à tout moment. Si vous téléchargez une image dont le rapport n'est pas déjà de 3:1, vous pourrez faire glisser l'image vers le haut et vers le bas pour vous assurer que les parties importantes apparaissent dans la zone fixe.

5. Affichage d'images dans les projets

Dans un projet, vous pouvez ajouter des images à trois endroits : Carte de projet/dossier, bannière de projet/dossier et carte d'entrée (idée).

Lorsque vous téléchargez une image pour l'utiliser comme carte de projet/dossier ou comme bannière de projet/dossier, vous pouvez faire glisser l'image et choisir la partie de l'image qui sera toujours visible. La grille indique ce qui sera toujours visible et la partie vague de l'image sera coupée. Lorsque vous téléchargez une image qui a déjà les bonnes dimensions, vous ne pouvez pas faire glisser l'image.

Les cartes d'idées s'affichent toujours au format 4:3. Ici, il n'y a pas d'option pour faire glisser l'image dans la grille.

6. Trouver une bonne image

💡 Vous avez des difficultés à trouver une bonne image ? Les galeries d'images libres de droits telles que Pexels et Unsplash ou Burst constituent souvent un bon point de départ pour trouver de belles images de bonne qualité.



Besoin d'aide? Contactez notre équipe support via la bulle de chat .

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