Communications numériques gouvernementales Beta

Système de design gouvernemental

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 Cet hyperlien s'ouvrira dans une nouvelle fenêtre..

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 Cet hyperlien s'ouvrira dans une nouvelle fenêtre..

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

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

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

Dernière mise à jour : 10 juillet 2020