Visuels

L’intégration des images sur un site Web doit être réfléchie pour enrichir la lecture, garantir l’accessibilité et optimiser la performance. Ce guide couvre les bonnes pratiques essentielles :

1. Choix des visuels
2. Accessibilité
3. Droits d’auteurs
4. Nomenclature
5. Dimensions

1. Choix des visuels

Il est essentiel de choisir des images pertinentes qui enrichissent la lecture en brisant le rythme lorsqu’un contenu est dense. Un choix judicieux d’images permet non seulement d’aérer la page, mais aussi d’apporter une valeur ajoutée au message. Il est donc important d’agir intelligemment en sélectionnant des visuels adaptés et significatifs.

• Les utilisateurs viennent sur votre site principalement pour le contenu.
• Les images ajoutées à une page devraient appuyer le contenu de la page.
• Évitez de mettre des images pour remplir ou décorer la page.

Voici quelques exemples pour vous aider à déterminer si une image est pertinente ou non :

Exemple 1

Le texte d’une page d’un site mentionne les installations à la fine pointe de la technologie d’un laboratoire.

On y présente une photo des installations.

✅ L’image est pertinente.

Exemple 2

Le contenu d’une page explique les différentes façons de payer les frais de scolarité à l’UQAM, ainsi que les frais occasionnés pour les retards, etc.

On y présente une photo d’un pavillon de l’UQAM.

❌ L’image n’est pas pertinente, puisqu’elle n’est pas en lien direct avec le contenu.

Exemple 3

Le contenu d’une page explique les différentes façons de payer les frais de scolarité à l’UQAM, ainsi que les frais occasionnés pour les retards, etc.

On y présente une photo d’un relevé de frais de scolarité de l’UQAM.

❌ L’image n’est pas nécessaire. Bien que le relevé de frais de scolarité soit en lien avec le contenu, l’image du relevé, sans explication, n’ajoute pas une information valable au contenu.

Exemple 4

Le contenu d’une page explique les différentes façons de payer ses frais de scolarité à l’UQAM, ainsi que les frais de retard, etc.

On y présente une image d’un relevé de frais de scolarité de l’UQAM où on a encerclé une zone pour attirer l’attention. Cette zone fait référence à ce qui est écrit dans le contenu (ou dans la légende de l’image).

✅ L’image est pertinente. Elle est un complément d’information au contenu.

Exemple 5

Le contenu d’une page fait le résumé d’un article scientifique sur le déclin de la population d’une espèce d’oiseau du nord du Québec.

On y présente une photo de l’oiseau et un graphique montrant les statistiques de la population de l’espèce au fil des ans.

✅ Les 2 images sont pertinentes. Elles sont des compléments d’information au contenu.

2. Accessibilité

L’accessibilité Web permet à tout le monde, que ce soit des personnes en situation de handicap, des personnes âgées ou des novices, d’avoir le même accès à l’information offerte sur un site Web.

Avantages :

Pour les utilisateurs	Pour vous
Naviguer aisément sans aucune barrière.	Avoir un meilleur référencement et une meilleure portée.

• Prévoyez de pouvoir mettre en pause un contenu en mouvement.
• Veillez à ce que l’information soit claire avec et sans l’utilisation de couleurs

Le World Wide Web Consortium (W3C) a mis en place des règles pour l’accessibilité de vos contenus Web. Pour en savoir davantage, vous pouvez consulter les bonnes pratiques de rédaction répertoriées par Accede.

Pour rendre une image accessible, il est nécessaire d’écrire un texte descriptif de celle-ci à insérer dans le champ « Alternate Text ». Ceci permettra aux personnes ayant une déficience visuelle de mieux percevoir le site.

3. Droits d’auteurs

Il est crucial de vérifier que vous avez le droit de publier chacune des images se trouvant sur votre site Web. Mieux vaut ne pas publier une image si vous n’avez pas la certitude que vous pouvez l’utiliser.

Pour en savoir davantage sur les droits d’auteur, vous pouvez également consulter le site des bibliothèques: Droit d’auteur.

Si vous désirez publier une photo que vous avez prise vous-mêmes (ou qu’un de vos collègues ou connaissances a prise) contenant des sujets humains dans votre site, vous devez avoir leur approbation. Lors de la prise de photos, nous vous recommandons de faire remplir le formulaire d’autorisation suivant aux sujets des photos.

Formulaire – droits

Un formulaire de consentement est également utilisé pour des captures vidéo.

Cession de droits – sans rémunération UQAM

4. Nomenclature

Il est important de bien nommer les fichiers avant de les téléverser sur votre site Web.

Quelques points à respecter :

• Évitez de mettre des espaces dans un nom de fichier. Remplacez-les plutôt par des tirets ou des « soulignés ».

✅ voyage-au-maroc.jpg

❌ voyage au maroc.jpg

• Évitez d’utiliser des caractères spéciaux dans le nom des fichiers (apostrophes, points, virgules, accents, etc.)

✅ ruee_vers_or.png

❌ ruée_vers_l’or!.png

• Nommez les fichiers de manière explicite.

✅ ane_qui_broute.jpg

❌ T6V334S2.jpg

• Évitez les noms de fichiers trop longs.

✅ fleche_bleue_gauche.png

❌ fleche_bleue_pointant_vers_la_gauche.png

5. Dimensions

Plus une page Web met de temps à s’afficher, plus l’utilisateur risque de la quitter avant d’en avoir consulté le contenu.

Les images sont les principales coupables de la lourdeur excessive (grande quantité de données à télécharger) d’une page Web. Il est donc important d’user de stratégies permettant de réduire leur poids afin d’en accélérer le téléchargement par l’utilisateur.

Pour optimiser une image, il faut considérer les éléments suivants :

Résolution de l’image

Plus l’image est grande, plus elle mettra de temps à télécharger. Il est donc recommandé de la sauvegarder dans la taille exacte qu’elle aura sur la page Web. 

Nature de l’image

L’image peut être une icône, un graphique, une photographie, une publicité, etc.

Il existe plusieurs formats de fichiers d’images pris en charge par la majorité des navigateurs Web modernes. Les formats employés pour les images sur le Web sont généralement les suivants.

• JPEG (Joint Photographic Experts Group) : photos et images complexes
• PNG (Portable Network Graphics) : images simples, graphiques, logos, icônes
• SVG (Scalable Vector Graphics) : graphiques, logos et icônes
• GIF (Graphics Interchangeable Format) : graphiques, logos, icônes et animations

Il est important de choisir le format approprié selon la nature de l’image.

JPEG

Voici une photo JPEG traitée avec différents paramètres de qualité de l’image :

Notez que la différence est faible au niveau de l’image par rapport à la version traitée avec une qualité de 100, mais le poids est considérablement plus léger.

Exemple d’élément graphique exporté en JPEG avec divers paramètres de qualité :

Comme les formes sont calculées mathématiquement, on peut agrandir l’image sans perdre de qualité, ni voir apparaître de pixels. (Note : Le fichier de l’exemple est au format PNG et est une simulation de ce qu’on verrait si on agrandissait un fichier SVG.)

GIF

Exemples d’images exportées au format GIF :