Dernière mise à jour : 19 octobre 2023
Le ratio d’image est le rapport entre la largeur et la hauteur de l’image. Il permet d'offrir à l’utilisateur une cohérence visuelle dans l’affichage de celle‑ci sur différentes tailles d’écrans. Il facilite aussi le travail de développement.
Anatomie
Utilisation des ratios d’images normés
Les ratios normés ici sont à prioriser pour toutes les images dans le contenu de la page, par exemples les blocs textes et images, ainsi que pour les images dans les tuiles.
Ratio 16:9
C’est le ratio à prioriser. Ce ratio est le standard pour les vidéos et fonctionne bien pour les images de contenus
Ratio 1:1
Toujours de format rond, il est utilisé uniquement pour les images représentant un sujet unique et facilement reconnaissable, même en petite taille. À noter : l’image ronde au ratio 1:1 doit occuper trois colonnes dans la résolution de petite taille (mobile). Veuillez ne jamais utiliser de ratio 1:1 de format carré.
Ratio 3:2
Il est possible d’utiliser une image en format 3:2 dans un cas d’exception où le visuel est très important, et que le sujet de l’image se prête mieux à un format légèrement plus haut que le 16:9 standard.
Ratio sur-mesure
Dans certains cas, comme dans le cas d’une bannière vedette (hero) ou d’un carrousel, les images utilisent des ratios sur‑mesure, et le ratio peut varier d’une taille d’écran à l’autre.