Les images sont des éléments fondamentaux dans l'aspect graphique d'un site web. Elles peuvent avoir 2 utilités:
soit compléter le contenu d'un article ou d'un contenu particulier.
soit venir dessiner des effets graphiques pour mettre en valeur le contenu.
Il semble que ces 2 cas doivent être traités différement lors de l'encodage HTML/CSS d'une page. En effet, les moteurs d'images sont très friands des images indexées au sein des balises <img>. Il convient donc de traiter les véritables images comme il se doit, par l'utilisation de <img>, plutôt qu'avec un "background" en CSS.
Concrêtement, la balise img permet d'ailleurs d'optimiser l'accessibilté d'un site, en diffusant un texte alternatif au sein de la balise: <img src="image" alt="Ceci est un texte alternatif" />
Suivez les mêmes conseils que pour la partie <title> pour constuire ce contenu. Gardez bien en tête que les textes alternatifs sont très importants pour un référencement correct de votre contenu.
Quelques astuces d'optimisation
Conseil n°1: utilisez des images esthétiques !
Voici quelques autres optimisations possible pour optimiser le référencement des images importantes affichées par les <img>: Intégrez chaque image dans une balise <div>
Ce n'est pas vraiment prouvé, mais la communauté web s'entend à dire que cela pourrait augmenter le taux de précision. Faites précéder l'image d'un titre situé dans un heading de niveau 3 ou supérieur
Nous avons vu l'importance d'un heading. L'utiliser pour encadrer une image augmentera donc forcément le contenu qu'elle diffuse. Utilisez des images qui occupent environ 35-40% maximum de la surface de la page web
Pour des raisons évidentes de poids, et donc de chargement de la page. Mettez les images en haut des pages web
Dans un billet de blog par exemple, il est préférable de diffuser ces contenus en haut de la page, puisque les bots parcourent les pages de haut en bas. Mettez des mots clés dans le nom du fichier image
Par exemple, cours-referencement.jpg se réferencera mieux que test01.jpg Ajoutez une légende
Profitez d'encadrer votre image d'une balise <div>, <a>, ou de headings, pour y greffer un texte, qui sera considéré comme une légende de l'image. <div>
2.6.2
<strong>Ceci est une légende</strong> </div>
Vous pouvez tout autant augmenter davantage le poids du texte grâce aux balises de forme. Mettez des mots-clés dans l'attribut ALT
Déjà, vu. Par contre, pas besoin d'utiliser les attributs "TITLE" et encore moins le "LONGDESC", ignoré. Faites des liens vers votre image depuis d'autres pages de votre site
Les liens internes ne font pas de mal !
Pour l'instant, les informations EXIF sont ignorées mais elles pourraient très bien être utilisées plus tard
Il s'agit des éléments inscrits dans le fichier image. Qui peuvent être gérés par Photoshop par exemple. Tenez compte du fait que les moteurs améliorent leur algorithmes pour tenter d'identifier le contenu des photos (ça fonctionne déjà bien pour la reconnaissance de visages dans Google Images ou plus récemment dans les albums Picasa Web).
Tous ces points peuvent vous aider sensiblement.
Toutefois, une astuce testée, et qui ne fonctionne pas, faire un sitemap qui renvoie vers les sources .jpg: <?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <url> <loc>http://www.example.com/image.jpg</loc> <lastmod>2007-01-01</lastmod> <changefreq>monthly</changefreq> <priority>0.8</priority> </url> </urlset> Les images-map
Le principe de l'image map, ou image "réactive": mettre plusieurs liens sur la même image, pour ne pas avoir à la redécouper par exemple, ce qui peut s'avérer utile pour des menus, ou des blocs d'image où il y a plusieurs liens. Et ainsi, éviter de référencer dans les moteurs dédiés des images inintéressantes.
<map name="test">
<area shape="rect" coords="60,123,242,190" href="../../nucleaire/index.html"> <area shape="circle" coords="73,73,72" href="../../plongee/index.html">
2.6.3
2.7
</map>
<img src="image" alt="Ceci est un texte alternatif" usemap="#test" />
Les sprite CSS
Autre idée, pour éviter de redécouper une image: gérer l'affichage d'une image par CSS, en affichant spécifiquement une zone particulière d'une image contenant des nombreux éléments picturaux. On affiche donc l'élément en question en "background", en créant une fenêtre et une vue spécifique sur l'élément qui nous intéresse. Par exemple:
/* l'image 500x10px contient de nombreuses petites "puces", mais on ne va afficher que l'une d'entre elles */ img {
width: 10px; height: 10px;
background: #fff url('image.jpg') left top no-repeat;
/* il suffit de remplacer left et top par les coordonnées en pixels de la puce, dans l'image */ }
Des outils gratuits vous aident dans la création de sprites: spirtegen.website-performance.org ou smartsprites.osinski.name