Images et photographie

Principe directeur : Inclure uniquement les éléments qui ont un sens.


À propos de cet élément

Les images et les photos doivent être utilisées avec parcimonie, uniquement lorsqu’elles ajoutent un sens au contenu ou aident les gens à accomplir une tâche.

Quand utiliser des images

Ce qu’il faut faire

  • utiliser des images pour illustrer des choses concrètes (par exemple, des animaux, des cartes d’identité, des vignettes d’immatriculation) et non des concepts abstraits (par exemple, lumière, holistique, synergie)
  • utiliser la marque de l’identité visuelle de l’Ontario (logos et graphiques de campagne de marketing approuvés) et les marques ontariennes approuvées (par exemple, ServiceOntario)
  • utiliser des images pour illustrer la hiérarchie du contenu en utilisant des bannières hautes sur les pages d’entrée (pages d’accueil, page d’atterrissage d’une campagne de marketing), des bannières étroites sur les pages d’atterrissage des sujets de haut niveau et aucune bannière sur les pages des sous-sujets ou des articles
  • optimiser les images pour le Web afin de réduire autant que possible la taille des fichiers tout en maintenant une qualité raisonnable

Ce qu’il ne faut pas faire

  • utiliser des images de texte, à l’exception des logos pour lesquels la préservation de la police de caractères est essentielle, ou des cartes et des graphiques - les images de texte créent des obstacles pour les utilisateurs d’appareils mobiles et les personnes malvoyantes
  • développer une nouvelle marque pour un programme ou une page - utiliser plutôt l’identité visuelle de l’Ontario
  • déformer ou modifier fortement les images associées à l’identité visuelle de l’Ontario
  • utiliser des images qui n’ont aucun rapport avec le sujet de la page
  • utiliser des images trop petites pour montrer des détails importants, surtout si elles sont visionnées sur des appareils mobiles
  • mettre du texte sur des images

Tailles et formats d’images

Les dimensions des fichiers images dans les tableaux ci-dessous sont compatibles avec toutes les résolutions d’écran au nombre de colonnes indiqué.

Format de l’image Nombre recommandé de colonnes dans la grille Dimensions pour le nombre recommandé de colonnes dans la grille (px) Exemple dans grille à 12 colonnes
1/1 3 Dimensions du fichier image :
512 512

Taille affichée à l’écran :
256 256
Nombre recommandé de colonnes dans la grille : 3
4/3 4 Dimensions du fichier image :
704 528

Taille affichée à l’écran :
352 264
Nombre recommandé de colonnes dans la grille : 4
3/2 4 Dimensions du fichier image :
704 464

Taille affichée à l’écran :
352 232
Nombre recommandé de colonnes dans la grille : 4
16/9 4 Dimensions du fichier image :
704 400

Taille affichée à l’écran :
352 200
Nombre recommandé de colonnes dans la grille : 4
2/1 6 Dimensions du fichier image :
1088 544

Taille affichée à l’écran :
544 272
Nombre recommandé de colonnes dans la grille : 6
3/1 6 Dimensions du fichier image :
1088 368

Taille affichée à l’écran :
544 184
Nombre recommandé de colonnes dans la grille : 6
4/1 6 Dimensions du fichier image :
1088 272

Taille affichée à l’écran :
544 136
Nombre recommandé de colonnes dans la grille : 6

Autres tailles d’images

Format de l’image Autre nombre de colonnes dans la grille Dimensions pour un autre nombre de colonnes dans la grille Exemple dans grille à 12 colonnes
1/1 2 Dimensions du fichier image :
320 320

Taille affichée à l’écran :
160 160
Autre nombre de colonnes dans la grille : 2
4/3 3 Dimensions du fichier image :
512 384

Taille affichée à l’écran :
256 192
Autre nombre de colonnes dans la grille : 3
3/2 3 Dimensions du fichier image :
512 336

Taille affichée à l’écran :
256 168
Autre nombre de colonnes dans la grille : 3
16/9 6 Dimensions du fichier image :
1088 608

Taille affichée à l’écran :
544 304
Autre nombre de colonnes dans la grille : 6
2/1 4 Dimensions du fichier image :
512 384

Taille affichée à l’écran :
256 192
Autre nombre de colonnes dans la grille : 4
3/1 8 Dimensions du fichier image :
512 336

Taille affichée à l’écran :
256 168
Autre nombre de colonnes dans la grille : 8
4/1 8 Dimensions du fichier image :
1088 608

Taille affichée à l’écran :
544 304
Autre nombre de colonnes dans la grille : 8

Compression d’images et formats de fichiers

Compression de fichiers images

Comprimez toujours une photo avant de la télécharger sur le Web. La compression d’images est un facteur important pour la convivialité, car elle permet un chargement plus rapide des pages lorsque la connexion Internet est lente.

Nous recommandons de comprimer les fichiers JPEG à un niveau de qualité d’au moins 84 %.

Formats de fichiers images

Pour les photographies et les images complexes, utilisez les formats JPG ou JPEG.

Pour les grandes illustrations qui contiennent des blocs de même couleur, les formats PNG ou SVG sont optimaux.

Pour les illustrations ou les photographies qui comportent des sections transparentes, les formats PNG ou SVG sont optimaux.

Pour les icônes et les illustrations, nous recommandons un format de fichier SVG.


Photographie

Utilisez la photographie pour créer un lien plus étroit avec votre public.

La photographie doit :

  • sembler authentique, humaine, réelle, et éviter de donner l’impression de provenir d’une banque d’images
  • exprimer tout un éventail de sujets et de services
  • être inclusive et représentative de tous les Ontariens

Où trouver des photos

