Optimiser les images : 3 étapes simples
- Ouiscribe
- 18 janvier 2023
- 11h58
- 0 commentaire
Comment optimiser les images pour le web ? On dit souvent qu'une image vaut mille mots. Google l'a bien compris. Selon le géant de la Mountain View, elles concernent 22,6 % des recherches sur Google. Si vous souhaitez établir une forte présence en ligne, l'optimisation de vos visuels reste une étape essentielle. Ne laissez plus les pages de votre site se charger lentement, perturber l'expérience utilisateur — et faire râler Google ! Dans cet article, je vous dresse le portrait idéal de l'image optimisée.
Que signifie « optimiser les images » ?
Optimiser ses images pour le web signifie réduire la taille des fichiers images tout en préservant la qualité visuelle afin de ralentir le temps de téléchargement de vos pages. Mais le travail ne s'arrête pas là !
Pourquoi optimiser les images ?
Que vous soyez un.e entrepreneur.e propriétaire d'un site vitrine ou d'un e-commerce, les images font partie intégrante de la conception d'un site web. En effet, ces dernières relatent des histoires que les mots ne peuvent pas raconter. Puis, la recherche visuelle est de plus en plus appréciée par les internautes.
Voici 5 raisons pour lesquelles vous devriez optimiser vos images :
- illustrer vos propos et capter l'attention de façon pertinente ;
- rendre l'expérience utilisateur agréable sur votre site ;
- réduire le temps de chargement des pages web ;
- améliorer votre visibilité organique dans la recherche par image ;
- augmenter les visites sur votre site.
De cette façon, vous réduirez aussi le temps de réponse du serveur et le nombre de requêtes HTTP. Un bon point pour le score SEO global de votre site web ! Vous attirerez du trafic qualifié sur votre site depuis Google Images (Bing, etc.).
Selon moi, les visuels influencent vraiment la manière dont les internautes interagissent avec votre contenu. Elles détiennent un pouvoir : celui de générer de l'engagement ou des ventes. Il n'y a pas photo !
Les étapes de l'optimisation des images
Alors, comment apparaître dans Google Images ? Voici la recette pour optimiser vos images. Et c'est facile.
Compresser et redimensionner votre image
La compression réduit le poids du fichier en supprimant les données inutiles. Vous pouvez également la redimensionner si celle-ci s'avère plus grande que nécessaire pour être affichée sur une page web.
Compresser vos fichiers AVANT de publier votre contenu améliorera la rapidité de votre site web. Vous éviterez aussi de surcharger votre serveur : un geste simple, mais loin d'être anodin pour notre planète.
Comment faire ? Des outils en ligne existent pour compresser et retailler vos visuels. J'utilise la plateforme en ligne gratuite Squoosh. Facile à prendre en main, elle est complète et accessible sans inscription.
Si votre site (boutique en ligne, par exemple) contient beaucoup de visuels, optez pour la version payante de cet outil.
Capture d'écran de la page d'accueil de la plateforme Squoosh.
Nommer votre image
Oui, vos noms de fichiers comptent ! Sans aller jusqu'à dire que vous allez (re)dorer votre image auprès de Google, c'est tout de même un élément clé pour offrir une expérience conviviale aux visiteurs.
Pourquoi ? Parce que ce que vous permettez aux utilisateurs et aux robots du web d'identifier le contenu de votre fichier. Sans avoir à l'ouvrir au préalable.
Avouez-le, c'est quand même bien pratique d'avoir des titres de fichiers évocateurs afin de pouvoir les retrouver en un coup d'œil (vous-même ou quelqu'un d'autre).
Indiquez des noms de documents simples et pertinents. Privilégiez une appellation composée de plusieurs mots en rapport avec l'idée générale de votre image.
➡️ Ex. : un fichier qui s'intitule « P5241684.jpg » ne parle à personne.
Préférez plutôt : « appareil-photo-numerique.jpg ».
Gardez chaque nom de fichier descriptif court, mais significatif.
Renseigner l'attribut ALT
Les images jouent un rôle important en SEO (Search Engine Optimization) pour attirer des visiteurs sur votre site web. Et c'est justement le rôle de l'attribut ALT !
La description de texte alternatif (non visible sur l'écran) fournit des informations aux internautes et aux moteurs de recherche du contenu de votre visuel.
Mais surtout, la balise ALT rend accessibles vos contenus auprès des personnes malvoyantes (lecteurs d'écran) ou des internautes rencontrant des problèmes d'affichage.
Comment renseigner l'attribut ALT ?
Indiquez de quoi parle l'image :
- décrivez-la de façon précise ;
- insérez un mot-clé ou une expression clé ;
- oubliez le bourrage de mots-clés ;
- écrivez 4 à 7 mots.
➡️ Ex. : préférez « cadre-photo-personnalise-en-bois » au lieu de « cadre-photo ».
Il n'est pas utile de remplir cette balise si votre fichier est purement « décoratif ».
Parce qu'une image vaut mieux qu'un long discours, voici où se trouve la balise ALT sur WordPress.
Capture d'écran : emplacement du texte alternatif sur le CMS WordPress (depuis la médiathèque).
WordPress et d’autres CMS (systèmes de gestion de contenu) disposent d’un champ spécifique pour décrire cette balise.
Renseignez la légende : ce texte descriptif s'affichera sous le visuel. Vous donnez aux lecteur.rice.s un aperçu supplémentaire de ce qui est présenté à l'écran - quelque chose qui n'est pas évident à voir du premier coup d'œil.
Adapter ses visuels aux spécificités du web : ce qu'il ne faut pas faire
Dans l'optimisation des images, certaines pratiques sont à proscrire si l'on veut bien faire les choses. Place au décryptage sans filtre.
Choisir un format d'image inapproprié
Vous n'utilisez pas tous vos visuels de la même manière sur le web.
Voici un coup de projecteur sur les différents formats :
- Le format .jpg pour une photo ;
- Le format .png pour une image simple et les fonds transparents ;
- Le format SVG pour un logo, une illustration ;
- Le format GIF pour les images animées ;
- Le format WEBP qui prend en charge tous les types de formats d'images.
Peu utilisé, le format WEBP (créé par Google) mérite qu'on s'y attarde même si on relève encore bon nombre d'incompatibilités avec certains navigateurs et CMS.
Inclure des espaces, des caractères spéciaux et des accents
Restez sage comme une image : abstenez-vous d'utiliser des caractères spéciaux tels que &*#%^ dans le nom de vos fichiers et dans le texte alternatif.
1- Ces maudits caractères causent des soucis avec certains navigateurs et empêchent parfois les utilisateurs d'ouvrir les fichiers.
2- Personne ne sera en mesure de lire votre balise ALT.
Ne pas séparer les mots
En séparant les mots, vous êtes certain.e que votre contenu sera facilement trouvé par les moteurs de recherche et compréhensible par les internautes.
Bien qu'il y ait plusieurs écoles à ce sujet, je recommande d'utiliser le tiret de la touche 6 pour diviser les termes.
➡️ Exemple : tirage-photo-paris
Votre nom de fichier sera lu comme trois mots distincts par les robots de Google. C'est la même chose pour l'attribut ALT.
Publier des visuels inutiles à la qualité douteuse
Dire qu'une photo vaut 1000 mots n'est pas qu'un cliché.
Pour vous démarquer, faites preuve de créativité dans la manière de présenter votre message. Choisissez des images/photos libres de droits visuellement attrayantes qui servent vos objectifs.
Mais le mieux reste d'utiliser vos propres visuels !
Si vous détenez un site e-commerce, je ne peux que vous recommander de prendre des photos professionnelles de vos produits. Vos photos sont là pour valoriser vos produits et donner envie d'acheter, PAS le contraire.
Des visuels de qualité reflètent les valeurs de votre marque. Vous créez un lien entre vous, vos client.e.s et les
Google mettra plus facilement en avant des clichés personnalisés pour leur caractère unique et original.
Écrire directement sur les visuels
Publiez toujours des visuels nets en évitant toutes distractions inutiles (texte, logo, etc.).
Pourquoi ? Simplement parce que les algorithmes du web et les lecteurs d'écran ne reconnaissent pas le texte intégré dans une photographie ou une illustration. Cela signifie que les mots-clés associés à votre visuel n'auront aucun impact sur votre classement SEO.
Si vous avez des informations importantes à faire passer, ajoutez du texte brut dans votre page à des fins d'accessibilité.
Oublier d'adapter les visuels pour la version mobile
Tout le monde utilise un téléphone ou une tablette pour accéder à Internet. Un site non optimisé pour les appareils mobiles vous fait perdre du trafic. Sans oublier que Google exploite désormais ce critère comme facteur de classement.
Assurez-vous que les images apparaissent claires et nettes sur n'importe quelle taille d'écran.
Quels sont les différents types d'images web ?
Faisons le point sur les divers formats de fichiers dont vous devez tenir compte pour optimiser les images de votre site web.
Les images, les photos et les illustrations
- De vos produits vendus sur votre boutique en ligne ou site e-commerce : vous aidez les client.e.s à visualiser et à se projeter avec vos produits.
- De vos pages fixes et articles de blog : vous illustrez vos propos et vous rendez votre contenu plaisant.
Les infographies
Capture d'écran : exemple d'infographie (source : Rawpixel.com).
Les infographies transmettent une synthèse d'informations à travers une combinaison de textes et de graphiques. Vous expliquez des sujets complexes d'une manière simple et percutante, par exemple :
- des infographies informatives ;
- des infographies chronologiques ;
- des infographies statistiques ;
- etc.
Attention à leur succès contagieux ! J'apprécie particulièrement l'outil Piktochart pour créer des infographies en quelques clics.
Les captures d'écran
Aussi appelée « screenshot », une capture d'écran est, comme son nom l'indique, une capture de ce qui est actuellement affiché sur l'écran d'un ordinateur ou d'un appareil mobile. Parfait pour montrer comment utiliser une fonction particulière, donner des exemples ou encore, résoudre un problème !
Mon outil fétiche du moment : l'application Chrome Screenshoter.
Où télécharger des images libres de droits et gratuites ?
Vous recherchez des photos pour votre site web, votre blog, un e-book, ou votre newsletter ? De nombreuses plateformes proposent des visuels gratuits libres de droits à usage commercial.
Un conseil : vérifier les conditions d'utilisation de tous les fichiers que vous téléchargez sur la toile pour vous assurer que vous les utilisez légalement et conformément à la licence. Aussi, il est conseillé de privilégier des fichiers uniques (les vôtres) pour l'optimisation des images.
Voici 3 banques d'images que j'utilise personnellement pour rendre mes travaux conviviaux et chaleureux !
Pexels
Pexels propose une vaste collection d'images gratuites de haute qualité prises par des photographes professionnels. Tous les fichiers sont sous licence Pexels, ce qui vous permet de les utiliser gratuitement, même à des fins commerciales. Mon conseil : recourez à des mots-clés pertinents pour trouver le cliché parfait. Alors, êtes-vous prêt.e à raconter votre histoire en images ?
Unsplash
Unsplash recense des photographes tous plus talentueux-se.s les un.e.s que les autres. Là aussi, vous n'avez pas à vous soucier des problèmes de droits d'auteur puisque les clichés sont libres d'utilisation sans aucune attribution requise. Ce ne sont pas moins de 3 millions de visuels et designs pour toutes sortes de projets. Vous n'avez plus d'excuses pour trouver l'image pépite qu'il vous faut.
Capture d'écran de la plateforme Unsplash : exemples de photos pour la requête « décoration ».
Picjumbo
Picjumbo offre des visuels haute définition pris par le photographe professionnel Viktor Hanacek, le fondateur du site. Vous y trouverez une large sélection de belles images pertinentes pour votre projet personnel ou commercial : photos de nature, photos de paysages urbains, portraits humains, photos culinaires, etc. Il y en a pour tous les goûts ! C'est par ici pour découvrir l'une des meilleures banques de photos gratuites.
Comment vérifier le temps de chargement d'une page ?
Le temps de chargement, un critère essentiel pour offrir une bonne expérience utilisateur. Un site rapide améliore votre référencement. C'est le flou total pour vous ? Heureusement, des outils en ligne contrôlent facilement la vitesse de votre site web.
Dans cet article, je fais le choix de vous parler de Google PageSpeed Insights.
Google PageSpeed Insights, un outil gratuit qui permet de mesurer les performances de votre site web sur les ordinateurs et les appareils mobiles. En insérant l'URL de votre site, vous obtenez un score global. L'outil fournit des informations sur la façon d'améliorer les temps de chargement des pages.
Vous pouvez afficher des mesures spécifiques telles que le délai d'obtention du premier octet, la taille de la page, le temps de réponse du serveur, etc. Tout ce qu'il faut pour vous aider à identifier les points nécessitant une consolidation. Et voilà, c'est simple comme bonjour !
Capture d'écran de l'interface de l'outil Google PageSpeed Insights.
Ce qu'il faut retenir
Alors, prêt.e à faire briller votre site une image à la fois ? Optimiser les images pour le web se résume à 3 étapes simples : d'abord, redimensionnez et compressez votre visuel ; puis, choisissez un nom de fichier descriptif ; enfin, rédiger un texte alternatif informatif. Une fois que vous aurez fait cela — félicitations, car ces précieux conseils vous mèneront sur la bonne voie pour améliorer le référencement de votre site web et obtenir un trafic de meilleure qualité.
Mon article vous a plu ? Partagez-le avec votre réseau
