Formation HTML

Optimiser le chargement des images sur internet

  • Episode N° 7
  • Difficulté intermédiaire
  • Publié le 25/04/2020 par
  • Dernière mise à jour le 29/09/2024
Retour à la formation HTML

L’optimisation des images est un sujet extrêmement important lorsque vous êtes 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ères et conserve la qualité lors de la compression.

Pour tout ce qui va être icônes, 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 quels que soient 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 par ailleurs 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ée, 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és 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 aussi d’utiliser Photoshop ou tout autre outils de traitements d’images. Il existe aussi 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, 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 à télécharger les mêmes images en version compressées. L’outil est gratuit pour des images de moins de 5mo 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 seulement 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 affiche !

Le lazy loading peut par ailleurs 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.

Allez, ne t'arrête pas maintenant !
Épisode suivant
Épisode précédent
Commentaires

Vous devez être connecté pour pouvoir commenter. Se connecter

  • Publié par Elkanf

    Top, merci ?

Vous cherchez un formateur HTML pour votre école ou entreprise ?

J'enseigne le HTML depuis 2016 dans des écoles du supérieur, donc si vous recherchez un intervenant/formateur qualifié, n'hésitez pas à me contacter 🤓

Je me laisse tenter
Continuer la série