Comme nous avons vu le rôle du multimédia en commerce électronique, les images jouent un rôle important dans la mise en valeur du contenu, l’illustration des produits et leur référencement. Ainsi, on va aborder leur intégration sous trois angles distincts mais très liés que sont l’ergonomie, le référencement et la protection des droits.
I. Ergonomie des interfaces
Les images attirent l’œil (et peuvent le distraire de l’essentiel). Il faut les utiliser avec parcimonie et intelligence, à moins qu’il s’agisse d’une galerie d’images. La disposition des images, comme pour le texte, et des éléments en général dans une page web dépend pour être efficace de trois règles principales :
- La loi de la proximité : la vision regroupe les objets qui sont proches
- La loi de la similitude : la vision assimile de façon identique les éléments qui sont semblables en taille, forme ou couleur.
- La loi de la continuité : la vision aura tendance à associer les éléments qui sont alignés de façon identique.
Le respect de ces règles (qui s’adapte aux images et aux autres éléments des pages) permet une lecture rapide et facilite la compréhension du site. Il faut intégrer au moins une image par page pour reposer l’œil des lecteurs et capter leur intérêt. Mais il faut utiliser des images de petites dimensions parfaitement lisibles. Plus une image est simple, moins elle pèsera lourd et mieux elle jouera son rôle d’illustration. Les visiteurs sont pressés et s’impatientent vite. Les pages ne doivent pas peser plus de 50 à 80 Ko au total. Le temps de téléchargement est crucial comme facteur de qualité et se chiffre en millièmes de seconde.
L’autre facteur déterminant de la position des éléments graphiques (images) dans une page est la façon dont les internautes regardent la page.
Pour cela, nous avons les travaux du professeur Thierry Baccino qui permettent d’énoncer quelques principes issus de l’observation des parcours oculaires sur une page.
Ceci reste toutefois très schématique et ne représente pas une règle prévalant sur toutes les autres : il ne faut pas briser une harmonie graphique et respecter bien entendu les règles citées auparavant.
On tendra à mettre toutefois les images importantes dans les zones de 1 à 4.
II.Référencement des images
Google Images a indexé des milliards d’images. Si une image du catalogue apparaît dans la liste de recherche naturelle pour le mot-clé choisi, cela va drainer des visiteurs ciblés vers le site.
Pour cela, il faut tenir compte des recommandations des moteurs :
- Utiliser un nom de fichier qui contient les mots-clés pour lesquels on veut être indexé. Le nom du fichier exemple.jpg est utilisé pour le mot clé « exemple ».
- Utilisation de l’attribut texte Alt descriptif de l’Image. Il faudrait utiliser les mêmes mots-clés qui ont été utilisés pour le nom de fichier.
- De la même façon, l’attribut Title de l’image doit être utilisé : ‘<img src=” casquette.jpg” alt=” exemple” title=” exemple “>’
- Le contenu textuel de la page Web avant et après l’image influe également sur sa position dans les résultats de Google Image Search.
- Les plus grandes images semblent apparaître plus haut dans les premiers résultats de Google. Il ne faut pas omettre d’Inclure la largeur et la hauteur dans la balise image pour montrer aux moteurs de recherche la taille de celle-ci :‘<img src=” exemple.jpg” alt=”exemple” title=”exemple” width=”306″ height=”306″>’
- Optimiser le reste la page web pour l’expression clé choisie de la recherche. Si la page Web complète a été optimisée pour un mot clé alors il est plus facile d’obtenir de bonnes situations dans les listes des images proposées par les moteurs de recherche.
Bien entendu, l’image sur laquelle on aura optimisé la description en fonction du mot clé, doit apparaître également attrayante à l’écran. Il faut que l’image donne envie à l’internaute de cliquer dessus si elle apparaît dans les recherches.
Google vient de mettre à jour le dispositif de cartographie. Le Sitemap se limitait jusqu’ici à la prise en charge de description de contenu texte, la vidéo, les fil d’actualité et les sites mobiles. Désormais, il est donc possible de désigner une ou plusieurs images au sein d’un Sitemap classique. Cette nouveauté est particulièrement intéressante pour les images présentes dans les formulaires en JavaScript, ou encore pour les pages présentant beaucoup d’images, et qui sont à hierachiser en fonction de leur niveau d’importance. Exemple de Sitemap intégrant la référence d’une image associée à une page :
<?xml version=”1.0″ encoding=”UTF-8″?>
<urlset xmlns=http://www.sitemaps.org/schemas/sitemap/0.9 xmlns:image=”http://www.google.com/schemas/sitemap-image/1.1″>
<url>
<loc>http://example.com/sample.html</loc>
<image:image>
<image:loc>http://example.com/image.jpg</image:loc>
</image:image>
</url>
</urlset>
III.Protection des droits
Le RDFa permet de sémantiser le contenu du site en intégrant des balises pour définir des éléments. En Taguant les images avec la technologie RDFa, Google peut reconnaître alors si une image est libre de droits ou est soumise à des conditions particulières, selon R.J. Pittman de Google. Le code RDFa à utiliser est décrit ci-dessous :
<div about=”image.jpg”>
<img src=”image.jpg”>
<a rel=”license” href=”http://exemple.org/licenses/by-sa/3.0/”> exemple license Termes d’utilisation 3.0</a>
</div>
Il faut créer une page des termes d’utilisations .
La meilleure licence pour partager les images sur le web consiste à les distribuer gratuitement, en limitant leur diffusion à un usage non commercial. Dans le cas où on ne veut pas qu’elles soient copiées, il faut opter alors pour le copyright. Dans tous les cas, il faut être capable de prouver son antériorité, en publiant par exemple les images sur des sites reconnus, comme Flickr ou Photobucket. Certaines solutions de marquage invisible permettent de laisser sur l’image des points ou formes imperceptibles par l’œil, comme preuve d’appartenance de l’image. Malheureusement, les solutions techniques ne sont pas viables, puisqu’il est facile de copier l’image en effectuant une simple capture d’écran.
