Comment optimiser les images pour le référencement ?

"La recherche d'images et de vidéos Google est souvent négligée, mais elles ont un potentiel énorme". Autrement dit, traduit en italien, le système de "recherche de vidéos et d'images sur Google" est souvent négligé, mais a un énorme potentiel " pour les sites et pour le référencement. Ainsi s'exprimait-il il y a quelque temps sur Reddit Gary Illyes , l'un des visages publics les plus célèbres de Google, soulignant l'importance d'optimiser les éléments multimédias dans le contenu d'une page, et l'attention de Mountain View sur le sujet reste élevée encore plus récemment, comme l'a confirmé par les différents focus dédiés au système Images . Et donc, grâce également au guide Google approprié des meilleures pratiques sur les images, nous braquons les projecteurs sur la délicate question de la gestion SEO des images publiées sur nos pages pour améliorer les performances techniques et tenter d'émerger sur Google Images , le moteur de recherche parallèle du Big G qui peut être une source importante de trafic organique , et pas seulement pour les sites d'achat en ligne.

L'importance des images pour le SEO

La pertinence des images pour le référencement et pour le succès d'un site peut se comprendre en se référant à quelques statistiques (bien qu'un peu dépassées) : une recherche Sparktoro, par exemple, révèle que Google Images est pratiquement le deuxième moteur de recherche le plus utilisé par les utilisateurs américains. , juste derrière le système de recherche Google traditionnel et même devant Bing, Yahoo! et d'autres moteurs de recherche concurrents .

Google Images utilisé par au moins 2 personnes sur 10

Le mode de recherche de Google Images détient à lui seul plus de 20 % de toutes les requêtes générées par les utilisateurs sur les 10 principaux moteurs de recherche utilisés aux États-Unis, et donc des centaines de millions d'Américains (et d'autres) profitent chaque jour du système pour découvrir visuellement et explorer des contenus sur le Web – et ce n'est pas un hasard si le système de recherche d'images est en constante évolution, profitant également des avancées technologiques et des applications pour smartphones, comme Lens, signe de la chaleur de ce front et de l'ampleur de l'entreprise américaine y investit.

Les images influencent les achats en ligne

C'est Google lui-même qui révèle que 50% des acheteurs en ligne admettent que les images des produits les ont influencés lors de la phase d'achat , alors qu'en revanche une enquête Visual Objects menée auprès d'un échantillon de 500 petites entreprises a mis en évidence qu'environ un quart des entrepreneurs déclarent que la le contenu visuel publié sur le site fait la différence .

Les images sont sous-estimées pour le référencement

Pour comprendre ce qu'est la valeur SEO des images, on se réfère encore une fois aux propos d'Illyes, qui disait justement que Mountain View sait que "la recherche média est trop ignorée pour ce qu'elle permet aux éditeurs d'obtenir", c'est pourquoi l'entreprise qu'il était "déployer plus d'ingénieurs et plus de ressources" pour amener chacun à changer de perspective.

Pour Google, les images sont un signal de pertinence

Lors du rendez-vous sur la plateforme sociale bien connue, Illyes avait également dédié d'autres réponses rapides sur le sujet macro Google Images , qui nous aident à mieux comprendre quel peut être le potentiel SEO des images et des éléments multimédias . Un premier fait, par exemple, est que la technologie de reconnaissance d'images utilisée par Google est un signal de pertinence pour l'indexation du contenu des pages.

Une valeur ajoutée pour le contenu de la page

En d'autres termes, cela signifie que l'utilisation d'images aléatoires ou simplement agréables pour créer un engagement avec les lecteurs n'est peut-être pas une stratégie gagnante si nous voulons que l'algorithme de Google identifie cette ressource comme pertinente pour la page et le contenu présent. Mieux vaut donc choisir les photos et les graphiques de manière plus stratégique , car ces supports offrent un soutien immédiat à l'expérience utilisateur, ajoutent une valeur supplémentaire au contenu de la page et permettent aux gens de trouver visuellement plus de produits directement à partir de la recherche d'images.

Google Images, les bonnes pratiques pour mieux se positionner

En bref, les images sont un outil puissant à utiliser avec stratégie et attention, car elles sont un facteur de classement sur Google et un canal important pour attirer du trafic organique sur le site grâce au moteur de recherche parallèle Google Images, qui offre un lien direct vers le site qui a téléchargé la ressource, ou pour augmenter les conversions . Il est donc important de connaître les règles d'optimisation des images sur le site pour le référencement, c'est-à-dire des techniques et des outils qui peuvent nous aider à optimiser les images et contenus multimédias publiés sur la page, nous permettant de ne pas trop peser sur les performances du site , et aussi quelques astuces pour réussir à améliorer les résultats dans Google Images, qui peut devenir une source importante de trafic organique alternatif et stratégique.

Optimisation des images, les conseils de Google

Commençons par retrousser nos manches et découvrons ce qu'une source officielle propose comme conseils d'optimisation d'image, les guidelines en support de la Google Search Console , qui nous accompagnent dans cette tâche délicate mais extrêmement utile. Au début, la page éditée par les techniciens de Mountain View rappelle précisément pourquoi il est important d'effectuer ces opérations : "Google Images est un moyen de découvrir des informations sur le Web de manière visuelle", ce qui permet aux utilisateurs "d'examiner rapidement les informations avec plus de contexte autour des images grâce à de plus en plus de nouvelles fonctionnalités », comme les légendes et les badges vedettes qui apparaissent de plus en plus dans les SERPs . De cette façon, résume le document (mis à jour en janvier 2023) "les résultats peuvent devenir beaucoup plus utiles, ce qui peut conduire à un trafic de meilleure qualité vers votre site".

