Optimiser l’environnement d’une image sur le Web

Voilà donc un billet auquel je songe depuis un petit moment déjà. Je ne l’ai pas fait plus tôt tout simplement parce que la question n’est pas si simple et que beaucoup de facteurs entre en jeux pour optimiser à fond une image sur le Web. C’est parti !

TROP MIGNON !

Ce dossier est composé de plusieurs parties :

  • Quelle image choisir ?
  • La question de la légende
  • Enregistrer et compresser une image pour le Web
  • Quel nom pour mon fichier d’image ?
  • Intégration d’une image dans une page Web
  • Questions en suspens

Quelle image choisir ?

Pour répondre à cette question, il faut se souvenir des objectifs de votre image. Si son seul objectif est de donner un peu d’air à votre contenu textuel, n’hésitez pas à réutiliser une photographie de banque d’images. Elles sont faites pour cela ! Les images des photothèques comme Fotolia et autres Getty Images sont conçues pour correspondre à des idées précises et orientées classées par thématiques. Vous trouverez vite votre bonheur pour chaque sujet avec une image banal au possible, mais c’est le but. Elle sera contextualisée et efficace.

Autre billet dans cette thématique : Et si les banques d’images nous rendaient conformistes ? 

Maintenant si l’objectif de votre image est d’apporter un contenu supplémentaire dans une stratégie multimédia, quelques astuces peuvent la rendre plus attractive et ainsi donner plus de valeur à votre texte. Dans la presse (avant que celle-ci n’utilise à fond les banques d’images, beurk) les photographes envoient leurs clichés qui sont ensuite sélectionnés et quelqu’un d’autre appose une légende. Le journaliste et rédacteur ne sait pas quelle image sera choisie et le photographe ne sait pas avec quel texte apparaîtra sa photo ou non.

Je vous explique cela pour noter l’indépendance entre les contenus dans un support multimédia, chacun a son intérêt et peut devenir le seul objet de la visite du lecteur. Ainsi une page vue peut être obtenue sur Internet grâce au texte seulement, mais aussi grâce à l’image seulement. Et ceux qui reçoivent quelques visites par Google images ont compris cela. :-)

La question de la légende

Comme dit précédemment, la légende d’une image est indépendante du reste dans la presse. Elle ne va pas décrire l’image mais elle va plutôt donner un commentaire sur cette image. La légende a ici pour objectif d’orienter l’interprétation de l’image pour aller dans le sens de l’angle du billet.

Cela m’aide à introduire cette notion d’attribut alt. Le alt est là pour permettre de rendre le contenu plus accessible. Il sert à la fois pour les utilisateurs et pour les robots.

alt = text [CS]
For user agents that cannot display images, forms, or applets, this attribute specifies alternate text. The language of the alternate text is specified by the lang attribute. source

Cet attribut va plutôt décrire l’image pour tout ceux qui sont en incapacité de l’interpréter visuellement. C’est donc valable pour les mal-voyants, les non-voyants et aussi pour les petits robots qui se baladent chez vous et qui n’ont pas vraiment d’yeux.

La légende va quant à elle apporter un commentaire. Cela relève plus du choix éditorial pour angler le contenu vers une interprétation. C’est pour cela que vous pouvez également poser une légende à un visuel provenant d’une banque d’image. Cela pourra apporter une information supplémentaire au lecteur sur un espace où l’oeil est naturellement attiré. C’est une opportunité supplémentaire pour garder l’internaute sur la page et éventuellement le faire aller sur d’autres pages de votre site.
De ce point de vue, la légende peut revêtir le même rôle qu’un intertitre ou une citation en milieu de contenu.

Enregistrer et compresser une image pour le Web

Il existe deux types d’image. Nous avons les images matricielles et les images vectorielles. Pour résumer, les images matricielles sont celles qui sont décrites point par point (le royaume du *.jpeg), les images vectorielles sont celles qui sont décrites par des valeurs géométriques et mathématiques. La première est sujette à des pertes de qualité tandis que la seconde quasiment pas.

Sur une image matricielle, les différents formats et mode de compression ne correspondent pas seulement à des histoires de transparence et d’animation. Je ne vais m’étendre longuement là-dessus car cela pourra faire l’objet d’un billet à part entière, et celui-ci est déjà assez long… En résumé, les modes de compression d’images se différencient par la manière d’enregistrer les informations et il y a plus ou moins de perte au sens où un format ne va pas privilégier les mêmes données qu’un autre. Mon conseil serait de tester et de ne pas hésiter à utiliser la fonction « Enregistrer pour le Web » de Photoshop. Pour le reste il existe moult outils d’optimisation de format d’images sur lesquels je reviendrai une autre fois.

