Optimisation de site web #1 – les images

Le paysage du web est dépeint par une quantité astronomique de contenu divers. Textes, photos, vidéos, fichiers audio, etc… Tout est bon pour rendre sa plateforme la plus agréable et illustrative possible, mais cela n’est pas sans conséquence ! 

Plus une page contient ce genre de médias, plus cette dernière mettra du temps à charger. 

C’est pourquoi l’adoption d’une stratégie d’optimisation pour un site web est cruciale. Dans cet article dédié à cette thématique, nous allons couvrir l’optimisation des images.

Rien de plus frustrant que d’attendre que tout le contenu soit chargé avant de pouvoir consulter la page ! L’optimisation des images se traduit donc par les points suivants :

• Charger une image adaptée au type d’appareil (smartphone, tablette, ordinateur)
• Choisir le bon format pour son image (png, jpg, webp)
• Charger une image au bon moment (stratégie du lazy loading)

Charger une image adaptée au type d’appareil

Le poids d’une image est directement corrélé par sa taille. Sur la page d’un site web, il est fort probable qu’une image ne sera pas affichée de la même manière. Elle sera peut-être plus petite sur smartphone que sur ordinateur par exemple. Le but de cette optimisation est de délivrer une image correspondant le plus possible à sa taille (en pixel) rendue sur l’appareil avec lequel on navigue. Il faut donc créer plusieurs déclinaisons de l’image afin de gérer le plus de cas possible.

Cela parait anodin, mais nous ne jouissons pas tous de la même connexion internet ou de conditions de navigation adéquates (smartphone avec une faible connexion à la 4G). Intégrer cette stratégie améliorera grandement les performances du site web au profit de l’internaute.

Choisir le bon format pour son image

Choisir le bon format d’images à délivrer est tout aussi important. Les images ayant un fond transparent doivent être au format PNG. Ce dernier est sans perte mais ne bénéficie pas d’une grande marge de manœuvre d’optimisation pour diminuer son poids, hormis la taille. Utilisez donc le PNG uniquement lorsque vous disposez d’images où le fond doit être transparent.

Son cousin, le JPG, est un format taillé pour le web. Il ne gère pas les fonds transparents, mais possède une grande liberté d’optimisation. Il s’agit ici d’un format avec perte. On peut jouer sur sa taille, mais aussi sur le taux de compression pour diminuer le poids de l’image. Attention à ne pas être trop gourmand sur la compression, car le résultat risque d’être médiocre.

Un dernier format à ne certainement plus négliger est le webp. Développé par Google, ce format permet une réduction de poids considérable pour une même qualité d’image en PNG ou JPG. En plus de cet exploit, le webp supporte aussi les fonds transparents, ce qui fait de lui un format hybride parfait pour le web ! Néanmoins, le webp n’est pas compatible avec tous les navigateurs comme Safari sur Mac OS Catalina. Il faudra donc prévoir un format de substitution parmi le PNG ou le JPG pour ces navigateurs non compatibles.

Charger une image au bon moment

La dernière optimisation consiste en la stratégie du lazy loading. En résumé, l’idée est de charger une image uniquement lorsqu’elle doit être visible sur l’écran de l’internaute. De ce fait, la page consultée sera bien plus vite accessible, car seuls les éléments nécessaires à la première impression sur l’écran seront chargés. Les images suivantes seront chargées au fur et à mesure que l’utilisateur défile la page. Une aubaine donc !

Cet article vous à marqué ? N’hésitez pas à nous faire un retour via notre page contact.