Organisez et enrichissez l'expérience utilisateur avec des images

Le premier conseil qui vient de Big G est philosophique : "Pour améliorer la visibilité de votre contenu dans Google Images ", nous disent-ils, il faut "se concentrer sur l'utilisateur en lui offrant une expérience utilisateur fantastique ", ce qui se traduit concrètement en " concevoir vos pages pour les utilisateurs, pas pour les moteurs de recherche ». Il y a six étapes à suivre pour atteindre l'objectif :

Fournir un bon contexte . Le contenu visuel doit être pertinent par rapport au sujet de la page et il serait préférable d'insérer des images « là où elles ajoutent une valeur originale à la page ». Annotation peut-être superflue, Google "déconseille les pages où ni les images ni le texte ne sont des contenus originaux".
Optimisez votre emplacement . Les images doivent être placées à côté du texte pertinent et, le cas échéant, en haut de la page , qui est la section la plus importante.
N'incorporez pas de texte important dans les images . Selon Google, il est préférable d'éviter "d'intégrer du texte dans les images , en particulier des éléments de texte importants comme les en-têtes de page et les éléments de menu", car tous les utilisateurs n'y ont pas accès et les outils de traduction ne fonctionnent pas sur les images. Pour vous assurer que votre contenu a une accessibilité maximale, il est préférable de conserver le texte en HTML et de fournir un texte alternatif pour les images.
Créez des sites informatifs de qualité . Assurez-vous toujours de la qualité : "le contenu de votre page Web est tout aussi important que le contenu visuel pour Google Images" car il fournit du contexte et rend les résultats plus intéressants . Concrètement, « le contenu de la page peut être utilisé pour générer un extrait de texte pour l'image et Google considère la qualité du contenu de la page lors du classement des images ».
Créez des sites adaptés aux appareils . Bien sûr, il y a aussi une référence à la nécessité de concevoir un site "pour tous les types d'appareils et de tailles", qui soit adapté aux mobiles et efficace pour tous les utilisateurs.
Créez une bonne structure d'URL pour vos images . Comme pour la recherche classique, "Google utilise le chemin d'URL et le nom de fichier pour l'aider à comprendre vos images", et vous devez donc "organiser le contenu de vos images de manière à ce que les URL soient construites de manière logique " .

Les éléments à vérifier pour optimiser les performances

S'il s'agit de recommandations dites générales et toujours valables, le guide accorde alors plus d'attention à d'autres éléments à vérifier afin d'essayer d'améliorer le positionnement des images dans la Recherche. Le premier champ à gérer est celui du titre et de la description de la page, qui comme on le sait peut influencer le choix des utilisateurs de cliquer ou non sur un résultat.

Le titre et l'extrait de page affectent le CTR de l'image

Implicitement (mais pas trop), Google nous indique que le CTR des images dans la recherche est influencé par les informations fournies : "Google Images génère automatiquement un titre et un extrait pour mieux expliquer chaque résultat et comment il est lié à la requête de l'utilisateur", mais le système utilise également "un certain nombre d' autres sources pour ces informations, y compris des informations descriptives dans le titre et les balises méta de chaque page".

Images et données structurées

L'utilisation de données structurées et, en particulier, le balisage des produits, des vidéos et des recettes peut conférer à un site de grands avantages : Google "peut afficher vos images sous forme de résultats riches, y compris un badge en vedette, qui donne aux utilisateurs des informations pertinentes sur votre page et peut générer du trafic. à votre site de manière plus ciblée .” Dans ce cas, l'attribut image est un champ obligatoire pour activer le badge et le résultat enrichi sur Google Images.

Réduire le poids et améliorer la vitesse

Pour attirer les utilisateurs et donc augmenter la probabilité d' obtenir du trafic, il faut des "photos de qualité", qui invitent à cliquer plus que "des images floues et peu claires", voire "dans la vignette des résultats". Cependant, ces ressources pourraient peser sur la taille globale de la page et rendre le site lent ou difficile à charger, notamment en navigation mobile. Le conseil de Google est "d'appliquer les dernières techniques d'optimisation d'image et d'images réactives pour offrir une expérience utilisateur rapide et de haute qualité". Concrètement, on peut analyser la vitesse du site avec PageSpeed Insights et se référer à des bonnes pratiques et techniques plus générales pour améliorer les performances du site (mais nous verrons des informations plus précises et détaillées plus tard !).

Organiser le texte des images

Nous l'avons déjà dit : vous devez également optimiser les textes accompagnant les images, tels que les titres, les légendes, les noms de fichiers et les textes descriptifs. Google analyse la page et extrait les informations relatives au sujet de l'image du contenu présent, y compris les légendes et les titres, et le nom du fichier lui-même peut donner des indices sur ce que représente la photo .

Optimiser le texte alternatif

Comme nous le savons, le texte alternatif ou le texte alternatif est la partie de texte qui décrit une image et améliore l'accessibilité pour les personnes incapables de voir les images, "y compris les utilisateurs de lecteurs d'écran ou ceux disposant de connexions à faible bande passante". Google utilise le texte alternatif "avec des algorithmes de vision par ordinateur et le contenu de la page pour comprendre le sujet de l'image", et le texte alternatif "est utile comme texte d' ancrage si vous décidez d'utiliser une image comme lien", explique le guide. Il y a des règles à respecter également pour ce paramètre : vous devez fournir "un contenu utile et informatif qui utilise les mots clés de manière appropriée et qui sont cohérents avec le contexte du contenu de la page" et éviter le bourrage de mots clés, qui pourrait fournir "une expérience utilisateur négative et peut faire apparaître votre site comme spam ».

