Vous avez tout donné pour rédiger un contenu super intéressant. Après relecture, l'article vous semble parfaitement optimisé : référencement, mots clés, copywriting…
Oui, tout y est ! La 1ère page de Google est à portée de clics.
Il ne reste plus qu’à ajouter des visuels pour agrémenter, aérer et rythmer votre contenu.
Mais attention, là aussi l'enjeu SEO est fort.
L'optimisation des images jouent un rôle important dans le référencement naturel. Elles peuvent même faire toute la différence !
Pourquoi ? Et comment procéder ?
Je vais tout vous expliquer.
Suivez le guide.
PS : Pour les courageux qui liront jusqu'au bout, je vous ai concocté une liste de mes outils gratuits préférés.
Au menu :
- Pourquoi optimiser ses images pour le SEO
- 9 bonnes pratiques pour optimiser ses images
- 5 outils gratuits pour optimiser ses images
Pourquoi optimiser ses images pour le SEO ?
Optimiser les images pour le SEO, c’est avant tout optimiser pour le web.
Et sur le web, vous créez pour 2 cibles :
- vos prospects/clients, auxquels vous devez offrir un contenu de qualité
- les moteurs de recherche, que vous devez aider à comprendre votre contenu
Faire l’impasse sur l’une ou l’autre, c’est se tirer une balle dans le pied.
Pour vos prospects, une image vaut 1 000 mots. Une image bien choisie sera toujours plus parlante qu’un paragraphe ou qu’un bon titre. Elle capte l'attention du lecteur et résume le propos de l’article ou du paragraphe.
Pour les moteurs de recherche, une bonne optimisation SEO de vos images vous permet, en plus d’obtenir de la visibilité dans Google Images, de booster le classement global de vos pages, et donc d’augmenter le trafic de votre site internet.
Une étude de SearchEngineJournal a même conclu que les infographies accessibles depuis Google Images peuvent booster les visites d’un site web de 12%.
Vous le savez, parmi les critères d'optimisation SEO, l’expérience utilisateur est très valorisée. Et bien, cette règle s’applique aussi aux images.
Les images trop lourdes ralentissent le chargement de vos pages et peuvent vous pénaliser.
Au contraire, un site web rapide sera considéré comme plus qualitatif pour les utilisateurs, et sera donc mieux positionné.
J'en parlais dans un tweet récemment :
Connaissez-vous les Core Web Vitals ?
— Florian | Content Marketing ✍️ (@florian_auffret) August 25, 2022
3 indicateurs de Google qui visent à améliorer l'UX d'un site.
Ils ont été ajoutés dans l'algo en 2021.
Un mauvais score sur l'un d'entre eux peut ruiner tous vos efforts SEO.
Qu'est-ce que c'est ?
Comment les mesurer ?
THREAD 🧵 pic.twitter.com/XcpJKp3kiS
9 bonnes pratiques pour optimiser ses images
Passons maintenant en revue les différents éléments pour une optimisation parfaite de vos images. Rien de compliqué, rassurez-vous.
Gardez en tête qu’il faut de la rigueur et de la méthode. Travaillez sur chacune de vos images sans en oublier, la SERP vous en saura gré !
1. La balise Title
La balise titre (ou title en anglais) correspond au texte qui s’affiche lorsque l’internaute passe la souris sur l’image (aussi appelé infobulle).
Cet attribut HTML n’a pas un poids énorme au niveau SEO mais joue un rôle dans l’expérience utilisateur.
Or on l’a vu, Google privilégie les sites web proposant une bonne UX.
Privilégiez une balise titre courte et descriptive. Si vous pouvez y insérer votre mot-clé, c’est encore mieux.
2. La légende
La légende est le texte affiché sous vos illustrations. Elle aide, autant Google que vos lecteurs, à comprendre le contexte de l’image.
Comme la balise titre, son poids SEO est relatif mais son importance en terme d’UX ne l’est pas.
Ne la rédigez pas à la va-vite. Votre légende doit expliquer le contexte de votre image, de manière fluide, et si possible contenir vos mots-clés.
3. L’attribut ALT
On entre ici dans le vif du sujet.
L’attribut alt est THE élément à optimiser pour le référencement de vos images.
C’est cet attribut (aussi appelé texte alternatif) que les moteurs de recherche vont lire pour décoder l’image.
Dîtes-vous qu’une personne ne pouvant pas voir l’image doit pouvoir se l’imaginer. Rédigez une description précise, tout en restant le plus concis possible (100 caractères maximum).
Exemple :
Un texte alternatif “voiture ancienne décapotable rouge” sera plus efficace que simplement “voiture”.
Tentez d’y intégrer l’un de vos mots clés si possible. Ça aidera Google et ses concurrents à saisir encore davantage votre thématique.
Prenez la rédaction de cet attribut au sérieux car c’est aussi lui qui s’affichera à l’écran en lieu et place de l’image, si celle-ci ne se charge pas.
4. Le nom du fichier
Dernier élément textuel primordial : le nom du fichier.
Comme la balise ALT, il est scruté par Google et permet d’optimiser le référencement de votre image. Il doit donner aux moteurs de recherche une idée précise du contenu de l’image.
Soyez à la fois concis et informatif. 2 ou 3 mots pertinent suffisent pour l’optimiser.
Exemple :
Si votre image représente un citron vert, le titre de votre image devrait être “citron-vert.jpeg”. Grâce à cette optimisation simple, vous augmentez vos chances d’apparaître sur Google Images, sur des requêtes comme "citron vert".
Pour finir, 3 conseils pour rédiger des noms de fichier clean pour vos images :
- Évitez les caractères accentués et les caractères spéciaux (#,*, %, ou à, é…)
- Séparez les mots par des tirets (—).
- Écrivez en minuscule.
5. Le format d’image
Sélectionner le bon format pour vos images n’est pas anodin. Ce choix aura un impact concret sur votre site web.
La qualité de l’image rejaillit sur l’expérience du visiteur. Une image pixellisée est moins engageante qu’une illustration en haute définition.
Seulement, plus la qualité est au rendez-vous, plus le poids est lourd.
Le temps de chargement qui en découle peut vous pénaliser.
Voici les formats les plus courants, acceptés et lus par tous les navigateurs.
Le JPEG
Le format JPEG propose une qualité d’image correcte pour une taille raisonnable.
Il est conçu pour les images dotées de milliers de couleurs ou de nuances de gris. Privilégiez ce format pour les images où les déclinaisons de couleurs ont leur importance.
Le JPEG est idéal pour illustrer vos articles avec des images, vos landing pages avec des photos de vos produits, ou avec des captures d’écran de votre logiciel.
Ses points faibles :
- une perte de qualité lors de la compression. En réduisant la taille du fichier, vous dégradez l’apparence de votre page.
- il ne gère pas la transparence
Le PNG
Au contraire, les images en PNG gèrent la transparence et ont une résolution élevée.
Privilégiez-le pour vos infographies, graphiques, bannières, ou toute autre image nécessitant de la transparence.
Son point faible :
- les fichiers PNG sont généralement plus lourds. Les multiplier ralentit le chargement de votre page.
Utilisez donc ce format avec parcimonie.
Le GIF
Le format GIF est conçu pour les images animées.
Bien moins lourd qu’une vidéo, les GIF sont pratiques pour intégrer une courte démo de l’outil, ou simplement pour ajouter une touche de fun à votre page.
Son point faible :
- Avec une faible taille d’images, la qualité s’en ressent. Les images GIF ne dépassent pas 8 bits. Pour comparaison, JPEG monte à 24 bits.
Le SVG
À la différence du format matriciel des exemples précédents, ce format vectoriel permet de redimensionner la taille des images sans perte de qualité.
De plus, les images SVG sont généralement légères et permettent de diminuer votre temps de chargement.
Le SVG est notamment parfait pour vos logos ou icônes.
Son point faible :
- il restitue de façon médiocre les photos et illustrations complexes, en utilisant du texte XML pour délimiter les formes.
Le WEBP
Google a créé ce format pour une compression plus efficace.
Les images en WebP prennent, en moyenne, entre 25 % et 35 % moins de place que les autres formats, pour une qualité identique.
Longtemps freiné par le fait qu’il ne soit pas lu sur tous les navigateurs, il fonctionne désormais sur la quasi-totalité d’entre eux.
J’écrivais plus haut qu’on ne pouvait pas tout avoir. Est-ce si sûr ?
Le WebP est très performant et est en train de s’imposer comme le format standard pour booster son référencement SEO.
6. La taille de l’image
Vous l’avez compris, plus une image est petite, plus elle est légère, moins elle met de temps à charger.
Avantage pour l’utilisateur qui en tire une fluidité de lecture.
Avantage pour le moteur de recherche qui récompense cette rapidité.
Maîtrisez donc la taille de vos images. Il n’est pas nécessaire d’uploader une image de 2 000 pixels (qui sera très lourde), si l’emplacement ne fait que 600 pixels.
Diminuez le nombre de pixels, en hauteur comme en largeur, pour rester à l’échelle du document initial. Vous obtiendrez l’équilibre parfait entre occupation de l’espace et vitesse de chargement.
7. Le poids de l’image
Encore un petit effort. Reste le poids de votre fichier qui peut constituer un handicap… de poids.
S’il n’y a pas de règle précise, considérez qu’un fichier image ne doit pas dépasser les 70 à 100 Ko. Vous pouvez pousser jusqu’à 200 Ko pour une bannière.
Pour réduire le poids de vos images, prenez l’habitude de toujours les compresser avant de les intégrer à votre site web. De nombreux outils gratuits existent pour cela. Je vous en partage 5 en fin d’article.
8. Le lazy loading
Le chargement paresseux, vous connaissez ?
Le lazy loading est un attribut HTML qui permet de différer le chargement de l’image. Autrement dit, l’image ne se charge que lorsqu’elle apparaît à l’écran.
Si le visiteur ne lit qu’une partie de la page web, les illustrations restantes ne seront pas chargées et présenteront un flou d’attente.
Exemple via la documentation Google
Les images restent tout de même indexées sur les moteurs de recherche mais cela évite de ralentir le chargement.
La plupart des éditeurs de site web (comme Wordpress ou Hubspot) proposent des solutions natives pour ajouter le lazy loading.
9. Un sitemap dédié aux images
Dernier conseil, mais pas des moindres : créez un sitemap spécifique pour vos images.
L’intérêt ?
Sur le même principe que le sitemap pour vos pages, celui-ci va permettre à Google de répertorier plus facilement vos images dans Google Images.
Cette optimisation n’est pas obligatoire mais donne un sacré coup de boost au référencement naturel de vos images.
Si vous avez déjà fait un sitemap XML pour vos contenus texte, vous ne serez pas perdu. Sinon, jetez un œil à la documentation de Google.
Exemple d'un sitemap pour images
Ne vous restreignez pas, Google autorise jusqu’à 1000 images par page !
Enfin, n’oubliez pas de pousser votre sitemap dans la Search Console pour la rendre opérationnelle.
5 outils gratuits pour optimiser ses images
J’ai pu tester de nombreuses solutions d'optimisation et de compression depuis des années. Voici les 5 outils que j’utilise régulièrement. Ils sont simples, efficaces et gratuits.
Profitez-en !
Tiny PNG
Très simple à utiliser, TinyPNG permet de compresser des images de format JPG, PNG et WebP.
Le résultat est assez bluffant ; on peut diminuer poids et taille des photos jusqu’à 70 % !
Autre point positif : la possibilité de compresser jusqu’à 20 images à la fois.
En version gratuite, vous ne pourrez travailler que sur des fichiers de moins de 5 Mo.
Si vous voulez aller plus loin et bénéficier de fonctionnalités supplémentaires, un abonnement Pro annuel est proposé pour 39 $.
Site web de l'outil “Tiny PNG”
IloveIMG
Plus complète que TinyJPG, IloveIMG traite les fichiers JPG, PNG, SVG, WebP entre autres.
Vous pouvez compresser les images, les redimensionner à votre guise, les convertir dans d’autres formats, les éditer en y ajoutant textes ou icônes, etc. Et les résultats sont de qualité.
Vous pouvez compresser jusqu'à 15 images à la fois. Cependant, la taille des fichiers reste limitée à 130 Mo.
Une version payante libère les limitations pour 6 €/mois.
Site web de l'outil “IloveIMG”
Compressor
L’un des avantages de Compressor est la prévisualisation.
Outil de compression d’images en formats JPG, PNG, GIF et SVG, il permet de constater en direct la perte de qualité éventuelle de l’image compressée.
Il propose un mode Lossless et un mode Lossy pour diminuer encore plus le poids du fichier.
Les réductions de taille et de poids peuvent ainsi aller jusqu’à 90 % des dimensions d’origine.
À la différence des deux premiers logiciels présentés, on ne peut travailler que sur un fichier à la fois en version gratuite, et celui-ci est limité à 5 Mo.
Pour aller plus loin, l’éditeur propose une version Premium annuelle à 50 $.
Site web de l'outil “Compressor”
Optimizilla
Comme Compressor, Optimizilla propose une prévisualisation de l’image compressée.
Limité aux formats JPG, PNG et GIF, il faut dire qu’il fait bien son travail, avec une facilité et une simplicité d’exécution remarquables.
On peut travailler sur plusieurs fichiers à la fois, jusqu’à 20. Et ceci dans une gratuité totale (pas de version payante) !
Site web de l'outil “Optimizilla”
ezGif
Comme son nom l’indique, ezGIF est spécialisé dans les images GIF.
Vous pouvez (presque) tout réaliser : en créer, bien sûr, mais aussi en retravailler, convertir une vidéo en GIF, rajouter des effets, travailler la taille de vos images, etc.
C’est une solution vraiment facile à utiliser ; j’ai toujours obtenu de bons résultats sans me prendre la tête !
Site web de l'outil “ezGIF”
PS : Vous souhaitez booster le trafic de votre blog ? Je connais un rédacteur web SEO juste ici.
