Les bonnes pratiques pour optimiser les images sur le web
21 mars 2022
Découvrez nos recommandations pour vos images
L'optimisation des images
L'optimisation des images est une étape importante et souvent négligé lors de la mise en ligne de votre site internet. Au même titre que l'optimisation des textes, quelques bonnes pratiques pour vos images vont vous permettre d'avoir un site plus rapide, plus performant et surtout mieux référencé par les moteurs de recherche.
Cela représente une opportunité de rendre les images de son site plus visibles et d'attirer du trafic vers celui-ci !
On vous a rassemblé 5 bonnes pratiques à mettre en place dès à présent pour les images de votre site :
1 - OPTIMISEZ LES FORMATS DES IMAGES
---------------------------------
De nombreux formats existent pour vos images mais seulement quelques uns sont à utiliser sur votre site : privilégiez les formats JPEG, SVG et GIF.
JPEG - Vous pouvez ajuster le niveau de qualité pour un bon équilibre entre la qualité et la taille du fichier. Le format JPEG est à utiliser pour la plupart de vos images.
SVG – s’adapte à n’importe quelle échelle sans dégradation, avec un poids très réduit. Le format SVG est à utiliser pour les logos, pictogrammes et autres illustrations simples.
GIF – n’utilise que 256 couleurs. C’est le meilleur choix pour les images animées.
Assez récent, le format WebP pourrait bientôt remplacer les formats traditionnels ! Plus petit, prise en charge de la transparence, avec ou sans perte, supporté par tous les navigateurs, ce format à également tout pour plaire.
2 - REDIMENSIONNEZ VOS IMAGES
---------------------------------
Pour éviter des problèmes d’affichage et de vitesse, pensez à redimensionner vos images avant de les intégrer sur votre site web.
La largeur optimale des images change selon les différents sites web, pensez donc à les adapter selon le vôtre !
3 - COMPRESSEZ VOS IMAGES
---------------------------------
La majorité des visites sont réalisées sur des appareils mobiles. Il est donc important que les images soient optimisées pour la version mobile, notamment en faisant en sorte qu’une page web soit la plus légère possible !
Les images de la page d’accueil doivent absolument être légères ! C’est la page la plus importante de votre site elle doit se charger immédiatement pour ne pas perdre des internautes
La compression des images est une façon très efficace de réduire la taille d'une page web et son temps de téléchargement.
Idéalement, la taille des images doit être de :
- Photos et bannières - entre 250 et 300 Ko maximum
- Images dans un slideshow - en dessous de 200 Ko
- Vignettes - en dessous de 100 Ko
Vous pouvez utiliser Squoosh.app pour compresser vos images, et PageSpeed Insights pour vérifier le temps de chargement de votre site.
4 - RENOMMEZ VOS IMAGES
---------------------------------
Avant d’importer vos visuels sur votre site web, il est important de prendre le temps de renommer l’ensemble de vos images en décrivant brièvement l'image.
Il est également nécessaire de remplir le texte alternatif (ou balise "alt") pour :
- Permettre un meilleur référencement des images
- Retrouver les images le moment venu
- Rendre les images plus accessibles pour les personnes avec une déficience visuelle (un lecteur d’écran peut lire l’image grâce à la balise «alt»)
Nommer vos images en une dizaine de mots maximum en décrivant ce que représente l’image grâce à des mots-clés importants.
En minuscules, sans accent, ni espace, ni caractère spé- ciaux, avec des tirets « – » entre les mots.
Attention cependant à ne pas spammer cette de zone de mots clés, au risque d’être pénalisé pour référencement abusif !
5 - OPTIMISEZ LE TEXTE "AUTOUR DE L'IMAGE"
---------------------------------
Les balises figure et figcaption sont également prises en compte par les moteurs de recherche. Elles doivent toujours être utilisées ensemble avec la balise figure comme parent.
Pour cela, la balise figcaption doit contenir une phrase qui décrit concrètement l’image. C’est une sorte de légende qui permet de mettre en valeur une image.
Cela représente donc aussi une bonne pratique pour référencer une image !
Découvrez notre Labo, le recueil de notre savoir-faire
Nous partageons nos retour d'expérience sur le digital, l'ecommerce, les bonnes pratiques, prise de hauteur etc.