Comment découvrir toutes les images du site

En changeant de zone d'optimisation, nous pouvons appliquer certains processus pour permettre à Google de découvrir toutes les images téléchargées sur le site : la première étape consiste à utiliser des éléments d'image HTML sémantiques pour intégrer des images (une expression qui, dans la nouvelle version du guide, remplace le conseil précédent d'utiliser le balisage sémantique, car "Google analyse le code HTML de vos pages pour indexer les images, mais n'indexe pas les images CSS"). Aujourd'hui, Google nous dit que l'utilisation du balisage HTML sémantique aide les crawlers à trouver et à traiter les images, qu'ils analysent les éléments HTML <img> (même lorsqu'ils sont enveloppés dans d'autres éléments comme <picture>) dans les pages pour indexer les images, mais il n'indexe pas Images CSS. Cependant, les points suivants n'ont pas changé, à commencer par les conseils d'utilisation d'un sitemap d'images , qui fournissent des détails sur ces ressources et surtout l'URL de référence : contrairement aux sitemaps normaux qui ont des restrictions interdomaines, pour les images, vous pouvez entrer des URL vers d'autres domaines, puis utilisez les réseaux CDN pour télécharger ces fichiers.

Formats de fichiers pris en charge

Ensuite, il y a des limites aux formats de fichiers pris en charge par Google Images, qui sont uniquement BMP, GIF, JPEG, PNG, WebP et SVG (et c'est une bonne pratique de "faire correspondre l'extension du nom de fichier au type de fichier"). Cependant, nous avons la possibilité "d'intégrer des images en tant qu'URI de données", qui intègrent l'élément en "définissant l'attribut src d'un élément img en tant que chaîne encodée en Base64", réduisant ainsi les requêtes HTTP mais en même temps avec le risque de " augmentant considérablement la taille de la page". Petite mention également aux images adaptables ou responsive, qui pour le cahier des charges utilisent l' attribut img srcset ou l' élément picture : selon Google, mettre en place un web design responsive conduit à une meilleure expérience utilisateur, puisque les utilisateurs naviguent sur les pages depuis de nombreux types d'appareils . En particulier, l' attribut srcset vous permet de spécifier différentes versions de la même image, pour s'adapter à différentes tailles d'écran. L' élément d'image est plutôt un conteneur qui sert à regrouper différentes versions source de la même image, offrant une approche de secours pour permettre au navigateur de choisir la bonne image en fonction des capacités de l'appareil (telles que la densité de pixels et la taille de l'écran) et vous permettant également d'utiliser les nouveaux formats d'image avec réduction contrôlée intégrée pour les clients qui ne prennent pas encore en charge les nouveaux formats. Selon Google, fournissez toujours un élément img de sauvegarde avec un attribut src lorsque vous utilisez la balise d'image au format indiqué dans l'image.

Images et SafeSearch

Le dernier chapitre du guide de Google est consacré à la délicate question de SafeSearch , le paramètre qui « permet de déterminer s'il faut afficher ou bloquer des images, des vidéos et des sites Web explicites dans les résultats de recherche Google » : les propriétaires de sites sont invités à aider Google à comprendre la nature d'images pour vous permettre d'appliquer les paramètres le cas échéant. Pour les sites contenant des images pour adultes , il est fortement recommandé de regrouper ces fichiers "séparément des autres images de votre site Web" et d'utiliser le marquage automatique et les balises méta pour adultes.

<meta name="rating" content="adult" />
<meta name="rating" content="RTA-5042-1996-1400-1577-RTA" />

qui vous permettent de ne pas montrer aux utilisateurs "des résultats qu'ils ne veulent pas ou qu'ils ne s'attendent pas à voir". Cependant, les algorithmes de Google utilisent "une variété d'indicateurs pour décider si une image ou une page entière doit être filtrée des résultats lorsque le filtre SafeSearch de l'utilisateur est activé", y compris via l'apprentissage automatique, mais les "algorithmes de SafeSearch examinent également des choses plus simples comme où l'image a déjà été utilisée et le contexte dans lequel elle a été utilisée ».

Les nouveaux conseils pour l'optimisation SEO des images

John Mueller nous a également accompagnés pour découvrir les principales techniques d'optimisation d'image , auxquelles il a consacré un rendez-vous avec les Search Central Lightning Talks , les conférences virtuelles sur YouTube avec lesquelles les Googleurs ont surmonté les limitations d'événements en direct imposées par la pandémie grâce au streaming . Ainsi, le Search Advocate de l'entreprise a consacré un long discours - une dizaine de minutes - à expliquer ce qu'il faut faire pour augmenter les chances d'avoir de la visibilité sur Google Images et les autres espaces de recherche où apparaissent les images, afin de trouver une nouvelle source potentielle de trafic organique. .

Fonctionnement de Google Images

Avant de se lancer dans les conseils, Mueller a brièvement décrit le fonctionnement de ce moteur de recherche parallèle et visuel. Google Images aide les utilisateurs à trouver visuellement des pages Web "pour un large éventail de tâches : qu'il s'agisse de lancer un projet de bricolage, de cuisiner un repas, de trouver une tenue ou, comme nous l'avons vu récemment, d'apprendre à se couper les cheveux à la maison pendant la quarantaine ", Google Images montre aux utilisateurs des images et des pages pertinentes du Web, "afin qu'il soit aussi facile que possible de trouver ce que vous cherchez". Les résultats affichent une image miniature , une attribution et un titre de page ; les utilisateurs peuvent développer la vignette pour en savoir plus sur l'image et le contenu de la page. Si Google estime qu'"un résultat est un produit, une recette ou une vidéo - que le site peut spécifier avec des données structurées appropriées - il montre cette information à l'utilisateur" avec une icône en bas ; le cas échéant, des informations sur la licence de l'image s'affichent également . Enfin, « bien sûr, il y a un gros bouton pour visiter directement la page ».

Les images dans d'autres endroits sur Google

Comme nous l'avons dit, ce n'est pas seulement dans la section appropriée que les résultats visuels peuvent apparaître . Premièrement, "les vignettes d'image peuvent également être affichées pour les résultats de recherche Web traditionnels , lorsqu'elles sont pertinentes pour la requête d'un utilisateur ou représentatives d'une page Web." Par exemple, dit Mueller, "une image d'une recette pourrait être montrée", ce qui aide l'utilisateur à se faire une idée du plat qui l'intéresse et qu'il a l'intention de reproduire. De plus, il y a Google Discover , "un moyen clair pour les utilisateurs d' explorer le contenu sur les sujets qui les intéressent", qui affiche une image miniature pertinente pour les pages. En résumé, les images miniatures peuvent être affichées directement dans Google Images , elles peuvent être affichées en tant que résultats pertinents ou en tant que contexte supplémentaire pour d'autres pages dans la recherche Google et en tant que vignettes dans Discover.

Que voulons-nous réaliser avec les images ?

Plus utilement, nous devons considérer certaines questions qui peuvent mieux guider le travail, telles que « Les utilisateurs recherchent-ils visuellement notre contenu ? Si oui, comment pourraient-ils chercher ? Quel aperçu du contenu du site trouveraient-ils intéressant ? Les pages ont-elles une image qui est particulièrement pertinente pour cette page ?", ce qui peut nous aider à "piloter l'inclusion d'images d'une manière pertinente pour les objectifs du site ". Plus précisément, si un site publie de la poésie et "décore la page avec des images clipart florales génériques, il est peu probable que les utilisateurs recherchent des images clipart florales pour lire le poème". Au lieu de cela, si nous créons "ces graphiques et que nous voulons les fournir à d'autres, cela pourrait être une requête de recherche légitime". En fin de compte, nous devons déterminer "si et comment nous voulons que le contenu de notre site Web soit affiché sur Google", car nous connaissons mieux "votre public et les objectifs de votre site".

Conseils pour optimiser les images

Après avoir clarifié les objectifs pour lesquels nous publions des images - et donc aussi les résultats que nous pouvons obtenir - la vidéo se concentre sur les aspects techniques pour s'assurer que les ressources téléchargées sont optimisées pour le référencement. John Mueller propose 12 conseils d'optimisation SEO pour les images (qui reflètent évidemment aussi les concepts exprimés dans le guide susmentionné) :

Fournir un contexte
Optimiser le placement des images
Ne pas insérer de texte dans l'image
Utiliser les attributs alt sur les images
Utilisez des images de haute qualité
Créer des sites de haute qualité
Créez des sites adaptés aux mobiles et aux ordinateurs de bureau
Utilisez une bonne URL descriptive
Fournir des données structurées pertinentes
Utiliser de grands aperçus d'image
Ajouter des balises de licence d'image
Optimiser techniquement les images

Placer les images dans un contexte approprié

Le premier conseil est de fournir un bon contexte, c'est-à-dire de s'assurer que le contenu visuel est pertinent par rapport au sujet de la page. Il faut "utiliser des images lorsqu'elles ajoutent de la valeur à la page", en écrivant des titres de page et des en-têtes appropriés pour fournir un contexte. Il est important de garder à l'esprit nos utilisateurs et la façon dont ils "pourraient rechercher visuellement notre contenu", de réfléchir à "quels sont les mots et les phrases qu'ils pourraient utiliser" et de comprendre si nous utilisons des images sur les bonnes pages .

Étudier la position de l'image sur la page

Nous devons également optimiser le placement des images : dans la mesure du possible, les images doivent être placées à proximité du texte pertinent, et idéalement fournir une légende proche de l'image. Une autre astuce consiste à "mettre l'image la plus importante en haut de la page".

Pas de texte dans l'image

Le texte important ne doit pas être placé à l'intérieur des images, et surtout jamais pour les en-têtes de page et les éléments de menu. Le texte doit rester sur la page , car tous les utilisateurs et les moteurs de recherche ne peuvent pas accéder au texte dans les images, et aussi les outils de traduction ne fonctionnent pas sur les images : par conséquent, les images textuelles souvent « ne sont pas un aperçu particulièrement utile pour le site ”.

Écrivez le texte alternatif

Le texte alternatif - mieux connu sous le nom de texte alternatif - est un élément utile pour garantir le respect des facteurs d'accessibilité minimaux du site : ces attributs "sont un moyen de fournir des informations sur l'image aux utilisateurs qui ne peuvent pas voir les images", et sont également aux moteurs de recherche pour obtenir le contexte de la ressource.

Soignez la qualité de l'image

Il est important d'utiliser des images de haute qualité , qui "attirent davantage les utilisateurs que des images floues, peu claires et à faible résolution". De plus, les images claires sont souvent "plus attrayantes dans l'aperçu du résultat et augmentent la probabilité d' obtenir du trafic des utilisateurs".

La qualité générale du site compte aussi

Les images seules ne suffisent pas, mais elles ont besoin de « sites informatifs et de qualité », car « le contenu visuel pour Google Images est tout aussi important que le bon contenu sur les pages », qui fournit du contexte et rend les résultats plus exploitables pour les utilisateurs. . Le contenu de la page peut également être utilisé "pour générer un extrait de texte pour l'image , et Google prend en compte la qualité du contenu de la page lors du classement des images".

Avoir des sites qui fonctionnent bien sur ordinateur et mobile

Il est important de concevoir le site pour tous les types et toutes les tailles d'appareils , en s'assurant qu'il fonctionne bien pour la navigation sur ordinateur et qu'il est adapté aux mobiles, car désormais "les utilisateurs recherchent Google Images davantage à partir d' un mobile qu'à partir d'un ordinateur".

Configurez de bonnes URL stables et descriptives

Poursuivant sur les aspects techniques généraux, Mueller vous invite à mettre en place une bonne structure d'URL également pour les fichiers image, en construisant des URL de manière logique également en référence au contenu de l'image. Google utilise le chemin d'URL et le nom de fichier pour mieux comprendre et classer les ressources, et nous pouvons "l'aider" en ne modifiant pas les URL d'image ou en utilisant des redirections 301 lorsque nous devons les modifier. Habituellement, les images ne sont pas explorées aussi souvent que les pages Web, il est donc important d'utiliser des URL stables pour celles-ci. Un autre conseil pratique est de veiller à " ne pas bloquer les URL des images dans robots.txt, si on veut qu'elles soient utilisées comme aperçus sur Google".

Bloquer les images avec le fichier robots.txt

À ce stade, Mueller ouvre une petite digression sur la façon d' empêcher l'affichage des images de page dans la recherche : une "bonne façon de faire est de bloquer leur exploration dans le fichier robots.txt ". Google Search Advocate conseille que "ce fichier doit être dans un format lisible par machine spécifique , alors vérifiez que vous bloquez correctement les URL appropriées et que vous ne bloquez pas trop". En général, Google estime qu'"il est souvent utile de permettre aux utilisateurs de rechercher visuellement du contenu", mais en fin de compte, le choix de bloquer les ressources appartient au propriétaire du site.

Implémenter les bonnes données structurées

Ces premières indications sont des « bonnes pratiques générales qui peuvent certainement aider les moteurs de recherche à mieux appréhender les images de site », mais il existe d'autres techniques avancées que l'on peut envisager pour approfondir. En particulier, nous pouvons implémenter des données structurées adaptées aux images : les données structurées « sont un moyen de fournir des informations lisibles par machine sur les pages et leur contenu ». Selon le type de page, nous pouvons utiliser différents types de données structurées : "par exemple, une page de recette peut utiliser des données structurées Recette , un article de presse peut utiliser des données structurées Article d'actualité , un site de commerce électronique peut utiliser des données structurées Produit ". .

Autoriser des aperçus plus grands

Autoriser Google à afficher de grands aperçus d'images peut être utile , car "l'inclusion d'images attrayantes et de haute qualité dans votre contenu augmente vos chances de générer des visites Discover". Pour activer les aperçus d'image volumineux, les images doivent être dimensionnées de manière appropriée , puis définir la fonctionnalité avec la balise méta robots max-image-preview:large ou en utilisant AMP.

Ajouter des informations de licence

L'ajout d'informations de licence aux images fournies peut aider les utilisateurs à connaître les limites d'autorisation, à afficher les crédits d'image appropriés et à faciliter l'acquisition d'une licence pour l'image. Cela peut être fait avec des données structurées sur la page ou avec des métadonnées dans l'image.

Gardez la vitesse à l'esprit

Les images sont souvent l'élément le plus lourd , contribuant le plus à la taille globale de la page : Mueller recommande donc d'appliquer certaines techniques d'optimisation d'image, comme l'utilisation de lazy-loading ou d'images responsives pour offrir une expérience utilisateur rapide et réactive de haute qualité.

Comment travailler sur l'optimisation du site ?

En conclusion, John Mueller décrit également une "bonne approche générale lors de la révision et de l'amélioration d'un site Web" qui consiste à commencer par sélectionner "un échantillon de pages de différentes parties du site et à travailler d'abord sur celles-ci". La consultation régulière de ces pages nous aide à évaluer nos progrès, à déterminer les modifications à apporter et la meilleure façon de les apporter. Une fois le travail commencé sur quelques pages, « il est souvent relativement facile d'appliquer la même approche au reste du site ». Google Search Console peut être le bon outil pour reconnaître les problèmes et opportunités potentiels, ainsi que pour offrir des informations sur la façon dont les pages sont affichées dans la recherche ; par exemple, "vous pouvez confirmer que les données structurées sont correctement reconnues, vérifier la vitesse du site et surveiller les performances de l'image".

Conseils pour optimiser les images

En bref, les images ont une valeur qui peut être cruciale, mais pour pouvoir atteindre nos objectifs, nous devons avant tout garder à l'esprit deux éléments décisifs : nous devons simplifier les opérations de crawl et d' index de Google , et donc vérifier que nous n'avons pas bloqué les ressources robots .txt et utilisez des sitemaps d'images pour augmenter les chances que les médias apparaissent dans les résultats de recherche Google Images . Pour profiter des nouvelles fonctionnalités, voire des carrousels et des résultats riches des SERP, il est donc bon d'ajouter des données structurées à l'image, qui peuvent être utilisées par Google comme un résultat multimédia à montrer aux utilisateurs.

Le classement dans Google Images

Cependant, ce qui est peut-être la clé la plus importante pour avoir de meilleurs résultats et se positionner en premier sur Google Images est l'optimisation SEO des ressources multimédias, qui nécessitent un soin rigoureux au même titre que le contenu textuel de la page. En voulant résumer brutalement, on peut dire qu'il faut choisir des images éventuellement non ambiguës , pour être correctement balisé avec la création de titres et de descriptions qui sont pertinents par rapport au contexte de la page.

Rédigez de bons titres et descriptions d'images pour le référencement

Nous réitérons à nouveau quels sont les concepts fondamentaux en matière d'optimisation d'image SEO : une première et simple méthode d'optimisation d'image est le nom réel du fichier multimédia , dans lequel des mots-clés soigneusement choisis doivent être insérés les mots vides (tels que les prépositions) et en utilisant une structure d'URL avec une séparation des mots clés avec des tirets moins (et non des traits de soulignement, par exemple).

Balises Alt et Title comme éléments SEO

Parmi les facteurs de classement les plus fiables , les balises alt et les attributs de titre sont les paramètres les plus faciles à saisir (via n'importe quel éditeur de texte) et aident les images à se classer plus haut dans la recherche , mais plus important encore, ils créent la pertinence de la page et améliorent l'expérience utilisateur : en résumé, ils permettent le site pour bénéficier des avantages du référencement et de la convivialité. Ces attributs sont également utilisés par le moteur de recherche pour comprendre le contexte de la page , et en particulier dans le cas des liens d'images, ils fournissent des informations sur la page de destination. Les conseils pour optimiser le titre et la balise alt des imagesest d'utiliser des contenus différents, en essayant de respecter la grammaire et de ne pas forcer l'insertion de mots-clés ou de mots-clés qui ne sont pas cohérents avec le contenu.

L'optimisation des images, pour le commerce électronique, peut améliorer les conversions

Encore plus spécifiques sont les techniques d'optimisation SEO des images pour le commerce électronique , qui devraient consacrer un soin particulier à ces éléments qui, comme le montrent les données citées, peuvent vraiment représenter un outil pour augmenter les conversions grâce au trafic direct de Google Images. Par conséquent, il peut également être utile d'ajouter des indications de produit spécifiques (telles que le numéro de modèle, le SKU ou l'ISBN) dans les attributs alt pour apparaître dans les requêtes associées, qui peuvent être très précises.

Optimisation des images : choisissez les bons formats, dimensions et mesures

Avec le dépassement du bureau mobile, nous savons à quel point la vitesse compte pour Google et les utilisateurs : il est facile de comprendre que la taille des fichiers image peut affecter de manière disproportionnée le temps de chargement des pages. Il est donc important de comprendre les caractéristiques des formats de médias et comment compresser leur poids sans perdre en qualité. . Par exemple, le type de fichier le plus utilisé et le plus convivial pour le référencement est le JPG, qui garantit le meilleur rapport qualité/quantité avec de meilleurs niveaux de compression ; PNG est généralement plus lourd mais a une qualité de rendu beaucoup plus élevée. Une solution pratique consiste à enregistrer les images au format JPG progressif , c'est-à-dire qu'elles s'affichent au fur et à mesure de leur chargement dans la page.

Techniques et outils pour optimiser les images

Les formats tels que SVG ou GIF doivent plutôt être utilisés de manière clairement définie. Les fichiers GIF, en particulier, doivent être réservés uniquement à l'insertion d'animations simples sur la page qui ne nécessitent pas de grandes échelles de couleurs, tandis que pour les images animées longues et volumineuses, un vrai format vidéo pourrait être utilisé, optimisant le sitemap vidéo dédié . Les outils Google PageSpeed et Google Lighthouse recommandent en effet des formats de compression encore plus spécifiques qui ne sont pas encore compatibles avec tous les navigateurs, mais certains fournisseurs de CDN proposent la conversion Web progressive lorsque les visiteurs utilisent les navigateurs cibles. Ce qui est essentiel à prendre en considération, c'est la taille réelle du fichier , exprimée en Ko, qui ne doit jamais être inférieure à 100 Ko pour assurer une qualité optimale et ne pas dépasser 2 Mo, à l'exception des bannières ou des images très spéciales. Les éditeurs de CMS tels que WordPress , par exemple, permettent de télécharger des images d'une taille maximale de 2 Mo.

Consignes relatives à la taille des supports

En ce qui concerne les mesures de hauteur et de largeur de l'image, il est nécessaire d'évaluer divers éléments relatifs à l' utilisabilité de l'image à partir des différents appareils, comme ne pas choisir des largeurs supérieures à celles valables pour les résolutions les plus courantes de l'écran du bureau ( c'est-à-dire 2 560 pixels), sinon les navigateurs réduisent automatiquement la taille des images et vérifient que votre CSS rend les images réactives. En fonction des besoins visuels du site, vous pouvez alors envisager d'enregistrer différentes versions de la même image dans différentes tailles pour servir dynamiquement l'image la plus appropriée en fonction de l'écran de l'utilisateur (téléphone portable, tablette, fenêtre de bureau agrandie ou redimensionnée, etc. ).

Télécharger des images sur des pages

Le dernier point sur lequel nous vous invitons à porter votre attention est le système de chargement des images sur la page : même si le récent protocole réseau HTTP/2 a amélioré le processus de chargement de plusieurs images simultanément, le lazy-loading below-the-fold continue être une solution de contournement qui peut fournir des améliorations de performances significatives dans certains cas.

Qu'est-ce que le chargement paresseux d'images

L'expression chargement paresseux fait référence à une technique qui permet le chargement asynchrone de certaines ressources, telles que des images, qui n'apparaissent sur la page que lorsque cela est nécessaire pour l'utilisateur. Plus concrètement, Image Lazy Load est une méthode "d'économie d'énergie" pour charger des images hors écran ( sous le pli , c'est-à-dire dans la partie inférieure et invisible de l'affichage) uniquement lorsque l'utilisateur atteint la partie de la page où elles apparaissent . Bien que cette technique puisse améliorer la vitesse de la page , car elle ne fait que charger les images au-dessus du pli à l'ouverture (donc immédiatement visibles dès le premier instant où le site est ouvert), si elle n'est pas mise en œuvre correctement, elle pourrait avoir un impact négatif sur l'indexation des images . : dans ce cas également, les sitemaps d'images résolvent le problème car ils signalent la présence de la ressource.

Les 7 conseils pour optimiser les images et les performances

Nous avions promis une étude plus précise sur ces questions, et le guide publié sur le site web.dev nous propose un chemin en 7 étapes pour pouvoir atteindre l'objectif (ou plutôt les objectifs) d' optimiser les images pour minimiser l'impact sur les performances du site, grâce à l'utilisation d'outils et de techniques qui sont en fait assez simples même pour les moins expérimentés.

Utiliser Imagemin pour compresser les images
Remplacez les GIF animés par des vidéos pour un chargement plus rapide des pages
Utiliser les tailles paresseuses pour le chargement paresseux des images
Offrir des images réactives
Diffusez des images aux dimensions correctes
Utiliser des images WebP
Utiliser les CDN d'images pour optimiser les ressources

Compresser les images avec des systèmes spécifiques

C'est Katie Hempenius , ingénieur logiciel chez Google, qui décrit le processus à suivre pour utiliser efficacement Imagemin , un outil disponible à la fois en CLI et en module npm qui permet d'effectuer une compression d'image sans perte de qualité. Le point de départ est assez clair : les images non compressées gonflent les pages avec des octets inutiles, également parce qu'un utilisateur moyen ne remarquera pas la différence qualitative . Un laissez-passer sur Google Lighthouse nous permet de vérifier les possibilités d' améliorer le chargement des pages en compressant les images, tandis que l'utilisation d'Imagemin s'avère être "un excellent choix" car le logiciel prend en charge une grande variété de formats d'image et s'intègre facilement aux scripts de construction et aux outils de construction. . Sans entrer dans trop de détails, avec l'outil vous pouvez décider si la compression doit être "lossy" ou "lossless", c'est-à-dire combien de données perdre ; évidemment, la compression avec perte réduit la taille du fichier, mais au détriment d'une éventuelle réduction de la qualité de l'image, alors que dans l'autre type, il n'y a pas de perte. D'après l'expérience de Googler, cependant, le mode avec perte est celui qui s'avère généralement être le meilleur, car il permet de réduire considérablement la taille des fichiers et de personnaliser les niveaux de compression pour répondre à vos besoins.

Convertir des gifs lourds en d'autres formats vidéo

Le deuxième point est confié à Houssein Djirdeh, un autre membre de l'équipe Google, qui nous offre quelques conseils techniques sur l'insertion d'animations sur la page : pour rendre le chargement plus rapide, dit-il, mieux vaut utiliser des vidéos plutôt que des gifs. Les raisons sont nombreuses, à commencer par le fait que les gifs animés peuvent avoir des poids vraiment énormes. Djirdeh nous rassure cependant : la conversion de gros GIF en vidéo est un processus qui nécessite un travail relativement rapide , qui offre cependant d'excellents résultats en termes d'économie de bande passante pour les utilisateurs. Dans ce cas également, la première étape consiste à vérifier Lighthouse pour la présence effective de gifs pouvant être convertis, tandis que le logiciel suggéré pour effectuer l'opération est FFmpeg, qui transforme l'animation en une vidéo MP4 ou WebM (non pris en charge par tous navigateurs). Le gain entre le poids d'un gif et d'une vidéo est évident : dans l'exemple fourni, la taille de l'animation initiale passe de 3,7 Mo à 551 Ko pour la version MP4, jusqu'à 341 Ko pour la version WebM. Grâce à certaines commandes et éléments (comme <video>) vous pouvez définir des vidéos qui ont les mêmes particularités que les gifs , et qui ont donc une lecture automatique, continuer en boucle (mais vous pouvez aussi décider de bloquer la lecture continue) et elles sont silencieux.

Utiliser les tailles paresseuses pour le chargement paresseux des images

Katie Hempenius explique encore comment utiliser le lazyloading pour les images , c'est à dire le "slow load" qui permet de programmer le chargement des ressources sur page quand elles sont nécessaires, plutôt qu'à l'avance, et donc d'éviter d'avoir à attendre un chargement complet même de ressources inutiles. Les images qui sont hors écran lors du chargement initial de la page sont des candidats idéaux pour cette technique, et l'utilisation de lazysizes rend cette stratégie très facile à mettre en œuvre. Lazysizes, la bibliothèque principale pour ce faire, est un script qui charge intelligemment les images lorsque l'utilisateur se déplace dans la page et priorise les ressources que l'utilisateur rencontrera immédiatement. Il est considéré comme un bon choix car il est très performant pour détecter la visibilité des éléments de page.

Utilisez des images réactives

L'astuce suivante est facile à comprendre : c'est encore Hempenius qui souligne comment l'utilisation d' images réactives peut résoudre les problèmes de chargement lent, car "la publication d'images de la taille d'un ordinateur sur des appareils mobiles peut utiliser 2 à 4 fois plus de données que nécessaire", tandis qu'un Une approche différente du contenu multimédia – allant au-delà du site réactif général – vous permet de diffuser des images de différentes tailles sur différents appareils . En plus de recommander quelques outils pour effectuer l'opération ( package sharp npm et outil ImageMagick CLI , mais aussi Thumbor et Cloudinary ), l'expert Googler répond également à une question fréquemment posée : " Combien de versions d'image dois-je créer " ? Bien sûr, il n'y a pas de réponse unique ou correcte, mais "il est courant de servir 3 à 5 tailles différentes d'une image. Servir plus de tailles d'image est meilleur pour les performances, mais cela prendra plus d'espace sur vos serveurs et nécessitera un peu d'écriture . de HTML plus ».

Attributs des images

Il est également important de savoir quels attributs de la balise <img> utiliser pour obtenir le résultat souhaité :

srcset - est une liste de noms de fichiers d'image séparés par des virgules et leurs descripteurs de largeur ou de densité ; le descripteur de largeur empêche le navigateur de télécharger l'image pour déterminer sa taille.
tailles - l'attribut size indique au navigateur la largeur de l'image lorsqu'elle sera affichée, mais n'a aucun effet sur la taille d'affichage (a toujours besoin de CSS). Pour déterminer quelle image charger, le navigateur utilise ces informations, ainsi que ce qu'il connaît de l'appareil de l'utilisateur, à savoir les dimensions et la densité de pixels . Toutes choses étant égales par ailleurs, un écran à haute densité de pixels apparaîtra plus net qu'un écran à faible densité de pixels. Par conséquent, plusieurs versions doivent être utilisées si nous voulons fournir aux utilisateurs des images aussi nettes que possible, quels que soient les pixels de l' appareil .
src - l'attribut src fait fonctionner ce code pour les navigateurs qui ne prennent pas en charge les attributs ci-dessus, permettant le chargement de la ressource spécifiée par l'attribut src.

Veuillez fournir des images de taille correcte

On continue avec des conseils très pratiques, en partant d'un oubli assez fréquent : ne redimensionnez pas une image avant de l'ajouter à la page, ce qui gaspille donc les données de l'utilisateur et nuit aux performances de la page. Katie Hempenius suggère toujours de vérifier Lighthouse pour identifier les images qui ne sont pas à la bonne taille , mais elle précise également comment déterminer les bonnes mesures. Selon Googler, ce sujet peut être « trompeusement compliqué » et il existe deux approches, une bonne et une meilleure : les deux utilisent des unités CSS et permettent d'améliorer les performances, mais cette dernière nécessite plus d'efforts et de temps pour comprendre et mettre en œuvre, en raison toujours avec de meilleurs résultats.

La bonne approche est basée sur des unités relatives et absolues : les premières vous permettent de redimensionner l'image à une taille qui fonctionne sur tous les appareils, tandis que les secondes indiquent une correspondance précise avec les mesures d'affichage. Le panneau DevTools Elements peut être utilisé pour déterminer la taille à laquelle une image est affichée.
La meilleure approche est plus longue : définissez d'abord des unités absolues avec les attributs d'image srcset et tailles, puis des unités relatives à l'aide d'images réactives. Le point de départ est toujours qu'une image qui fonctionne sur tous les appareils sera inutilement grande sur des appareils plus petits, et vous pouvez donc définir des dimensions plus adaptées à divers appareils.

Il existe également des outils qui peuvent prendre en charge ce travail, comme ImageMagick pour redimensionner les images jusqu'à 25% de l'original et les mettre à l'échelle pour s'adapter à "200px de large sur 100px de haut".

Profitez du format WebP

La sixième suggestion est encore plus immédiate, c'est-à-dire d'utiliser le format de fichier WebP au lieu des autres types. Les raisons sont évidentes : les images WebP sont plus petites que leurs homologues JPEG et PNG, ce qui entraîne une réduction moyenne de 25 à 35 % de la taille du fichier, ce qui affecte donc la taille de la page et améliore les performances . Même deux géants comme YouTube et Facebook utilisent ces fichiers : sur YouTube, le passage aux aperçus WebP a généré un chargement des pages 10 % plus rapide ; En passant au nouveau format, Facebook a réalisé une économie de 25 à 35 % sur la taille des fichiers JPEG et de 80 % sur les fichiers PNG.

Utiliser les CDN d'images pour optimiser les ressources

Le dernier conseil de Katie Hempenius concerne les CDN d'images (Image content delivery networks), les réseaux de distribution d'images qui, selon Googler, sont excellents pour l'optimisation car ils permettent un gain de 40/80% sur la taille des fichiers. Les CDN sont des systèmes spécialisés dans la transformation, l'optimisation et la diffusion d'images . Pour les images téléchargées par leur intermédiaire, l'URL de la ressource indique non seulement quelle image télécharger, mais également des paramètres tels que la taille, le format et la qualité, ce qui facilite la création de variations d'une image pour différents cas d'utilisation. Ils diffèrent des scripts d'optimisation d'image au moment de la génération car ils créent de nouvelles versions d'images selon les besoins et sont donc généralement mieux adaptés à la création d'images hautement personnalisées pour chaque client individuel que les scripts de génération.

Comment choisir un CDN d'images

Il existe de nombreuses bonnes options de CDN d'images - certains fournisseurs ont plus de fonctionnalités que d'autres, mais ils vous permettent probablement tous d'économiser des octets sur les images et donc de charger vos pages plus rapidement. Outre les ensembles de fonctionnalités, d'autres facteurs à prendre en compte lors du choix d'un réseau sont le coût, l'assistance, la documentation et la facilité d'installation ou de migration.