Contenu
Images
Les images sont des représentations visuelles pouvant entre autres prendre la forme de photographies, d’illustrations, de schémas ou d’infographies. Elles permettent de renforcer ou d’illustrer l’information principale d’une page.
Vue d’ensemble
Cette section offre un aperçu des contextes d’utilisation et des contenus. Pour plus d’informations sur la composition, le comportement et les interactions, consulter l’onglet « Spécifications ».
Options disponibles
Il existe trois options d’images :
- Image seule
- Image avec légende et source
- Image avec icône d’agrandissement
Quand l’utiliser
Les images sont de nature informationnelle : elles accompagnent un texte ou un contenu pour en faciliter la compréhension.
Elles sont appropriées :
- pour illustrer un concept difficile à décrire en mots (ex. carte, schéma, photo scientifique) ;
- pour apporter une information visuelle supplémentaire dans un guide ou un contexte explicatif (ex. photo d’une plante à identifier).
Légende et source
Ajouter une légende lorsque l’image présente une donnée précise, un contenu technique ou une source à citer.
Utiliser la légende pour clarifier le sens de l’image ou identifier un élément essentiel qu’un lecteur ne pourrait pas déduire facilement.
Images nécessitant un agrandissement
Cas où un zoom est pertinent :
- Schémas, cartes et infographies avec du texte essentiel difficile à lire en petit format.
- Illustrations ou photos nécessitant une observation détaillée (ex. spécimen scientifique).
- Documents officiels numérisés dont une partie ou un tout doit être lisible (ex. permis de conduire).
Pour connaître les règles relatives aux textes accompagnant les images pour améliorer l’accessibilité, consulter la fiche Texte de remplacement et description longue.
Quand ne pas l’utiliser
Les visuels qui ne servent qu’à embellir ne sont pas justifiés. On n’utilise pas d’images décoratives ou « traitées artistiquement », sauf dans le cas des pages de rappel de campagne.
Les images animées ou clignotantes sont à éviter, car elles peuvent causer des problèmes pour les personnes sensibles, en particulier celles souffrant de troubles visuels, d’épilepsie photosensible ou d’autres conditions médicales. En plus de nuire à l’expérience utilisateur, ces images peuvent également rendre le contenu du site inaccessible à certaines personnes, compliquant la navigation et la lecture.
Légende et source
Une légende n’est pas nécessaire si le texte voisin ou le contenu principal fournit déjà l’information nécessaire.
Éviter les redondances entre la légende et le texte principal.
Images nécessitant un agrandissement
Cas où le zoom n’est pas pertinent :
- Images trop lourdes.
- Images dont l’agrandissement n’apporte pas d’information supplémentaire.
Anatomie
- Image principale
- Légende et source
- Icône d’agrandissement (si applicable)
Contenus
Information détaillée sur les éléments spécifiques présents dans l’interface, y compris des explications sur leur fonctionnement et leur utilisation optimale.
Légende et source
Une légende peut être ajoutée à l’image (se référer aux sections Quand l’utiliser et Quand ne pas l’utiliser).
La légende ne doit pas répéter le texte de remplacement (éviter la redondance).
La source peut aussi y être placée sous la légende, généralement en italique. Le nom de l’auteur d’une image ou du propriétaire des droits de reproduction doit être précédé du symbole « © ».
Spécifications
Cette section présente des informations techniques sur la composition, les comportements fonctionnels et les interactions du composant. Les spécifications techniques détaillées sont disponibles dans la trousse de design.
Composition
Description détaillée des éléments constitutifs du composant, avec des informations précises sur son anatomie.
Images (complètes)
Positionnement et alignement : Les images sont alignées à gauche par défaut. Si plusieurs images sont placées côte à côte, elles doivent être du même format et séparées par une gouttière de 32 px. Il est recommandé d’harmoniser tailles et ratios pour les images de même nature.
Dimensions : Tous les ratios peuvent être utilisés, tant que l’image respecte les autres recommandations de cette fiche. Trois ratios sont toutefois recommandés : 1:1, 3:2 et 16:9. Ils assurent la cohérence visuelle et une bonne adaptabilité sur mobile. Les images peuvent déroger à ces ratios si elles restent lisibles et accessibles. Par exemple, une image sans texte essentiel dont les zones importantes restent visibles après redimensionnement peut être conservée.
Espacements : Une marge verticale minimale de 24 px doit séparer une image du texte qui la précède ou la suit. Entre deux images placées l’une sous l’autre, prévoir un espacement d’au moins 32 px pour assurer une bonne lisibilité.
À ne pas faire
- Utiliser une image dont le contenu devient illisible après redimensionnement sur mobile, en raison d’un format inapproprié.
- Forcer un ratio recommandé si cela crée des marges excessives ou dégrade la clarté visuelle de l’image, sans gain en lisibilité ou accessibilité.
À faire
- Utiliser un ratio recommandé (1:1, 3:2, 16:9) pour assurer la lisibilité sur mobile.
- Réorganiser les éléments de l’image si le redimensionnement nuit à la compréhension (ex. découpage en plusieurs images ou révision de la disposition).
- Accepter un ratio non recommandé si l’image ne contient pas de texte essentiel et demeure lisible sur mobile, sans recadrage inutile.
Styles
Il est possible d’ajouter un contour gris autour d’une image au fond blanc pour bien délimiter l’image sur un fond de page blanc.
Comportements
Description des interactions possibles avec les éléments du composant, y compris l’utilisation de la souris et du clavier pour naviguer et effectuer des actions.
Fonctionnel
Fonctionnalités principales et secondaires, ainsi que leur comportement et les actions qu’ils déclenchent.
Images nécessitant un agrandissement
Une icône d’agrandissement placée sur une image permet d’ouvrir celle-ci dans un nouvel onglet (et non dans une nouvelle fenêtre). Pour l’accessibilité, un texte de lien pour lecteur d’écran est requis sur l’icône d’agrandissement (ex. : « Voir l’image agrandie dans un nouvel onglet »).
Interaction
Assistance sur la manière d’interagir avec le composant, que ce soit via la souris ou le clavier.
Souris
Instructions sur l’interaction avec le composant via la souris :
- Cliquer sur l’image pour l’ouvrir dans un nouvel onglet.
Clavier
Instructions sur l’interaction avec le composant via le clavier :
- Naviguer jusqu’à l’image à l’aide de la touche Tab.
- Appuyer sur Entrée pour ouvrir l’image dans un nouvel onglet.
Mises à jour
Cette section présente la disponibilité actuelle des différentes versions du composant ainsi qu'un aperçu des changements passés.
| Date | Description |
|---|---|
| 22 janvier 2026 | Mise à jour de la fiche |
| 8 mars 2022 | Améliorations de la section Quand l’utiliser |
| 14 janvier 2021 | Mise en ligne de la fiche |
Contribuer à améliorer le système de design
Pour nous assurer que cette page est utile et à jour, vous pouvez remplir le formulaire de demandes destinées à l’équipe Design de la Direction des communications numériques gouvernementales. Vous pouvez utiliser ce formulaire pour :
- nous transmettre des questions ou commentaires sur le système de design ;
- être ajouté à la liste d'envoi du système de design ;
- faire une demande de trousse, d'information pour un nouveau projet, etc. ;
- rapporter un bogue dans le site Web ou dans la trousse de développement.
À consulter aussi
Dernière mise à jour : 22 janvier 2026