➡️ Grosse promo en cours sur ma plateforme SEO ⬅️

Sur My Ranking Metrics, on double les crédits que vous achetez !

🎁 Offre limitée au 15/11 à découvrir ici

erreurs images
Portrait Olivier Duffez

Olivier Duffez

Créateur de WebRankInfo,
consultant en référencement

Optimisation des images dans un site : retours d’expérience

D’après de nombreux retours d’expérience que j’ai pu avoir, la majorité des SEO et éditeurs de sites pensent que les images sont bien optimisées. C’est pourtant rarement le cas, surtout en ecommerce. Voici les erreurs importantes que vous devez éviter…

Optimiser une image dans une page HTML, vous savez sûrement le faire (sinon lisez mon tuto).

Mais comment s’assurer que toutes les images incluses dans toutes les pages du site sont parfaites ? Qu’il n’y a pas d’images cassées, ultra grandes ou bien trop lourdes ?

Maintenant que mon outil RM Tech inclut l’analyse des images à l’échelle de tout un site, j’ai pu échanger avec quelques dizaines des clients qui l’ont testé sur leurs sites ou ceux de leurs clients.

Voici une sélection de leurs retours d’expérience : j’indique ici ceux qui sont les plus représentatifs du panel global.

A vous de voir si votre site est concerné !

Erreur n°1 images qui dégradent la vitesse

C’est clairement le problème principal : certaines images mettent trop de temps à s’afficher, ce qui ralentit l’ensemble du chargement de la page.

Par exemple, un site ecommerce avait sur environ ~15% de ses fiches produits des photos sans aucun travail de compression. Comme les images étaient assez grandes, ça se ressentait sur le temps de téléchargement des fichiers images. Le client ne s’en était pas rendu compte car avec le nombre de produits (~1600), il « ne pouvait pas tout tester ».

La solution était assez simple : redimensionner les images trop grandes, puis passer toutes les images dans un outil de compression. Il « suffit » de bien identifier les images fautives…

L’annexe RM Tech qui lui liste les images « fautives » lui a permis selon ses termes de « repérer immédiatement les mauvaises images » et de « prioriser le travail de redimensionnement et compression ».

Voici la répartition des images selon leur poids, avant et après l’audit (et l’optimisation des images trop lourdes trouvées par RM Tech) :

poids images avant apres
Répartition des images du site selon leur poids, avec et après l’audit et l’optimisation des images repérées trop lourdes

Autre exemple typique : un site éditorial (type magazine) qui prend soin de toutes les images incluses dans les articles. « Toutes », c’est la théorie. Car parfois on trouve une image de 4000×3000 pixels de 14Mo qui n’aurait clairement pas dû être là. Surtout quand par malheur elle se trouve dans une des 10 pages les plus consultées. C’est le coup de l’aiguille dans une botte de foin : impossible à trouver à la main, mais ça peut fortement nuire à l’expérience utilisateur.

Là aussi c’est très simple à corriger. Bien plus qu’à détecter…

💡 Au passage, le saviez-vous ? Le temps de téléchargement indiqué dans l’ancienne Search Console concerne tous les documents crawlés par Google. C’est donc un joli mélange des pages HTML mais aussi des CSS, des PDF et autres images. Si vous n’arrivez pas à faire baisser le temps malgré de gros efforts, vérifiez si vos images se téléchargent rapidement.

👉 Voici l’exemple d’un client de site ecommerce qui a découvert « 3 tonnes » d’images bien trop grandes et lourdes. Son site reste encore trop lent, mais après correction, il a pu constater la baisse dans ce graphique fourni par Google Search Console. Au passage, il a gagné 12% de taux de conversion en août (par rapport à l’année d’avant), en bonne partie grâce à un affichage plus fluide de ses fiches produits.

temps téléchargement optimisation images
Le temps de téléchargement moyen des documents crawlés par Google a chuté depuis l’optimisation des images repérées avec RM Tech

Erreur n°2 grandes images pour des vignettes

Voici un cas classique des pages listings, aussi bien chez des Prestashop et autres catégories de produits ecommerce que chez des sites WordPress.

images vignettes listing
Attention aux images utilisées pour les vignettes dans les listings

Le problème vient du thème qui n’a pas prévu de créer des vignettes (image de taille réduite obtenue à partir de l’image de référence d’un article ou d’un produit).

Résultat : on se retrouve avec 20 à 50 images à charger dans la page, parfois toutes aussi lourdes que si elles prenaient toute la largeur de la page. Même avec du lazyloading c’est une catastrophe.

Pour les repérer, il faut comparer les tailles imposées dans les attributs de la balise IMG en HTML (ou après le rendu mais c’est plus complexe) à celles du fichier image.

C’est ce que fait RM Tech, en allant même jusqu’à calculer le ratio du nombre de pixels. Voici 2 exemples pris dans les annexes de l’audit :

