Comment optimiser ses images pour le web en 3 étapes ?

Avec la multiplication des interfaces et des connexions internet, les performances d’un site web et le temps de chargement des pages deviennent des sujets de plus en plus importants. Qu’il s’agisse de l’amélioration de l’expérience utilisateur ou de l’optimisation de votre référencement naturel, la gestion de vos fichiers images est un levier à travailler rigoureusement. Nous allons répondre ensemble à la question que beaucoup de nos clients nous posent : comment optimiser ses images pour le web ?

Les efforts d’amélioration de vos images doivent se faire en parallèle sur deux axes : l’optimisation du poids de vos images et la pertinence des informations transmises aux robots des moteurs de recherche.

Image avant et après compression - la différence de qualité est difficilement remarquable

Les étapes permettant de réaliser ce double travail sont assez simples :

  1. Choisir le format adapté à vos besoins : JPEG pour les photos de bonne qualité, PNG pour répondre aux besoins de transparence ou GIF pour les animations.
  2. Optimiser le poids de vos images : redimensionner vos fichiers, exporter avec une configuration adaptée et compresser vos fichiers en ligne.
  3. Renseigner les informations textuelles : Renommer votre fichier avec un titre explicite et remplir les attributs « alt » et « title » avec des informations pertinentes.

Ces différents éléments sont interconnectés. Il est important de réfléchir à l’optimisation de vos images dans son ensemble et de mettre en place des processus et des méthodes qui harmoniseront les pratiques au sein de votre société.

Étape 1 : choisir un format optimisé pour le web

La première étape dans l’optimisation de vos images pour le web est le choix du format. Aujourd’hui, il existe principalement trois formats compatibles avec l’ensemble des navigateurs : JPEG, GIF et PNG. Un nouveau format, le WebP, a fait son apparition il y a quelques années, mais il n’est toujours pas supporté par Safari. Nous ne l’évoquerons donc que rapidement plus tard.

Exemple jpeg qualitéExemple de photo de très bonne qualité exportée en JPEG

Les différents formats présentent chacun des avantages et des inconvénients. Il faut savoir quel format choisir en fonction de nos besoins, de nos contraintes et du contexte.

Le format JPEG pour les photographies et images de grande qualité

Le format JPEG sera l’option la plus adaptée aux photographies et aux images composées d’une large palette de couleurs. En effet, un de ses principaux avantages est qu’il peut gérer plus de 16 millions de couleurs.

En contrepartie, ce format supporte assez mal la compression des images contenant des différences de contraste importantes entre pixels proches. Le niveau de compression devra donc s’adapter à chaque image sous peine d’avoir un rendu de mauvaise qualité, pixélisé et flou.

Ce format reste tout de même le plus répandu sur le web tant il permet d’obtenir des résultats de grande qualité en respectant un poids optimisé pour le web.

Le format PNG pour les besoins de transparence

Les fichiers PNG sont à favoriser pour apporter de la transparence aux images. Ce format est donc idéal pour tous les éléments nécessitant un jeu d’opacité ou un fond invisible comme les logos ou autres éléments de « décoration ».

Il existe deux types de PNG : PNG-8 et PNG-24. Le premier se composera d’une gamme de 256 couleurs alors que le deuxième permettra d’enregistrer des fichiers de plus de 16 millions de coloris.

On s’orientera donc vers le PNG-8 pour tous les éléments peu colorés. Si vous n’avez pas besoin d’animer votre visuel, le PNG-8 est à favoriser par rapport au GIF. Il permettra d’obtenir des fichiers bien plus légers. Bien que meilleur en matière de compression et de gestion du contraste entre pixels proches, le PNG-24 se rapproche plus de la qualité d’un JPEG tout en générant des fichiers 5 à 10 fois plus lourds. Si vous n’avez pas besoin de transparence, favorisez donc l’utilisation du JPEG pour vos éléments de grande qualité.

Le format GIF pour générer des animations

Le format GIF sera à prioriser pour les éléments nécessitant une animation ne pouvant pas être gérée en CSS3. En effet, le GIF est un format pouvant contenir plusieurs images dans un même fichier. Cependant, les fichiers ne supporteront que 256 couleurs et ne sont donc pas adaptés aux grandes qualités.

