Ajouter des images à un site Web est non seulement une nécessité, c’est aussi un excellent moyen d’attirer l’oeil des visiteurs sur des éléments d’intérêt. Comme pour le texte, il existe une façon correcte d’intégrer et d’optimiser les images sur un site Web. Voici quelques conseils pour y arriver.

* Attention: je pars du principe que l’image que vous utilisez vous appartient ou que vous êtes autorisés à l’utiliser. Je reviendrai dans un prochain article sur la question des droits et de l’utilisation de contenu provenant de sites distants.

Préparer une image pour le Web

Une des premières choses à retenir touche au format des images. Dans un premier temps, seuls les formats JPG, GIF et PNG peuvent être lus par les navigateurs (ce qui exclut donc les fichiers issus de logiciels de design comme Photoshop ou Illustrator – ou leurs équivalents libres GIMP et Inkscape).

En ce qui a trait à la taille et la résolution des images, il faut d’abord savoir que les navigateurs ne peuvent rendre une résolution d’image supérieure à 72dpi. La première chose à faire sur une image qu’on souhaite intégrer sur le Web est donc d’en réduire la résolution à ce niveau, ce qui permet d’en réduire une première fois la taille (considérant que celle-ci est importante sur le fichier source).

Une fois la résolution de l’image réduite à 72 dpi, il importe ensuite d’en réduire la taille afin que le fichier ne soit pas trop lourd (dans certains cas, il peut être souhaitable de conserver une taille importante pour un fichier que le visiteur voudra scruter, une carte par exemple, mais il faut garder en tête que les images lourdes ralentissent le temps de chargement, ce qui constitue un irritant majeur pour les visiteurs). Comme une image ne doit jamais dépasser le cadre d’une maquette, sa largeur maximale sera d’environ 980px.

Vous pouvez effectuer ces opérations sur les images grâce à un logiciel de traitement d’image comme Photoshop (maintenant disponible en infonuagique), ou son équivalent GIMP (gratuit et libre d’utilisation).

Intégrer une image dans un article ou une page

WordPress permet d’intégrer facilement une image dans un article ou une page. Tout d’abord, positionnez votre curseur à l’endroit où vous voulez insérer l’image. Cliquez ensuite sur la boîte « Ajouter un média » située en haut à gauche de l’éditeur de la page.

Dans la boîte de dialogue qui s’ouvre alors, vous sélectionnez, sur votre ordinateur, le fichier graphique que vous souhaitez mettre en ligne. Une fois le fichier téléchargé, un nouvel écran s’affiche qui vous montre tous les fichiers de votre bibliothèque de médias et qui vous permet de configurer, dans la section située à droite de votre écran, la façon dont l’image s’affichera dans la page.

Le premier élément dont il faut tenir compte, d’autant que c’est celui qui est le plus souvent négligé, est le texte alternatif de l’image. Cet élément est important pour deux raisons: d’abord, il permet aux personnes utilisant un logiciel de reconnaissance de texte (par exemple les personnes non voyantes) de savoir ce que contient l’image; ensuite, il permet aux moteurs de recherche d’indexer l’image en fonction de ce qu’elle représente, ce qui pourra générer davantage de trafic sur votre site.

La première boîte de cette section permet d’entrer un titre pour l’image, lequel s’affichera lorsque la souris du visiteur survolera l’image. La seconde boîte de cette section permet quant à elle d’entrer une légende pour l’image, laquelle s’affichera dans une bordure qui apparaîtra en dessous de l’image.

La section se situant en dessous ce ces éléments permet, de son côté, de contrôler l’affichage de l’image. Voici la description des options disponibles:

• Alignement: ces paramètres permettent de choisir l’emplacement de l’image au sein de la page. Si vous choisissez « Aucun », l’image se positionnera à gauche et obligera un retour de ligne pour le texte qui l’entoure, si c’est le cas. Si vous choisissez « Droite » ou »Gauche », par contre, l’image se positionnera d’un côté ou de l’autre de la page, enveloppée par le texte (comme c’est le cas sur la présente page). Finalement, si vous choisissez « Centre », l’image imposera un retour de ligne et se positionnera au centre de la page.
• Lier à: ce menu vous permet de déterminer vers quoi pointe l’image. Vous pouvez d’abord faire en sorte qu’elle ne renvoie à aucun élément. Il est ensuite possible de la faire pointer vers le fichier source de l’image, ce qui peut être utile si celui-ci est plus volumineux que l’image reproduite sur la page (voir l’exemple de la carte, mentionné plus haut, en gardant en tête l’enjeu de ne pas surcharger une page d’images lourdes). Finalement, l’image peut pointer vers un site externe ou une autre page du site. Il est alors possible de préciser vers quelle adresse (URL).
• Taille: typiquement (cela peut varier selon les thèmes), trois options de taille sont disponibles pour l’insertion d’images. D’abord, il est possible d’en conserver la taille originale. Ensuite, un format moyen existe, qui conserve la proportion d’origine de l’image mais limite sa largeur à 300px (c’est le cas des images utilisées sur cette page). Finalement, il est possible d’insérer une miniature de format standard (150px X 150px).

Modifier une image existante

Vous avez déjà intégré une image dans votre page, mais souhaitez l’ajuster? C’est facile et ça permet d’en raffiner le comportement. D’abord, cliquez une première fois sur l’image. Vous verrez apparaître deux icônes dans le coin supérieur droit de celle-ci. Celui de gauche permet d’éditer l’image et celui de droite, de la supprimer.

Le menu suivant vous permet alors d’ajuster plusieurs éléments de l’image. Sélectionnez d’abord l’onglet « Options avancées » dans le haut de l’écran.

Le premier point concerne l’outil permettant de redimensionner (à la baisse la majorité du temps) l’image à volonté. Le second point concerne la possibilité de mettre une bordure à l’image ou encore d’en préciser l’espacement vertical ou horizontal. Finalement, le troisième point, peut-être le plus important, concerne la possibilité d’ouvrir le lien vers lequel pointe l’image dans une nouvelle fenêtre (ou un nouvel onglet). Cette fonction est particulièrement indiquée quand il s’agit d’un lien externe (il est généralement recommandé d’ouvrir les liens vers des sites externes dans de nouvelles fenêtres ou de nouveaux onglets).

Alors voilà, maintenant, vous savez. Si vous avez des questions, lâchez-vous lousses.

P.S. Après le comment, le pourquoi. Je suis retombé récemment, du moins plus sérieusement, dans les travaux de Jakob Nielsen et de ses associés sur l’utilisabilité et les études biométriques des comportements (notamment l’étude des trajets de l’oeil sur l’écran) des utilisateurs des sites Web. Dans un article qui résume plutôt bien le comportement des usagers vis-à-vis des images, ils montrent que l’oeil peut porter beaucoup d’attention à une image pourvu que celle-ci soit authentique et porteuse d’informations quant à son objet de recherche. Les images décoratives sont, pour ainsi dire, invisibles (c’est aussi vrai pour les publicités en général, peu importe ce qu’en pensent les gens de marketing). Choisissez vos images en fonction de vos objectifs et intégrez-les correctement!