images vignettes trop lourdes
Le ratio permet de trier pour repérer les images affichées bien + petites que leur taille réelle
images vignettes zoomées
Ces images sont artificiellement zoomées, avec un risque de pixellisation

Erreur n°3 images externes en HTTP

Vous avez passé votre site en HTTPS, bravo. Vous avez pensé à basculer vers HTTPS toutes vos URL de pages, vos scripts CSS et JS, et même vos images : encore bravo.

Mais ce qui arrive assez souvent d’après ces retours d’expérience, c’est d’oublier que vous utilisez parfois des images hébergées sur d’autres sites. Si elles sont en HTTP, alors le navigateur de l’internaute se fait un malin plaisir de l’effrayer avec des cadenas cassés et autres codes couleur rouge.

Et paf ! Vous voilà avec les fameux mixed content / insecured content

Image HTTP dans page HTTPS
Avertissement du navigateur (ici Firefox) quand une page en HTTPS contient une image en HTTP

Erreur n°4 pages trop lourdes avec trop d’images

Voilà un cas également assez fréquent : vous réfléchissez surtout image par image. Chacune est correcte, pas trop grande, pas trop lourde, bien compressée. Cool !

Mais combien mettez-vous d’images par page ? S’il y en a trop, ça finit par surcharger l’ensemble… OK, le lazy loading fait des merveilles, mais il y a des limites malgré tout…

Remarque : il existe d’autres problèmes avec les images, que je décris ici : comment identifier les problèmes avec les images sur l’ensemble d’un site.

Cet article vous a-t-il plu ?

Note : 4.6 (5 votes)
Cliquez pour voter !

Laisser un commentaire

Remarques :

  • Si vous souhaitez poser une question ou détailler un problème technique, il ne faut pas utiliser le formulaire ci-dessous qui est réservé aux avis. Posez votre question directement dans le forum Gmail de WebRankInfo. L'inscription est gratuite et immédiate.

  • En postant un avis, vous acceptez les CGU du site WebRankInfo. Si votre avis ne respecte pas ces règles, il pourra être refusé. Si vous indiquez votre adresse email, vous serez informé dès que votre avis aura été validé (ou refusé...) ; votre adresse ne sera pas utilisée pour vous envoyer des mailings et ne sera pas revendue ou cédée à des tiers.

5 commentaires

Christophe

bonjour,

Pour les vignettes et la remarque sur la taille de l’image qui doit correspondre à la taille de l’affichage, il faut faire attention car certains ecrans de qualité (type retina ou autres) provoquent des impressions de flous sur certaines de ces images, et dans ce cas il faut prévoir une image un peu plus grosse (2 ou 3 fois en taille), la différence en poids pour des vignettes reste acceptable.

Répondre
Laurent

Bonjour,

En inspectant avec la console de Chrome les images sur un de mes sites, je me suis rendu compte que les images étaient hébergées sur Amazon CloudFront (leur url est du type https://un-id.cloudfront.net/images/nom-image.jpg). Vous me confirmez que mon site ne pourra jamais ressortir dans le bloc « images » qui apparaît dans les SERPs sur certaines requêtes parce que les images ne sont pas hébergées sur mon serveur

Répondre
Olivier Duffez

Sont-elles autorisées au crawl (et à l’indexation) ? si oui, ce n’est pas forcément bloquant, même si c’est mieux de les avoir sur son propre nom de domaine.

Répondre
azemard stephanie

Bonjour J’ ai une question,j’ai vu sur une vidéo (https://www.youtube.com/watch?v=DQMdorJPOJA&t=9s) ou la personne disais qu’il fallait avec Photoshop enregistrer l’image sous plusieurs format en fonction des appareil que les gens vont utiliser, si il a raison cela veux dire que l’on doit mettre sur son site web 6 photo de taille différente pour une seul image, et sur une autre vidéo (https://www.youtube.com/watch?v=-xL_9TGyo4A) la personne disais qu’il fallait utiliser retina sous Photoshop par rapport au nouveau écran rétine qui double les pixel sinon on a des photo flou,….alors voila ma question et quel et le vrai système qu’il faut employé pour redimensionner correctement une image pour quel soie net en fonction des utilisateur et en fonction de se que l’on veux montrer sur son site exemple moi je suis photographe je veux des belle image qui représente mon travail mais sans me pénaliser sur le web merci beaucoup

Répondre
Olivier Duffez

Des CMS comme WordPress gèrent déjà un système qui fait qu’en uploadant une (grosse) image, plusieurs versions sont automatiquement créées (de plusieurs tailles). Elle sont déclarées dans le code HTML en front avec l’attribut srcset de la balise img afin que le navigateur utilise la version la plus adaptée à la situation.

Répondre