Optimiser les images pour le web : WebP, taille et temps de chargement

Quand un site web charge lentement, dans la très grande majorité des cas ce sont les images les coupables. Une seule photo, fraîchement sortie de l'appareil ou du téléphone, peut peser plus lourd que tout le reste du contenu d'une page réuni. Et le sournois là-dedans : on ne le voit pas à l'image. À l'écran, elle paraît tout aussi belle, qu'elle fasse cinq mégaoctets ou cinquante kilooctets.

La bonne nouvelle, c'est que c'est précisément ici qu'on gagne le plus facilement en vitesse. Optimiser les images pour le web signifie au fond : réduire nettement le poids sans que personne ne voie de différence. Dans cet article, je vous montre ce qui compte, sans jargon et de manière à ce que vous puissiez le faire vous-même.

Pourquoi les images lourdes coûtent si cher

Chaque image qu'affiche votre page doit d'abord voyager par la ligne jusqu'au visiteur. Plus le fichier est lourd, plus cela prend de temps, surtout sur le mobile avec une réception moyenne, et c'est justement là que la plupart des gens regardent aujourd'hui votre page.

Si quelqu'un attend trop longtemps, il est parti avant même d'avoir vu ce que vous proposez. Les images lourdes coûtent donc non seulement du temps de chargement, mais de vrais clients. Et comme Google intègre la vitesse dans le classement, elles coûtent en plus de la visibilité.

La bonne taille : la moitié du secret

L'erreur la plus fréquente est étonnamment simple : les images sont téléversées dans une résolution bien plus grande que celle à laquelle elles seront jamais affichées. Une photo prise au téléphone fait souvent 4000 pixels de large. Sur votre site, elle apparaît peut-être en 800 pixels de large. Tout le reste, le visiteur le trimballe sans jamais rien en voir.

La solution est d'amener une image à la taille dont on a réellement besoin, avant de la téléverser. Quelques valeurs indicatives :

• Une grande image sur toute la largeur n'a que rarement besoin de plus de 1600 à 2000 pixels de large.
• Une image dans une colonne ou un bloc de texte se contente bien de 800 à 1000 pixels.
• Les petites vignettes d'aperçu n'ont souvent besoin que de 400 pixels ou moins.

À elle seule, cette étape, la réduction à la vraie taille d'affichage, retire déjà à beaucoup d'images la plus grande partie de leur poids.

WebP : le format moderne pour les images web

Pendant des années, JPG et PNG ont été les formats standard sur le web. Ils fonctionnent, mais ne sont plus le choix le plus efficace. Le WebP est un format plus récent, développé spécialement pour le web. Il fournit la même qualité d'image pour une taille de fichier nettement plus petite, souvent les images WebP sont 25 à 35 pour cent plus légères qu'un JPG comparable.

Le meilleur : tous les navigateurs actuels prennent en charge le WebP sans problème. Vous pouvez convertir un JPG ou un PNG en WebP et, dans la plupart des cas, économiser beaucoup de poids sans que l'œil remarque de différence. Il existe des outils en ligne gratuits pour cela, et beaucoup de logiciels de retouche exportent désormais directement en WebP.

Compresser sans perte de qualité visible

À l'enregistrement d'une image, on peut régler une valeur de qualité, le plus souvent en pourcentage. C'est là que réside un grand malentendu : beaucoup croient devoir enregistrer à 100 pour cent pour que ce soit beau. C'est faux. La différence entre 100 et environ 80 pour cent est pratiquement imperceptible à l'œil nu, mais l'image devient sensiblement plus légère.

Une bonne plage pour les photos se situe autour de 75 à 85 pour cent de qualité. Essayez : enregistrez la même image une fois en pleine qualité et une fois en qualité réduite, et comparez. Dans la très grande majorité des cas, vous ne voyez aucune différence, mais la taille du fichier a été divisée par deux ou plus.

Deux leviers qui aident encore

Deux autres choses apportent beaucoup sans grand effort :

• Lazy Loading (chargement différé) : les images situées plus bas sur la page n'ont pas besoin d'être chargées tout de suite, mais seulement lorsque le visiteur y fait défiler. Ainsi la partie visible de la page charge plus vite.
• Indiquer la hauteur et la largeur : lorsque le code précise quelle taille aura une image, le navigateur sait dès le début combien de place il doit réserver. Cela évite l'agaçant déplacement de la mise en page pendant le chargement.

Qu'est-ce que cela apporte concrètement ?

Prenons un exemple typique : une photo directement issue du téléphone, quatre mégaoctets. Réduite à la vraie taille d'affichage, convertie en WebP et compressée judicieusement, la même prise atterrit souvent entre 150 et 250 kilooctets, visuellement identique, mais environ vingt fois plus légère. Reportez cela sur une page comptant dix images, et vous comprenez pourquoi l'optimisation des images est le plus grand levier individuel pour le temps de chargement.

Optimiser les images pour le web n'est pas une science occulte. Avec la bonne taille, le format WebP et une compression raisonnable, vous en tirez le maximum, et vos visiteurs vous en remercient par plus de patience et plus de confiance.

Si vous voulez savoir quel gain de vitesse est possible sur votre page actuelle, je regarde cela volontiers. Contactez-moi simplement via le formulaire de contact, ou parcourez d'autres articles autour des sites web rapides et propres.