OPTIMISEZ SES IMAGES
C’est un peu comme la devanture d’un magasin. Si elle est bien achalandée sans faire fouillis et propre, ça donne davantage envie de rentrer dans la boutique. Pour une photo, c’est le même principe. Nette, de bonne qualité, rapidité d’affichage (taille et poids), bien décrite (nom, alt, titre, légende), à la bonne place dans le contenu, voilà déjà une bonne base pour vos photos.
-
Quelques chiffres:
- une image se rend 60 000 fois plus vite au cerve
- 90% des informations retenues par le cerveau sont visuelles
- 30% des recherches sur Google se font sur Google Image
Un droit d’auteur s'applique à toute image que vous trouvez sur internet. Pensez-y! L’amende est de 2000 euros. Une image sur votre site doit refléter votre activité, votre boutique ou votre commerce. Néanmoins si vous êtes vraiment en manque d’inspiration, voici quelques exemples (entre autres) de banques d’images gratuites et libres de droits comme
Contrairement à un livre, un site internet doit se charger. La connexion est primordiale mais vous ne pouvez rien faire pour augmenter le débit de connexion de vos internautes. En revanche, vous pouvez avoir un site qui se charge plus rapidement et cela va beaucoup se jouer via vos photos.
L’importance du temps de chargement d’un site:
- Après 3 secondes de chargement, 57% des internautes abandonnent le site. Sur mobile, c’est 70 à 75%.
- Après 5 secondes, c’est 62%.
-
80% des internautes n’y reviendront pas
(données d’un sondage Imperva incapsula)
La taille adaptée
L’idéale est d’avoir une image qui correspond à la taille à laquelle elle doit d’afficher. On exprime généralement une taille d’image en pixels (px) avec une hauteur et une largeur ou seulement une des deux, l’autre étant en auto.
Pour vous donner une idée de la taille d’une image
Une image plus grande que nécessaire apporte à votre site un temps de chargement plus long puisqu’elle doit être chargée.
Adaptez l’image à votre contexte.
Pour redimensionner une image, plusieurs sites gratuits et très simples d’utilisation existent. Quelques exemples entre autres:
Le poids de l’image
C’est une notion très importante à garder à l’esprit dès que vous souhaitez intégrer
une image: son poids.
Plus l’image est lourde, plus le temps de chargement de
l’image est long et plus il y a d’images sur le site, plus l’internaute doit patienter.
Privilégiez la qualité à la quantité.
Observez le poids des images de la page 2 et 3 en fonction de leur taille:
- image en longueur (width) de 50px : 108 Ko(kilo-octets)
- image en longueur de 100px : 111 Ko
- image en longueur de 300px : 134 Ko
- image en longueur de 500px : 168 Ko
- image en longueur de 700px : 210 Ko
- image en longueur de 1000px : 279 Ko
Petite apparté sur le format:
Le format utilisé est en JPEG. C’est un format d'enregistrement et de compression numérique. Il est le plus utilisé sur le web. Il possède jusqu’à 16 millions de couleurs! C’est donc celui à privilégier.
Pour les images avec un fond transparent (un logo par exemple), utilisez le PNG
Pour les animations, le format GIF est le mieux adapté. Surveillez la taille de ces fichiers qui sont de meilleurs qualités dans de petites dimensions.
Il est possible de compresser les images pour obtenir un gain en poids. Attention néanmoins à vérifier toujours le rendu avant de le mettre en ligne. Des nombreuses appli simples et gratuites existent. Quelques exemples :
Voici le poids de nos images après compressions:
- image en longueur (width) de 50px : 2 Ko soit 98% de moins
- image en longueur (width) de 100px : 5 Ko soit 96%
- image en longueur (width) de 300px : 24 Ko soit 82%
- image en longueur (width) de 500px : 52 Ko soit 69%
- image en longueur (width) de 700px : 38 Ko soit 82%
Le nommage ('naming')
Malgré les innovations considérables de Google en matière de reconnaissance d’images, il est impératif d’écrire ce que représente le visuel de votre photo en y ajoutant vos mots clefs.
Le nom de l’image
C’est le nom de la photo. Son nom d’origine ne veut rien dire pour Google (ex: img-45126847683.jpeg).
Il est important de décrire en quelques mots la photo en insérant vos mots clés
SANS espace
SANS majuscule
SANS caractère spéciaux
SANS accent ( ou cédille , apostrophe…)
SANS article “le, la,des…” (qui n'apporte rien comme info aux
robots de Google)
AVEC des traits d’union pour séparer les mots
Exemple de nom pour cette photo:
La balise ALT : c’est le texte alternatif
- Il apparaît lorsque l’image ne s’affiche pas.
- Il est lu par les lecteurs d’écran des malvoyants et des aveugles (l’accessibilité est un point important pour Google).
- Il est lu par les robots de Google également.
Il est important pour le référencement de votre site.
Le titre d’une image
C’est le texte qui s’affiche lorsque vous passez la souris sur l’image. C’est un plus pour vos utilisateurs.
La légende de l’image
C’est le texte affiché sous l’image. Elle est un plus pour l’utilisateur et apporte du contenu textuel à votre site.
Il est recommandé d’atteindre 300 mots par page web
Ces quelques conseils vont vous permettre d'alléger votre site et donc d’agir directement sur la vitesse de chargement.
"Le plus beau site du monde ne sert à rien s’il n’est pas regardé!"
J’aurai bien cité quelqu’un de super connu mais ce n’est que de moi.
Si vous souhaitez imprimer ces conseils, voivi le document pdf ici
Merci à FLEEPIK pour ses icônes sympas flaticon.com"