Ce qu’il faut faire

  • consulter la photothèque de l’Ontario. La photothèque peut être utilisée par le personnel de la FPO dans les ministères, agences, conseils et commissions du gouvernement. Les images sont libres de redevances et protégées par le droit d’auteur de la Couronne.
  • essayer de trouver des images prises en Ontario, ou des images d’Ontariens
  • s’assurer que toutes les photos provenant d’une banque d’images sont payées et utilisées sous licence par le gouvernement de l’Ontario
  • obtenir l’autorisation du photographe si vous utilisez une photo personnelle - vous pouvez ajouter un crédit photo dans une légende

Ce qu’il ne faut pas faire

  • utiliser des photos dont vous ne connaissez pas la source, le propriétaire, le droit d’auteur ou l’origine
  • utiliser les moteurs de recherche pour trouver des images qui ne sont pas explicitement disponibles pour une licence ou une utilisation
  • utiliser des images qui contiennent des filigranes, ou modifier les images pour supprimer les filigranes

Thèmes à prendre en compte lors de la recherche de photos

Essayez d’utiliser des photos qui correspondent aux thèmes suivants :

Résidents de l’Ontario au travail – une dynamique forte, engagée et positive

des collègues de travail dans un bureau lumineux
le propriétaire d’un magasin de bicyclettes
des collègues dans une usine de fabrication
une apprentie souriant sur un chantier

Fierté en Ontario – confiance et sentiment d’appartenance

deux motocyclistes sur une route de campagne
des skieurs alpins de sortie par une belle journée d’hiver
un homme marchant dans un parc provincial
gros plan sur les bottes d’un couple qui se promène dans la nature à l’automne

Gens de tous les jours – optimisme, collaboration

des amis qui boivent une bière en terrasse
un fermier souriant
un couple de personnes âgées chez elles
un jeune couple et leur nouveau-né

Centré sur le service – fiable, attentionné et personnel

une infirmière et sa patiente échangent un sourire
une équipe de mécaniciens fiers de leur travail
des poteaux électriques dans un champ au coucher du soleil
une jeune mère qui travaille chez elle, entourée de ses enfants

Styles de photographie

Primaire

Gens en contexte – moments de candeur
Photo de personnes dans différentes situations : des amies qui s’étreignent
Photo d’une personne dans différentes situations : un randonneur en forêt
Gens en personne – toutes les couches de la société
Photos en plan américain sur fond coloré de deux Ontariens à l’air décontracté
Photos en plan américain sur fond coloré de deux Ontariens à l’air décontracté

Secondaire

L’Ontario, notre foyer et un lieu de possibilités
Photos de paysages de l’Ontario : la baie Georgienne
Vue aérienne du centre-ville de Toronto
Gros plan sur les objets qui nous entraînent dans l’histoire
Gros plan sur les bottes d’un homme qui se promène dans la nature à l’automne
Gros plan sur les mains d’une femme préparant le repas dans sa cuisine

Accessibilité des textes et images de remplacement

Chaque image doit avoir un attribut ALT.

Évitez d’utiliser des images pour présenter le contenu du texte. Le contenu du texte doit être écrit en HTML.

Quand ajouter du texte de remplacement

Le texte de remplacement offre une option de remplacement aux images, photographies et autres contenus non textuels.

Si une image est décorative et ne fournit aucune information supplémentaire, l’attribut <alt> doit être vide. Une façon de déterminer si une image est décorative est de rédiger le texte de remplacement, puis de décider s’il ajoute une valeur supplémentaire pour l’utilisateur.

Exemples de texte de remplacement :

  • texte de remplacement qui apporte une valeur ajoutée : « Le ministre de la Santé serre la main d’un participant à la conférence »
  • texte de remplacement qui n’apporte pas de valeur ajoutée : « Carré bleu » (l’image est décorative)

Rédaction de texte de remplacement

Ce qu’il faut faire

  • décrire l’image avec précision
  • écrire ce qui est nécessaire pour couvrir les informations et la signification que l’image fournit
  • décrire la fonction, le contenu et le contexte de l’image
  • inclure les détails qui sont importants pour le récit et le sujet de la page
  • être bref et concis - une phrase courte suffit souvent, mais au besoin, employer deux phrases au maximum

Ce qu’il ne faut pas faire

  • répéter l’information dans le texte de remplacement si l’image est entourée de contenu offrant déjà la même information - c’est redondant et ajoute un « fouillis » d’informations pour les utilisateurs d’appareils fonctionnels
  • utiliser des phrases comme « image de … » ou « graphique de … » - les utilisateurs sauront déjà qu’ils sont concentrés sur un élément d’image

Accessibilité des images SVG

Les conseils relatifs à l’accessibilité des textes Alt et des images s’appliquent également aux images SVG, mais il y a quelques considérations supplémentaires à garder à l’esprit avec les SVG.

Images informatives

Une image est « informative » lorsqu’elle transmet visuellement une information qui n’est pas fournie d’une autre manière. Une icône sans texte est un exemple d’image informative.

Pour les images SVG informatives :

  • définir role="img" pour s’assurer que les lecteurs d’écran annoncent « image » au lieu du chemin d’accès à l’image
  • fournir un texte alternatif décrivant l’image en utilisant soit aria-label="[description]" soit alt="[description]"

Images décoratives

Une image est dite « décorative » si elle rehausse visuellement le contenu textuel de la page sans fournir d’informations supplémentaires. Une icône associée à une étiquette de texte est considérée comme décorative, car l’étiquette de texte rend le contenu accessible. La duplication du texte dans l’image serait répétitive pour les utilisateurs de technologies d’assistance.

Pour les images SVG décoratives :

  • les masquer en utilisant aria-hidden="true"
  • les rendre inaccessibles à la focalisation en utilisant focusable="false"

Si vous avez des questions ou souhaitez donner de la rétroaction, veuillez communiquer avec nous.