Il est possible de régler de nombreux paramètres pour optimiser la qualité et le poids de vos fichiers GIF. On notera ici le tramage, le nombre d’images, la gamme de couleurs utilisée, etc.

Les GIF sont donc à utiliser pour les fichiers animés de petite taille ne proposant pas une palette de couleurs trop importante. Pour tout autre besoin, le JPEG ou le PNG répondront surement mieux à vos attentes.

Le format WebP, la future norme ?

Le format WebP a été inventé par Google dans les années 2010 afin de devenir le nouveau standard des images web. Son principal avantage est qu’il permet de garder la qualité d’une image en réduisant son poids de 30 % ou plus.

Dans un monde où les performances web et les vitesses de chargement deviennent des enjeux stratégiques pour tous les sites internet, ce format est censé apporter une réelle évolution au web.

En plus de prendre en charge les images animées et la transparence, ce format propose deux types de conversion : la première avec perte réduira au maximum le poids des fichiers tandis que la deuxième sans perte permettra tout de même de réduire efficacement le poids de votre fichier sans en dégrader la qualité.

Avec tous ces avantages, pourquoi le WebP n’est-il pas déjà le format standard ? Pendant de longues années, les navigateurs ne supportaient pas le format WebP, ce qui le rendait inutilisable pour la plupart des internautes. Si Firefox, Edge et d’autres se sont mis au WebP il y a quelques années, le géant du numérique Apple et son navigateur Safari ne supportent toujours pas le WebP. Par volonté de bloquer la concurrence ? On vous laisse apporter vos propres conclusions. Toujours est-il que le projet ne sera pas considéré comme la nouvelle norme tant qu’il ne sera pas supporté par l’ensemble des navigateurs.

Étape 2 : optimiser le poids de vos images

Avec l’avènement de la navigation sur mobile, il est de plus en plus important d’optimiser la vitesse de chargement de votre site. On constate fréquemment que plus de la moitié du poids d’une page est liée aux images. Il est donc essentiel d’uploader des images correctement optimisées.

L'amélioration du poids d’une image se décompose en plusieurs étapes : les dimensions, l’export depuis votre logiciel de graphisme et la compression finale.

Mettre votre visuel aux bonnes dimensions

La première phase de l’optimisation du poids de votre fichier image est la vérification des dimensions et de la résolution. Lors des différents audits SEO réalisés, on constate assez souvent que certaines photos ont été uploadées en plus de 3000 px de large, avec une résolution trop importante et qu'elles dépassent le Mo. Il est évident que ce genre d’erreur entraine des chargements de pages beaucoup plus longs.