Quel nom pour mon fichier d’image ?

Gagner des visites par Google images

Le nom de votre fichier d’image peut avoir deux fonctions principales. La première concerne votre propre usage. Pour ma part, je garde une copie de chaque photo et image publiée sur le Web et chacune est rangée de manière très précise. En ce qui concerne par exemple ce blog, il s’agira de : nom-du-billet_01.jpg / nom-du-billet_02.jpg. Si les images correspondent à des sous-parties du billet, je vais préciser le nom avec nom-du-billet_partie_01.jpg / nom-du-billet_partie_02.jpg .

Ce fonctionnement me sert à plusieurs choses. Premièrement, je suis absolument maniaque des noms de fichiers. J’optimise mes noms de fichiers avec des codes bien à moi pour les avoir rangés bien proprement et de manière logique quel que soit la méthode de tri.

Deuxièmement, c’est fort utile pour le référencement naturel car cela contextualise encore plus votre image en plus de son aspect visuel, de son texte alternatif (alt) et de sa légende. Par ailleurs c’est aussi par le nom de l’image que vous pouvez éventuellement gagner quelques points par Google images.

Intégration d’une image dans une page Web

Là, je vous invite à consulter pour billet sur l’intégration d’une image à un contenu d’un point de vue ergonomique et éditoriale. J’ai mis beaucoup de temps à l’écrire, alors soyez gentil et allez le lire. :D

C’est par ici : Comment intégrer les illustrations à un contenu ?

Questions en suspens

Il y a encore des zones de floues dans ce billet et je ne sais pas encore y répondre. Est-ce que le répertoire dans lequel on met ses images a une quelconque influence ? Des nuances de couleurs à privilégier pour les mal-voyants ?

J'ai créé ce blog en 2009 pour parler de mes découvertes et de tout ce qui m'émerveillait au quotidien. Aujourd'hui je cherche à partager mes sources d'inspiration, ainsi que mon retour d'expériences dans ma vie d'entrepreneur freelance.

