Pourquoi et comment optimiser les images pour le web ?
Les images ne cessent de gagner en importance au fil des ans sur le Web. S'il n’est pas rare qu’elles soient préférées à des paragraphes de texte par les internautes, elles sont aussi bien souvent responsables des mauvaises performances (en moyenne 64% du poids d’un site web correspond à des images, selon http archive). Au-delà de la nécessité d’optimiser les images, se pose aussi la question de la faisabilité et des outils qui permettent ces optimisations.
Optimisation des images : en quoi ça consiste ?
L’ "optimisation" d’une image peut désigner :
- L’optimisation sous l’angle de la performance : lorsque l’on choisit des dimensions, une résolution et un format adapté pour ne pas impacter négativement les performances de chargement d’une page web (pour ne pas « alourdir » la page).
- L’optimisation sémantique : lorsque l’on associe à une image un texte alternatif (via l’attribut ALT) pour la rendre lisible par les personnes déficientes visuelles et les moteurs de recherche.
C’est bien l’enjeu de la performance dont il est question ici.
Pourquoi faut-il optimiser ses images ?
Les bénéfices liés à l’optimisation des images concernent avant tout l’expérience utilisateur. Des images peu, voir non-optimisées peuvent considérablement ralentir le temps de chargement et détériorer le processus d’affichage des pages web.
Puisque le processus de chargement a un impact considérable sur l’expérience utilisateur, les moteurs de recherche (et notamment Google) en ont fait un critère de positionnement. Récemment, Google a d'ailleurs renforcé la nécessité de prendre en compte la performance dans ses optimisations en ajoutant les indicateurs Core Web Vitals à ses critères de classement.
Si de mauvaises performances affectent l’expérience de vos utilisateurs, ce sont également votre taux de conversion et l’engagement de vos utilisateurs qui seront directement impactés.
L'optimisation et la compression des fichiers images vous permettra d'obtenir de meilleures notes dans les outils de Google qui mesurent le temps de chargement des pages des sites web.
Comment optimiser une image ?
Choisir le bon format de vos images
Utiliser un format de fichier adapté est la première étape indispensable pour avoir une image optimisée. Les formats JPG (pour les images riches en couleurs qui nécessitent une compression avancée) et PNG (pour la gestion de la transparence sur des images simples) seront les plus souvent utilisés. D’autres formats plus modernes comme le WebP existent mais ne sont pas encore parfaitement supportés par l’ensemble des navigateurs.
Dimensionner correctement les images
Les dimensions des images intégrées doivent être cohérentes par rapport à leur taille d’affichage dans la page. Sans quoi les navigateurs devront redimensionner eux même les images pendant le chargement.
Exemple : importer une image jpeg, png, gif qui mesure 1360 px de largeur et 908 px de hauteur n’est pas utile si son affichage réel dans la page n'est que de 680 x 454 px.
Utiliser la compression
Réduire la densité de pixels des images permet de limiter leur poids de manière significative. Un équilibre doit cependant être trouvé dans le dosage de la compression : afin que les fichiers soient assez réduits sans que le rendu de l'image ne s'en retrouve trop dégradé.
Les outils d'optimisation pour les images
Les outils en ligne
Beaucoup d’outils en ligne existent et permettent de réaliser des optimisations sur les images sans avoir à télécharger de programme.
Parmi eux :
- https://imagecompressor.com/fr/ qui permet de compresser jusqu’à 20 images en même temps, tout en conservant une qualité d’affichage correcte.
- https://bulkresizephotos.com/fr qui permet de redimensionner plusieurs images à la volée, en indiquant des dimensions à respecter ou en définissant un pourcentage de réduction d’échelle.
- https://www.iloveimg.com/ qui permet à la fois de convertir, redimensionner, et compresser ses images.
Les plugins et autres outils CMS
Avec les CMS, et notamment Wordpress, plusieurs solutions existent et permettent de réaliser des optimisations sur l’ensemble de vos images gif, png, jpeg. Soit rétroactivement sur des images déjà importées et utilisées sur votre site, soit automatiquement au moment de l’importation.
Cela permet de gagner du temps car beaucoup d’optimisations n’ont plus à être réalisées à la main. Ces outils ne se suffisent pas pour autant à eux-mêmes, réaliser un minimum d’optimisations sur les médias avant l’importation est toujours nécessaire. Cela préservera (entre autres) l’espace disponible sur le serveur, les outils conservant bien souvent les versions initiales des fichiers optimisés.