Chez idéveloppement, nous nous efforçons de redimensionner nos images en fonction du contexte dans lequel elles sont utilisées. Il est important de proposer une image permettant de profiter pleinement de la taille et de la qualité des interfaces de vos utilisateurs sans négliger son poids. Adaptez ces dimensions à votre site et pensez à toujours vérifier la qualité sur différentes tailles d’interface (du mobile à l’écran 30").

Vous pourrez toujours redimensionner votre image directement sur votre site en CSS, mais cela ne changera absolument pas son poids et la demande de ressources pour la télécharger. Pour favoriser une vitesse de chargement satisfaisante, nous recommandons vivement d’être au plus proche de la dimension souhaitée avant l’upload.

Exporter votre image pour le web

Photoshop, le logiciel de graphisme le plus utilisé au monde, propose une option très intéressante pour l’export de vos visuels : « Enregistrer pour le web ».

exporter pour le web photoshopFenêtre Photoshop - Enregistrer/exporter pour le web

Cette option permet de choisir le format, de redimensionner si ce n’était pas déjà fait avant (encadré rouge sur l'exemple) et de choisir un niveau de compression et de qualité de vos fichiers visuels (encadré jaune). Nous vous conseillons de jouer avec le curseur « Qualité » pour obtenir le meilleur ratio qualité/poids.

Au-delà de 75 de qualité, la différence est difficilement visible à l’œil nu pour une optimisation de poids très intéressante. Réalisez vos tests et validez un processus propre à votre site.

Si vous n’avez pas Photoshop, on vous donne une astuce qui vaut de l’or. Il existe un logiciel en ligne très proche de Photoshop et proposant sensiblement les mêmes fonctionnalités : Photopea.

Compresser votre image

Vous devez maintenant avoir un fichier optimisé et respectant certaines dimensions. Une dernière étape va permettre de réduire encore le poids de votre image sans dégrader la qualité. De nombreux outils gratuits d'optimisation de poids d’image existent sur internet. Nous avons pour habitude d’utiliser les très bons TinyJpg et TinyPng. Libre à vous de trouver l’outil qui correspondra à vos habitudes de travail.

Ces outils sont très simples d’utilisation : vous uploadez un fichier et validez. L’outil compresse alors automatiquement votre fichier et vous propose un lien de téléchargement. Dans la version payante, il est aussi possible de compresser des images par lots.

À ce niveau vous devriez avoir des images entièrement optimisées pour le web. Il n’y a pas de règles générales sur le poids d’une image. Habituellement, on dit que les images ne doivent pas dépasser 100 Ko. Cependant, une image de grande taille devra autant que possible être en dessous des 500 Ko quand une image de taille moyenne pourra potentiellement dépasser légèrement les 100 Ko.

Étape 3 : renseigner le nom du fichier, les attributs « alt » et « title »

En plus de renforcer les performances de votre site, l’optimisation de vos images peut aussi booster votre visibilité. En effet, le référencement d’image est une discipline qui prend de l’ampleur. La recherche par Google Images peut devenir un levier d’acquisition important pour votre société.

Pour se donner le maximum de chance de remonter parmi les premières positions de Google Images, il est essentiel de renseigner quelques informations pertinentes aux bons endroits. En effet, les robots du moteur de recherche ne sont toujours pas capables de comprendre ce que présente une image. Proposons-lui des informations dans un langage qu’il comprend et interprète correctement : le texte.

Attribut alt et title sur wordpressExemple de fenêtre d'upload d'image WordPress avec les champs « alt » et « title »

Renommer le fichier de base

La première phase est de renommer votre fichier image avant de l’uploader. Par exemple, votre photo de coucher de soleil en Corse se nommant « DSC_0001. JPG » devra être renommée « coucher-de-soleil-corse.jpg ». On apporte ici une première information définissant ce que l’image représente.

Attention à ne pas utiliser d’underscore « _ ». On lui préfèrera toujours le tiret classique « - ». En effet, Google n’interprète pas l’underscore et comprend « coucher_de_soleil_corse » comme « coucherdesoleilcorse ». De son côté, le tiret classique est compris comme une espace, cette même expression sera donc interprétée comme « couche de soleil corse ».

Renseigner les attributs « alt » et « title »

Il existe quelques autres critères importants pour optimiser le référencement de vos images. On s’intéresse généralement aux attributs « alt » et « title ».

Pour la petite histoire, l’attribut « alt », pour « alternative text », a été créé pour permettre aux malvoyants d’obtenir une retranscription vocale. Grâce à des logiciels d’accessibilité, appelés lecteurs d’écran par synthèse vocale, les personnes en situation de handicap visuel peuvent comprendre ce que représentent les images proposées sur un site internet.

Quant à lui, l’attribut title est comme son nom l’indique le titre que vous donnez à votre image. Il est moins indispensable que le « alt ». En effet, cet attribut est plus orienté utilisateur que SEO. Des tests ont montré qu'il peut avoir un léger impact sur le classement de vos images.

Ces deux éléments sont donc à renseigner avec une description pertinente de votre image. Ils permettront à Google et aux personnes en situation de handicap de mieux comprendre ce que représentent vos éléments visuels.

Et après ?

Pour optimiser les performances de votre site ou pour booster vos positions sur Google Images, il est essentiel de travailler les différents critères cités dans notre article.

Vous pouvez vérifier l’impact du poids de vos images sur les performances web de votre site. En effet, il existe quelques outils gratuits permettant de tester en direct un certain nombre d’éléments techniques. Les plus répandus sont GTmetrix et Dareboost.

Pensez à auditer régulièrement votre site, ou quelques pages ciblées, et à optimiser vos images si nécessaire.

Posté dans : Métier du web