9 astuces pour optimiser les images de son site Internet

9 astuces pour optimiser les images de son site Internet


Que vous gériez un site vitrine, un blog mais surtout un site e-commerce, l'optimisation de vos images pour le web est un art dans lequel vous devez passer maître. Non seulement vous pourriez y gagner en positions sur Google, mais également en conversion auprès de vos visiteurs.

Voici quelques bons conseils pour optimiser vos fichiers image pour Internet, mises en lumière par Shopify.

1 - Choisissez bien le nom de vos images

Vous conservez le nom par défaut du fichier lorsque vous téléchargez des images sur votre site Internet ? Grossière erreur !

Saviez-vous que les robots des moteurs de recherche prennent en compte non seulement votre contenu texte mais également le titre de vos images lorsqu'ils parcourent votre site Internet ? Un véritable manque à gagner en termes de SEO. De ce fait, il est important d'optimiser vos fichiers image pour le référencement naturel en incluant des mots clefs pertinents dans leur nom.

Lorsque vous devez trouver un nom à vos images, il est important d'être descriptif et d'y inclure les bons mots clefs, ceux que les internautes taperont dans Google pour rechercher votre page. Interrogez-vous également sur les questions de terminologie et de formulation ; pour vous y aider, vous pourrez trouver des données intéressantes dans les  analytics de votre site web.

2 - Ne négligez pas la balise \"alt\"

La balise alt est utilisée dans le code source pour insérer une description à une image, de la manière suivante : <img src=\"nom-du-fichier.jpg\" alt=\"description de l'image\">.

La balise alt apparaît lorsque le navigateur n'arrive pas à afficher correctement une image. Elle est importante en termes d'accessibilité web et de SEO car Google la prend en compte dans ses critères de référencement. Il serait donc dommage de la négliger.

Voici quelques conseils pour bien la remplir :

  • Décrivez vos images dans un français clair.
  • Si vous avez un site e-commerce et que vos produits ont un numéro de série ou un nom de modèle, utilisez-le dans l'attribut alt des photos produit de l'objet en question.
  • Utilisez des mots clefs mais n'enchaînez pas les mots clefs de la manière suivante : alt=\"maquillage rouge à lèvres L'Oréal pas cher acheter réduction\".
  • Ne remplissez pas les balises alt pour les images simplement décoratives (bordures, fonds, trames...). Google pourrait vous pénaliser pour une optimisation excessive pour le SEO.

3 - Soyez intelligent dans le choix des dimensions et angles de vos photos produit

Si vous opérez un site e-commerce, il est logique de publier plusieurs photos de vos produits pour inciter les prospects à l'achat. Les internautes s'attendent à voir au minimum les angles suivants d'un produit avant de se décider à acheter : l'avant, l'arrière, l'intérieur, des gros plans pour mieux voir les détails.

Pour chacun de ces angles, il est important de veiller à nommer en conséquence la balise alt afin de refléter correctement l'angle en question.

En ce qui concerne la taille de vos images, en termes d'expérience utilisateur, il est déconseillé de mettre une grande image sur votre page et de la redimensionner via le code source. Cela augmentera le temps de chargement de votre page, quoi qu'il arrive. La bonne démarche est de publier une petite image et de proposer de voir une autre image (plus grande) via un pop up ou une page web séparée.

4 - Réduisez la taille de vos fichiers image

Les internautes ne sont pas patients. Beaucoup d'images non optimisées résulteront en des pages très lourdes à charger, ce qui réduira comme neige au soleil votre taux de conversion. De plus, Google prend en compte les temps de chargement des pages dans ses critères de référencement naturel. Une double pénalité en somme !

Il est donc essentiel de réduire la taille de vos images, sans pour autant faire fi de la qualité. La solution de facilité est d'utiliser l'option \"Enregistrer pour le web\" dans Adobe Photoshop pour trouver le parfait équilibre entre ces deux données.

Vous n'avez pas Photoshop ou de logiciel de traitement d'images sous la main ? Pas de problème ! Vous pouvez recourir à des outils en ligne comme PicMonkey, Pixlr et FotoFlexer.

5 - Quel format d'image pour quelle occasion ?

Il n'est pas toujours évident de savoir quel format choisir entre le JPEG, le GIF et les PNG, qui sont les 3 formats les plus utilisés. Shopify donne quelques conseils d'ordre général sur ce point :

  • Dans le cas d'un site e-commerce, privilégiez les images au format JPEG. Elles offrent la meilleure qualité d'image pour un fichier de petite taille.
  • N'utilisez jamais le format GIF pour de grandes images produit. La taille du fichier sera bien trop élevée, privilégiez le GIF pour les images purement décoratives et les miniatures.
  • Le PNG est une excellente alternative aux JPEGs et GIFs : il excelle pour les images décoratives (boutons, bordures, fonds...) en raison de sa très petite taille. Si vous devez enregistrer des images au format PNG, privilégiez le PNG-8 plutôt que le PNG-24.

6 - Optimisez vos miniatures

La plupart des sites e-commerce utilisent des miniatures pour faciliter la navigation et la recherche au sein d'une catégorie de produits donnée. Mal utilisées, ces miniatures peuvent s'avérer une catastrophe pour le chargement de vos pages. Quelques règles de bon sens s'appliquent :

  • Optimisez vos miniatures pour que la taille des fichiers soit aussi petite que possible et ainsi réduire les temps de chargement des pages.
  • Variez les descriptions des balises alt de vos miniatures pour ne pas qu'elles se dupliquent avec les balises alt de vos grandes images. Après tout, vous ne voudriez pas que la miniature soit indexée à la place de l'image en taille réelle.

7 - Utilisez des sitemaps pour images

Les robots de Google ne peuvent pas scanner les images qui ne sont pas appelées dans le code source des pages de votre site Internet. Si vous utilisez des galeries en Javascript ou des images en pop-up, vous devez indiquer la position de ces images aux moteurs de recherche avec un sitemap pour images.

Pour vous y aider, vous pouvez utiliser Google Webmaster Tools ou consulter ces deux ressources publiées par Google :

8 - Faites attention aux images décoratives

Les sites Internet disposent tous d'une panoplie d'images purement décoratives : images de fond, boutons, bordures. Tout ce qui n'est pas pertinent avec le contenu d'une page peut être considéré comme une image décorative. Bien que ces images améliorent grandement l'aspect esthétique d'un site, elles contribuent également à le ralentir.

Voici quelques conseils pour réduire la taille de vos images décoratives :

  • Pour les bordures ou les motifs simplistes, privilégiez les formats PNG-8 ou GIF. Vos images resteront de bonne qualité et pèseront très peu !
  • Quand cela est possible, utilisez le CSS autant que possible plutôt que des images, par exemple pour créer des zones de couleur.
  • Pour les images de fond de type papier peint, réduisez les au maximum tout en conservant une bonne qualité d'image.

9 - Test & learn

L'optimisation des images d'un site Internet n'est une science ni exacte ni figée. Si certaines astuces coulent de source, comme la réduction des temps de chargement et l'amélioration du SEO, il faut également se pencher sur d'autres considérations relative à l'optimisation de la conversion.

  • Testez quels types d'images convertissent le mieux pour votre business.
  • Testez les images sur lesquels les internautes cliquent le plus.
  • Testez les meilleurs endroits sur le site où disposer les images.

Pour les sites e-commerce :

  • Testez le nombre de photos des produits que vous devriez avoir par page.
  • Testez les angles que les clients préfèrent pour les photos produits.
  • Testez le nombre de produits que vous devriez avoir listés par page de catégorie : 10, 20, 100 ?

Les autres publications