Maintenant que vous savez quel format d’image choisir en fonction de la situation, vous savez comment démarrer. Dans cet article, nous allons donc découvrir comment nommer vos fichiers images, mais aussi comment les intégrer de manière optimale dans votre site web. L’intégration des images ne se limite pas à leur simple ajout ; elle implique également des pratiques essentielles pour améliorer le référencement, l’accessibilité et la performance de votre site. Nous aborderons les meilleures méthodes pour compresser vos images, optimiser les attributs ALT et Title, utiliser des images responsive et créer un fichier Sitemap Image. En suivant ces conseils, vous serez en mesure de maximiser l’impact visuel et technique de vos images sur votre site web.
Nommer et structurer les fichiers images
Que ce soit pour vous organiser au mieux, pour une question d’accessibilité ou pour votre référencement SEO, il y a plusieurs pratiques que vous devriez adopter en ce qui concerne la façon dont vous nommez vos images.
- Utilisez des noms de fichiers descriptifs, pertinents et contenant si possible des mots-clés en lien avec votre image.
- Évitez les accents, les caractères spéciaux et les majuscules.
- Séparez chaque mot par un tiret (-), il est mieux compris par les moteurs de recherche que les espaces.
- Restez concis, l’idéal serait que le nom de votre fichier fasse moins de 25 caractères. D’ailleurs pas besoin de mettre les articles ou les propositions.
- Vous pouvez ajouter un numéro si plusieurs images ont le même nom.
- Une fois que vous avez choisi votre convention pour nommer vos fichiers, restez cohérent.
Si vous héritez d’un grand nombre de fichiers images et que vous vous apercevez qu’ils sont mal nommés (ou que cela ne correspond pas à votre système), vous pouvez utiliser un outil tel que Ant Renamer, permettant de renommer par lots des fichiers ou des dossiers.
Comment compresser les images ?
Tout d’abord, il est important de savoir qu’il existe deux méthodes de compression :
- La compression avec perte. C’est la méthode utilisée par le format JPEG, la transformation est mathématique. Elle réduit la taille du fichier en supprimant des informations visuelles qui, de toute façon, sont peu importantes ou imperceptibles.
- La compression sans perte. C’est une méthode algorithmique qui optimise le poids tout en conservant toutes les données d’origine. On réduit la taille sans sacrifier la qualité.
C’est en ayant ceci à l’esprit que vous comprenez pourquoi il est intéressant de choisir son type de format dès le début de la création. Pensez aussi à adapter la taille de l’image à l’affichage réel qu’elle aura sur votre site, vous n’avez pas besoin de charger votre logo en 1080 par 1080 pixels si vous voulez seulement qu’il apparaisse en haut à gauche dans l’en-tête. Si vous avez de nombreuses images à compresser en même temps, il existe des traitements par lots qui vous feront gagner beaucoup de temps.
Quand vous décidez de compresser vos images, vous pouvez :
- Le faire via des outils en ligne tels que TinyPNG, Squoosh ou encore Compressor.io.
- Si vous préférez passer par un logiciel, nous pouvons vous conseiller ImageOptim pour vos Mac ou Caesium Image Compressor pour Windows.
- Il existe également de bons logiciels libres tels que GIMP, qui est très connu et a une grande communauté.
- Pour finir,il y a aussi des plugins gratuits sur WordPress.
Optimiser les attributs ALT et Title
L'attribut ALT
ALT signifie ici alternatif, il est essentiel pour décrire une image que ce soit pour les moteurs de recherche ou pour les utilisateurs qui ne peuvent pas voir l’image (déficients visuels ou image qui ne charge pas). Votre texte doit donc décrire précisément votre image sans pour autant dépasser 100 caractères. Vous pouvez intégrer votre mot-clé principal si le résultat semble naturel.
L’endroit où votre image se place ainsi que le contexte sont importants.
- Si votre image est décorative ou que son texte est trop redondant avec le reste du contenu qui l’entoure, il vaut mieux laisser le ALT vide.
- Alors que si votre image contient du texte, l’attribut ALT peut être exactement le même texte.
La balise Title
Pour ce qui est de la balise Title, elle n’aura pas d’influence directe sur votre référencement car Google ne la lit pas. Par contre, elle apporte un confort à l’utilisateur et donc améliore son expérience. Elle affiche une info-bulle quand l’utilisateur passe sa souris sur la photo (en tout cas si votre thème l’autorise) et peut donc amener une information complémentaire.
Ne l’ajoutez que si elle apporte un intérêt, sinon son utilisation sera redondante. Et ne mettez pas le même texte que dans les balises ALT et Légende.
Comment utiliser des images responsive ?
On vous explique probablement depuis des années maintenant d’utiliser un design responsive pour vos sites internet. Car ceux-ci sont, en effet, de plus en plus consultés par les utilisateurs depuis leurs téléphones. Avoir un site responsive, ça ne s’arrête pas à avoir un menu qui s’adapte, il est aussi possible de penser à avoir des images responsive. En plus d’apporter un meilleur confort et une meilleure expérience à vos utilisateurs, cela améliore également la vitesse de chargement et optimise votre référencement.
Pour afficher vos images de façon responsive, vous pouvez passer par des lignes de code, ou par WordPress. Si vous voulez le faire, gardez en tête quelques bonnes pratiques :
- Utilisez des formats modernes.
- Activez le lazy loading afin que les images ne soient chargées qu’au moment où elles deviennent visibles.
- Optimisez les images avant de les intégrer.
- Ajoutez toujours un texte alternatif.
- Testez régulièrement votre solution sur différents appareils et sur différents navigateurs.
Qu'est-ce qu'un fichier Sitemap Image ?
Suivant le but poursuivi par votre site internet, il se peut que vous accordiez beaucoup d’importance à vos images. C’est le cas si vous avez un site de e-commerce, mais aussi si votre site vous sert de portfolio par exemple. Dans ce genre de situation où le contenu de votre site repose beaucoup sur le visuel, il est possible de créer un fichier Sitemap image. Là où un fichier Sitemap classique se « contente » de lister toutes vos pages HTML, le Sitemap Image va associer à chaque page la liste complète des images qu’elle contient, grâce à des balises spécifiques. Grâce à ce fichier XML, vous aurez :
- Une indexation plus rapide et complète des images de votre site.
- Une meilleure visibilité dans les résultats de recherche d’images (ce qui pourrait générer du contenu supplémentaire).
- Un contrôle sur les images à indexer, vous pouvez ainsi prioriser les contenus visuels importants.
Le Schema.org
Il s’agit d’un standard collaboratif de balisage de données structurées. C’est un vocabulaire universel qui permet aux créateurs de sites internet d’ajouter des annotations sémantiques à leurs pages. Concrètement, en utilisant la bibliothèque de types et de propriétés de Schema.org, vous améliorez le lien qui existe entre vos informations et vous précisez « ceci est une photo de mon produit » et il est lié à l’information « ceci est un prix » ou « ceci est le nom de l’auteur de la photo ».
Les moteurs de recherche vont donc mieux comprendre le contenu de vos pages, cela va faciliter l’indexation de celles-ci et donc augmenter vos chances d’obtenir de meilleures positions dans les résultats de recherche.
Conclusion
En résumé, l’intégration optimisée des images dans votre site web est essentielle pour améliorer à la fois la performance et l’expérience utilisateur. En nommant vos fichiers de manière descriptive et cohérente, en choisissant la méthode de compression adaptée et en optimisant les attributs ALT et Title, vous posez les bases d’un site web bien référencé et accessible. L’utilisation d’images responsive et la création d’un fichier Sitemap Image, couplées à l’implémentation de Schema.org, vous permettront de maximiser la visibilité de vos contenus visuels. En suivant ces bonnes pratiques, vous serez en mesure d’offrir une expérience utilisateur fluide et agréable, tout en améliorant votre positionnement dans les résultats de recherche.