14 commentaires

  1. Merci pour l’article.

    Il me me semble voir la partie Record for Web pour les images.
    Existe-t’-il des solutions de PhotoShop en ligne ?

    Merci :)

  2. Je ne connais pas d’outils avec autant de choix que l’enregistrement avec Photoshop.

    Par contre, je me demande à quel point nous sommes prêts à allégér les contenus pour des o jectifs de webperf. En effet, pour un public fr et un site fr, le poids d’une imzge n’est pas ce qui va forcément faire perdre ou garder un visiteur. De nombreux sites se basent d’ailleurs entièrement sur le HD et rencontrent un.vif succès.

    L’opti à faire est certainement du côté de.l’architecture du site et serveur. L’uilisateur tolère beaucoup moins un site lent qu’une image lourde.

  3. Tu as des sources montrant l’effet du nom des images sur le bon positionnement de celles-ci ?
    J’ai effectué quelques tests depuis 2007 : http://www.gnomecorp.fr/Optimiser-les-images.html et cela ne donnait pas grand chose sur les divers moteurs, mais n’ayant pas vérifié dernièrement…
    Enfin, avant de mettre en ligne certaines images, il est important de supprimer les données personnelles (exif), ce qui permettra de gagner un peu de place sur la machine qui les hébergera. ;)

  4. Pour ce qui est du « référencement naturel », il est vrai que le nom de l’image et le alt sont (très) important pour le bon positionnement. Pour ce qui est de la longdesc je n’ai jamais fait de test donc je rejoindrais Aurélien sur ce point !

    Il ne me semble pas que tu l’ai précisé, mais pour le Web mieux vaut se limiter aux trois formats que sont : jpg, png et gif, c’est assez important à souligner.

  5. Merci pour vos retours. :-)
    Le billet demeure partielle, on pourrait en faire un livre je pense !

    @Aurélien : J’ai d’autres exemples mais je n’ai pas encore pris le temps de croiser les infos. Il faudrait que je cherche plus de ce côté. Je constate que dans mon cas je ressors sur les images avec les noms de billets WP même si l’image elle-même a un autre nom. Dans ce cas ce sont le para-texte qui donnent de la pertinence.
    Merci pour le

    au passage, j’ai passé 2 heures à chercher son nom mais je retombais sans cesse sur

    qui s’applique au table et j’avais fini par abandonner en préférant me dire que j’y consacrerai un autre futur billet. :-)

    @Benoît : Je ne connaissais pas, je vais m’y pencher, merci ! :-)

    @Mickael Image : Le nom de l’image et le alt sont finalement assez logique, c’est du pur bon sens. Il vaut mieux avoir un contenu construit de manière global et contextualisé dans son ensemble plutôt que des éléments sans aucun rapport sémantique sur lesquels on aurait mis une couche de ciment bon marché.
    J’ai également oublié de préciser qu’il vaut mieux un jpg pour une photo et un gif pour un dessin. Histoires de compression. :-)
    Mais c’est aussi pour cela que je conseille aux gens de tester plusieurs formats pour qu’ils constatent d’eux-même les différences. C’est un conseil que je donne surtout aux éditoriaux qui sont moins à l’aise avec les histoires de conteneurs, de formats, de modes de compression…

  6. Les stock photo sont toujours ignorées par les utilisateurs (cf les études de Jakob Nielsen), il est préférable de mettre des images qu’on prend soit même, notamment pour présenter son entreprise. Pour des images d’actus ou de blogs, se rabattre sur des images en CC avec usage commercial, Wikicommons, et terminer par les stocks en dernier recours.

    Pour la compression des images, pas forcement besoin de Photoshop, on peut utiliser un soft gratuit, exporter en JPEG ou PNG suivant le type d’image, puis utiliser smush.it pour obtenir une image compressée. Ce n’est pas aussi fin que Photoshop, mais les résultats sont excellents néanmoins.

    Le nom d’une image pèse un peu pour le classement d’une image dans Google Image, mais ce n’est qu’un des signaux utilisés (cf l’expérience « pizza aux anchois » sur le baume). Le répertoire n’est pas important, mais autant pour soi que pour Google, autant lui montrer que c’est organisé proprement.

    Les données exif ne sont pas forcement à retirer, pour une entreprise qui présente ses locaux, équipe, le plan d’accès, avec ses propres photos, il est bon de laisser les données exif ou de les modifier, afin qu’elles contiennent les données GPS.

    Par ailleurs, Google préfère les images de grande taille, proposer le grand format à une image peut être avantageux.

    Pour les daltoniens, il existe des solutions pour avoir des photos adaptées : vischeck.com, colorfilter.wickline.org, ou d’autres en googlant « color blind image test ».

  7. @Baptiste :
    Merci pour ce commentaire. :-)

    « Les stock photo sont toujours ignorées par les utilisateurs (cf les études de Jakob Nielsen), il est préférable de mettre des images qu’on prend soit même, notamment pour présenter son entreprise. Pour des images d’actus ou de blogs, se rabattre sur des images en CC avec usage commercial, Wikicommons, et terminer par les stocks en dernier recours. »

    Je suis d’accord, mais précisons que tout dépend de l’objectif d’une image. Si elle ne sert qu’à faire un trou au milieu du texte, pourquoi pas utiliser une image de stock photo. Mais bien entendu, dans le cadre d’un contenu quali, il est toujours préférable de partir vers un visuel originale. Cela peut également prendre la forme d’un montage photographique qui serait porteur d’un message, même si c’est du sampling.

    Photoshop est certainement loin d’être nécessaire, c’est juste une astuce.
    Après je préfère ne pas retirer les données EXIF, elles sont tout de même une petite marque de signature et pour le principe, c’est bien.

    Merci pour les solutions destinées aux daltoniens !

  8. Tout dépend de la stock photo qu’on utilise, ainsi que du niveau de qualité du site. Les stock photos qui présentent des « gens contents » sont ridicules, ou vont le devenir pour tout le monde dans les années à venir. Suffit de voir le nombre de stock utilisées pour des memes sur 9gag par ex :-)
    Pour des stocks photos de paysages, animaux, etc. c’est OK.

  9. J’ai l’habitude comme pas mal d’autres développeurs de chercher les images sur google images en choisissant la taille, le format etc., surtout que je n’aime pas travailler avec des programmes d’éditions d’images comme PS ou gimp mais cette technique ou mauvaise pratique ne respecte pas certains droits et je compte prochainement récupérer mes images plus légalement :)

    Merci pour ton article et pour répondre à tes questions : non ni le répertoire ni des nuances de couleurs en une influence quelconque mais plutôt la description de ces images (je ne parle pas des attributs du méta tag)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *