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 |
![]() |
4/3 | 4 | Dimensions du fichier image : 704 ✕ 528 Taille affichée à l’écran : 352 ✕ 264 |
![]() |
3/2 | 4 | Dimensions du fichier image : 704 ✕ 464 Taille affichée à l’écran : 352 ✕ 232 |
![]() |
16/9 | 4 | Dimensions du fichier image : 704 ✕ 400 Taille affichée à l’écran : 352 ✕ 200 |
![]() |
2/1 | 6 | Dimensions du fichier image : 1088 ✕ 544 Taille affichée à l’écran : 544 ✕ 272 |
![]() |
3/1 | 6 | Dimensions du fichier image : 1088 ✕ 368 Taille affichée à l’écran : 544 ✕ 184 |
![]() |
4/1 | 6 | Dimensions du fichier image : 1088 ✕ 272 Taille affichée à l’écran : 544 ✕ 136 |
![]() |
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 |
![]() |
4/3 | 3 | Dimensions du fichier image : 512 ✕ 384 Taille affichée à l’écran : 256 ✕ 192 |
![]() |
3/2 | 3 | Dimensions du fichier image : 512 ✕ 336 Taille affichée à l’écran : 256 ✕ 168 |
![]() |
16/9 | 6 | Dimensions du fichier image : 1088 ✕ 608 Taille affichée à l’écran : 544 ✕ 304 |
![]() |
2/1 | 4 | Dimensions du fichier image : 512 ✕ 384 Taille affichée à l’écran : 256 ✕ 192 |
![]() |
3/1 | 8 | Dimensions du fichier image : 512 ✕ 336 Taille affichée à l’écran : 256 ✕ 168 |
![]() |
4/1 | 8 | Dimensions du fichier image : 1088 ✕ 608 Taille affichée à l’écran : 544 ✕ 304 |
![]() |
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 %.
- Redimensionnement des fichiers PNG/JPEG : https://resizeimage.net/
- Compression des fichiers PNG/JPEG : https://tinypng.com/
- Compression des fichiers SVG : https://vecta.io/nano
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](../../markdown-assets/images/photos/DS_images_ppl_working1.jpg)
![le propriétaire d’un magasin de bicyclettes](../../markdown-assets/images/photos/DS_images_ppl_working2.jpg)
![des collègues dans une usine de fabrication](../../markdown-assets/images/photos/DS_images_ppl_working3.jpg)
![une apprentie souriant sur un chantier](../../markdown-assets/images/photos/DS_images_ppl_working4.jpg)
Fierté en Ontario – confiance et sentiment d’appartenance
![deux motocyclistes sur une route de campagne](../../markdown-assets/images/photos/DS_images_pride_ON1.jpg)
![des skieurs alpins de sortie par une belle journée d’hiver](../../markdown-assets/images/photos/DS_images_pride_ON2.jpg)
![un homme marchant dans un parc provincial](../../markdown-assets/images/photos/DS_images_pride_ON3.jpg)
![gros plan sur les bottes d’un couple qui se promène dans la nature à l’automne](../../markdown-assets/images/photos/DS_images_pride_ON4.jpg)
Gens de tous les jours – optimisme, collaboration
![des amis qui boivent une bière en terrasse](../../markdown-assets/images/photos/DS_images_everyday_ppl1.jpg)
![un fermier souriant](../../markdown-assets/images/photos/DS_images_everyday_ppl2.jpg)
![un couple de personnes âgées chez elles](../../markdown-assets/images/photos/DS_images_everyday_ppl3.jpg)
![un jeune couple et leur nouveau-né](../../markdown-assets/images/photos/DS_images_everyday_ppl4.jpg)
Centré sur le service – fiable, attentionné et personnel
![une infirmière et sa patiente échangent un sourire](../../markdown-assets/images/photos/DS_images_focused_service1.jpg)
![une équipe de mécaniciens fiers de leur travail](../../markdown-assets/images/photos/DS_images_focused_service2.jpg)
![des poteaux électriques dans un champ au coucher du soleil](../../markdown-assets/images/photos/DS_images_focused_service3.jpg)
![une jeune mère qui travaille chez elle, entourée de ses enfants](../../markdown-assets/images/photos/DS_images_focused_service4.jpg)
Styles de photographie
Primaire
Gens en contexte – moments de candeur
![Photo de personnes dans différentes situations : des amies qui s’étreignent](../../markdown-assets/images/photos/DS_images_ppl_context1.jpg)
![Photo d’une personne dans différentes situations : un randonneur en forêt](../../markdown-assets/images/photos/DS_images_ppl_context2.jpg)
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é](../../markdown-assets/images/photos/DS_images_ppl_context3.jpg)
![Photos en plan américain sur fond coloré de deux Ontariens à l’air décontracté](../../markdown-assets/images/photos/DS_images_ppl_context4.jpg)
Secondaire
L’Ontario, notre foyer et un lieu de possibilités
![Photos de paysages de l’Ontario : la baie Georgienne](../../markdown-assets/images/photos/DS_images_secondary1.jpg)
![Vue aérienne du centre-ville de Toronto](../../markdown-assets/images/photos/DS_images_secondary2.jpg)
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](../../markdown-assets/images/photos/DS_images_secondary3.jpg)
![Gros plan sur les mains d’une femme préparant le repas dans sa cuisine](../../markdown-assets/images/photos/DS_images_secondary4.jpg)
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]"
soitalt="[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.