Images
Les images de Québec.ca sont de nature informationnelle, c’est-à-dire qu’elles renforcent l’information du contenu principal. Les visuels qui ne servent qu’à embellir ne sont pas justifiés.
Quand les utiliser
Tout élément visuel (par exemple, tableau, photo, iconographie) est utilisé pour fournir des renseignements supplémentaires et pour faciliter la compréhension de l’information.
On n’utilise pas d’images décoratives ou « traitées artistiquement », sauf dans le cas des pages de campagnes 
.
Comment les utiliser
Un texte de remplacement (ou texte Alt) décrit une image pour les personnes qui utilisent des technologies d'aide. Il permet aussi aux moteurs de recherche de mieux déchiffrer l'intention des fichiers d'image. Consultez le Guide de rédaction de Québec.ca pour des détails sur l’utilisation des images et des vidéos .
Le nom de l’auteur d’une image ou du propriétaire des droits de reproduction apparaît sous l’image et est précédée du symbole « © ».
Informations techniques
Taille des images et ratio
La largeur des images doit se situer entre 156 px et 714 px.
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 permettent d’éviter certains problèmes de lisibilité et d’accessibilité, tout en conservant une cohérence visuelle au fil des contenus.
Exemple
Dans l'exemple qui suit, l'image n'utilise pas un ratio recommandé.
Une fois redimensionnée sur mobile, il sera difficile de la consulter.
À ne pas faire
Dans cette situation, la solution est de revoir la disposition des éléments qui composent l’image. Le redimensionnement, sur mobile, d’une image qui est claire au format bureau peut entraîner des contraintes de lisibilité et d’accessibilité.
Exemple d’image, découpée en trois parties et placée au ratio 16:9
À faire
Images en dehors des ratios recommandées
Les images peuvent être intégrées en dehors des ratios recommandés si elles respectent les critères de taille, de lisibilité et d’accessibilité.
Exemple d’une image en dehors des ratios recommandés
Description de l'étiquetage.
Pour cette image, le recadrage dans un des ratios proposés créait de grandes marges vides. Comme l’image ne contient pas de texte essentiel à sa compréhension et que les zones d’étiquetage restent visibles même après redimensionnement sur un mobile, on peut l’intégrer sans revoir son ratio.
Voici la même image, au format d’un mobile d’une largeur de 320 px
Description de l'étiquetage.
Texte dans les images
Il faut éviter de placer du texte dans les images. Seul le texte essentiel à la compréhension de l’image devrait s’y trouver, et dans une taille qui ne nuit pas à sa lecture sur mobile.
La description de l’image peut être placée dans les éléments qui l’entourent : le titre, la légende et le contenu.
À ne pas faire
À faire
Position et harmonisation des images de même nature
Les images sont alignées à la gauche. Si des images sont placées côte à côte, elles doivent avoir une gouttière de 32 px et être du même format.
Il est conseillé d’harmoniser les tailles et les ratios des images qui sont de même nature.
À faire
À ne pas faire
Légende et source des images
Une légende peut être ajoutée à l’image. Elle apparaît sous l’image, dans un cadre gris.
La source peut aussi y être placée, en italique, à la suite de la légende.
Le cadre se place 8 px sous l’image et il doit comporter des marges verticales et horizontales de 8 px autour du texte.
CSS de la légende
Color : #223654
Font-family : Open Sans
Font-size : 0.875rem
Line-height : 1.375rem
CSS du cadre
Background-color : #f2f1f1
