Optimiser le chargement des images sur internet
- Episode N° 7
- Difficulté intermédiaire
- Publié le 25/04/2020 par Ronan HELLO
- Dernière mise à jour le 21/12/2023
L’optimisation des images est un sujet extrêmement important lorsque vous être créateur de site web. L’optimisation de vos images va énormément influencer le temps de chargement des pages de votre site, et donc sur l'expérience utilisateur que vous offrez à vos visiteurs. Je vous liste ici quelles sont les bonnes pratiques en termes d’optimisation d’images.
Choisir le bon format
Vous le savez surement déjà, mais une piqûre de rappel ne fait pas de mal, il existe plusieurs formats d’images. Ces différents formats sont là pour subvenir aux différents besoins. Pour le web, nous allons nous intéresser qu'à certains d’entre eux.
Pour des photos de photographe, ou prise avec un téléphone par exemple, il faudra favoriser le format JPEG, qui vous permettra d’avoir un fichier plus léger tout en conservant une bonne qualité d’image.
Pour des images avec des aplats de couleurs ou de la transparence (donc pas des photos, plutôt des dessins ou croquis), il faudra privilégier le format PNG. Ce format permet d’avoir également des images relativement légère et conserve la qualité lors de la compression.
Pour tout ce qui va être icones, logotype et dessins numériques, je vous recommande d’utiliser le format SVG, il a la grande particularité d’être toujours en haute définition quel que soit l’appareil et la résolution avec laquelle vous visualisez l’image. Pour comprendre pourquoi, il faut savoir qu’une image au format SVG n’est rien d’autre que du code permettant de créer une image à partir de vecteurs, et est donc d’une qualité infinie. C’est également pour cette raison que le format ne se prête absolument pas aux photos classiques, mais plutôt aux logos et pictos.
Si vous souhaitez afficher une image animé, vous pouvez bien évidemment utiliser le format GIF, attention en revanche, le plus souvent, une vidéo MP4 bien optimisée sera plus fluide et de bien meilleure qualité qu’une image animée au format GIF, donc à utiliser avec parcimonie.
Il existe de nouveaux formats d’images beaucoup plus performants que ceux cité plus haut. Par exemple le format WebP, qui serait 30 à 80% plus léger qu'une image PNG ou JPG classique. L’usage de ce format n’est pas forcément évident car il est encore très rare aujourd'hui d’avoir des images WebP sur son ordinateur.
Heureusement, il existe des outils qui s’occupent de tout ça pour vous. Aujourd’hui, je travaille avec les formats cités plus haut, et j’utilise un outil qui s’occupe de remplacer toutes mes images JPG et PNG par des WebP automatiquement. Si vous regardez comment ce site est construit, vous verrez des images WebP, pourtant, tout ce cours a été uploadé avec des images JPG et PNG ! (La magie du dev !).
Choisir la bonne taille
Après avoir bien compris qu’il fallait choisir un format adéquat afin de favoriser le chargement de votre page, il faut également s’occuper de la taille générale de l’image (et là je parle de pixels et non d’octets).
Si vous savez qu’une image ne doit occuper qu’une petite partie de l’écran, il est inutile d’uploader une photo 4K. Par exemple, nombre sont les sites ou on peut voir des pages listant les membres d’une entreprise avec des photos 4K pour chaque employé, alors que la photo n'occupe qu’un carré de 200px par 200px sur la page. Vous imaginez le gain en termes de vitesse de chargement une fois ces images redimensionnées ?
Pour redimensionner vos images, je vous conseille également d’utiliser Photoshop ou tout autre outils de traitements d’images. Il existe également des services en ligne, mais je vous recommande de le faire vous-même avec des logiciels adaptés, c’est une compétence en plus à apprendre.
Compresser les images
Les images sont un facteur important dans le temps de chargement d’une page sur internet. Une bonne pratique consiste donc à compresser l’ensemble des images du site afin de ne pas pénaliser le temps de chargement d’une page.
Pour compresser les images d’un site, il existe plusieurs manières de faire les choses. Vous pouvez utiliser un logiciel de traitement d’image comme Photoshop ou PhotoFiltre, ou alors, vous pouvez utiliser des services tiers, comme par exemple TinyPNG (que j’utilise régulièrement). Avec ce dernier, vous n’avez qu'à uploader les quelques photos à compresser dans l’interface du site, et à retélécharger les mêmes images en version compressées. L’outil est gratuit pour des images de moins de 5 mo et moins de 20 images uploadées en même temps.
Je vous recommande très fortement de ne pas mettre de site en ligne tant que les images ne sont pas compressées. Ou si le site est déjà en ligne, de compresser les images au plus vite afin d'en favoriser l'expérience utilisateur et le temps chargement des pages (c’est également un bon point pour votre référencement naturel).
Charger les images au bon moment
Maintenant que vos images sont correctement formatées, dimensionnées et compressées quoi de mieux que de les faire apparaître uniquement lorsque nous avons besoin de les afficher ?
Ce procédé s’appelle le “lazy loading”, il permet de charger les images uniquement si l’utilisateur s'apprête à la regarder. Pour faire simple, si vous avez un carrousel de 10 photos, il est inutile de charger les 10 photos directement, pourquoi ne pas charger les photos une par une, juste avant que ce dernier ne les affiches !
Le lazy loading peut également s’avérer très utile si vous avez beaucoup d’images sous la ligne de flottaison (si vous devez scroller sur votre page). Les images ne se chargent que si l’utilisateur commence à scroller.
Pour mettre en place simplement ce genre de procédé, il existe un attribut loading qui prend plusieurs valeurs. Il suffira alors d’ajouter l’attribut à son image en y renseignant le mot clé lazy:
<img src="images/chaton.webp" alt="Un chaton" loading="lazy" width="400" height="300">
Pour que le lazy loading fonctionne correctement, vous devrez également ajouter les dimensions de l’image directement sur la balise à l’aide des attributs width et height.
Cet attribut est relativement récent (pris en charge par Chrome et Firefox en 2020), il y’a d’autres moyens un peu plus complexes à mettre en place, mais qui fonctionnent sur tous les navigateurs. Malheureusement, cette partie revient au langage JavaScript et nous n'aborderons pas son fonctionnement et sa mise en place dans cette formation.
Vous devez être connecté pour pouvoir commenter. Se connecter
Top, merci ?