Optimisation des images pour des performances web : techniques et conseils

L'optimisation des images est un aspect crucial pour améliorer les performances d'un site web.

Que ce soit dans le cadre d'une démarche Green IT, pour améliorer l'expérience de vos utilisateurs, ou simplement optimiser votre référencement en soignant vos Core Web Vitals, la gestion des images a un impact direct sur la qualité de votre site.

Dans cet article, nous allons explorer différentes techniques d'optimisation des images pour garantir une expérience utilisateur fluide et agréable.

Attention : cet article n'a pas pour vocation d'être un guide exhaustif.

Je me concentrerai sur les optimisations les plus impactantes rencontrées au cours de mes expériences professionnelles. 😉

Dimensionner et compresser ses images

La compression des images est l'une des premières étapes de l'optimisation. Elle consiste à réduire la taille des fichiers sans compromettre la qualité visuelle.

Il existe des outils de compression en ligne, tels que TinyPNG et JPEGmini, qui permettent de réduire considérablement la taille des images sans perte visible de qualité. En compressant vos images, vous réduisez le temps de chargement de vos pages et économisez de la bande passante pour vos utilisateurs.

Privilégier les images vectorielles

Il existe deux grosses familles d'images.

• Matricielle : l'image est composée d'une grille de pixel, et des artefacts peuvent apparaître lorsqu'on modifie le facteur de zoom ou que l'on compresse l'image. C'est à cette catégorie qu'appartiennent nos bons vieux png et jpg.
• Vectorielle : l'image est définie par un ensemble de directives indiquant à votre navigateur comment la "dessiner". Généralement plus légères, elles présentent l'avantage de pouvoir être redimensionnées sans perte de qualité. Le plus souvent, on utilise du svg.

Pour des formes simples avec assez peu de texture, le format SVG est généralement la meilleure solution.

Toutefois, voici quelques éléments de vigilance :

• Sur de toutes petites images (type icône), les images matricielles peuvent parfois se révéler plus légères que les vectorielles.
• Les svg contiennent souvent des commentaires qui augmentent inutilement le poids des fichiers, pensez à les retirer et à minifier vos fichiers pour de meilleures performances !
• Certains logiciels proposent d'exporter des images matricielles complexes au format svg : la transformation n'apportera souvent aucun gain de performance.

Images adaptatives et srcset

Les appareils et écrans varient en termes de résolution, de taille et de densité de pixels. Par exemple, la zone
d'affichage pour une image sur un écran de bureau peut être de 512x512 pixels, tandis que sur un téléphone, elle sera
plus petite, disons 256x256 pixels.

Cette disparité justifie l'utilisation du srcset. Il permet de proposer différentes versions d'une même image,
adaptées à ces variations, afin d'optimiser l'affichage en fonction de chaque appareil.

Si vous souhaitez en savoir plus sur l'intérêt de mettre en place des images adaptatives via l'usage de srcset, vous pouvez consulter cet article explicatif.

Exemple de mise en place :

<img
        src="chemin/vers/mon/image-320w.jpg"
        srcset="
            chemin/vers/mon/image-320w.jpg 320w,
            chemin/vers/mon/image-640w.jpg 640w,
            chemin/vers/mon/image-1280w.jpg 1280w"
        sizes="
            (max-width: 320px) 280px,
            (max-width: 640px) 600px,
            1200px"
        alt="Ma superbe image"
>

Dans cette situation :

• src spécifie le chemin vers l'image de référence pour les navigateurs qui ne prennent pas en charge l'attribut "srcset".
• srcset contient une liste de chemins d'images accompagnés de leur largeur en pixels (w). En fonction de la résolution et de la largeur de l'écran, le navigateur choisira automatiquement l'image la plus optimisée. Si srcset n'est pas supporté par le navigateur 🦖, l'image affichée correspondra à celle du src.
• sizes détermine les dimensions souhaitées pour notre image en fonction de la largeur d'écran.

L'implémentation de cette solution implique que chaque image soit systématiquement générée en plusieurs tailles et résolutions en amont, ainsi que l'écriture
des règles de srcset sur chaque élément <img/>.

Formats Next-Gen

Tous les formats d'images ne se valent pas. En fonction du contexte, beaucoup de designeurs / dev semblent avoir
développé l'heuristique suivante concernant le choix des formats :

• PNG pour de la transparence
• JPEG pour des images sans transparence
• SVG pour des formes simples
• GIF pour des images animées
• etc

Eh bien, oubliez-tout, on peut faire mieux ! 😱

De nouveaux formats d'images existent permettant de répondre à ces critères avec de bien meilleurs taux de
compressions !

C'est le cas notamment des formats WebP ou AVIF.

L'ennui, c'est que, comme souvent sur le web, ces technologies ne sont pas supportées par tous les navigateurs. Il est
donc risqué de proposer ces seuls formats d'images.

Par chance, à chaque demande de téléchargement d'image, le navigateur envoi un header Accept dans la requête indiquant
la liste des formats d'images supportés par
celui-ci (doc).

En se basant sur cette valeur, on peut alors configurer son serveur pour renvoyer le meilleur format d'image disponible.

From scratch, l'implémentation de cette solution s'avère extrêmement contraignante : il faut générer chaque
format d'images et effectuer du développement supplémentaire côté serveur pour rendre ses images 🤯

Lazy-Loading

Charger toutes ses images d'une traite alors qu'elles ne seront pas toutes visibles : il s'agit d'une erreur courante qui ralentit inutilement le chargement de votre page.

Pour éviter de charger toutes les ressources au lancement de la page, on peut avoir recours à des techniques de lazy-loading.

Notez que le terme "lazy-loading" est un terme assez généraliste désignant un ensemble de techniques permettant le chargement différé des ressources (images, script, style, etc).

Avec ce type d'approche, vos gains de performance dépendront de votre réponse à la question : "Quand la ressource doit-elle être chargée ?"

Encore une fois, il existe une myriade de solutions possibles et nous en aborderons qu'un minuscule échantillon ! 😄

La balise img

Pour "organiser" le chargement des images, la balise HTML <img> dispose d'un attribut loading permettant de définir
une stratégie de chargement.

Les valeurs possibles sont :

• eager : on demande au navigateur de télécharger l'image le plus tôt possible, qu'elle soit visible ou non.
• lazy : on indique au navigateur d'attendre que l'image soit "proche" du viewport pour commencer le téléchargement de l'image.

Note :

• J'insiste sur le fait qu'on ne donne que des "recommandations" au navigateur, et que la processus de chargement des images reste au final à sa discrétion et peut varier selon les navigateurs ou leurs versions.
• Pour que ces méthodes fonctionnent, il faut que JS soit autorisé dans votre navigateur.

Pour en savoir plus : https://web.dev/browser-level-image-lazy-loading/

Intersection Observer

Si vous souhaitez avoir un meilleur contrôle sur votre stratégie de chargement des images, il est possible d'utiliser l'
API Intersection Observer.

Cette dernière permet de définir une fonction de callback à invoquer lorsqu'un élément observé entre en intersection
avec le viewport.

Le sujet mérite un tutoriel à lui seul, et ça tombe bien : il y en existe beaucoup !

Pour en savoir plus : https://grafikart.fr/tutoriels/intersection-observer-804

Utiliser une librairie

Si les deux premières méthodes ne vous conviennent pas, sachez qu'il existe des dizaines de librairies JS permettant de
différer le chargement de vos images.

Ces librairies peuvent offrir des services supplémentaires comme le chargement progressif (téléchargement de différents
niveaux de résolution, etc).

Le gros désavantage de ces solutions, c'est que selon les libs utilisées, votre stratégie de lazy-load peut ne pas être
comprise par les crawlers qui dégraderont votre index de performance en conséquence.

Soyez-donc vigilant sur ce point si le référencement est un aspect important sur votre projet.

Gestion du cache navigateur :

L'image la moins lourde, c'est celle que l'on ne télécharge pas ! 🧙 ️

Pour améliorer encore davantage les performances, vous pouvez configurer le cache navigateur pour stocker localement les images sur l'ordinateur de l'utilisateur.

Cela permet de réduire les requêtes vers le serveur pour les images déjà chargées, accélérant ainsi le chargement des pages ultérieures.

Grâce au header de réponse Cache-Control, vous pouvez contrôler la durée de mise en cache des images et améliorer l'efficacité du cache navigateur.

La difficulté avec ce genre de technique réside dans la mise à jour des images.

En effet, l'image étant conservée dans par le navigateur, purger le cache associé sera plus difficile.

• Si vous êtes sûr de ne jamais mettre vos images à jour, alors vous pouvez partir facilement sur un Cache-Control: max-age=31536000 (1 an).
• Dans le cas contraire, suffixer vos images par un numéro de version / hash allié à un Cache-Control long, reste encore la méthode la plus simple (à mon sens) pour garantir une bonne mise en cache côté browser.

S'il ne vous est pas possible de mettre en place l'une de ces deux solutions, sachez qu'il est possible de construire une stratégie de mise en cache beaucoup plus complexe. Pour en apprendre davantage, je vous recommande cet article.

Conclusion

L'optimisation des images est un élément essentiel de la performance web. En compressant les images, en utilisant des formats modernes, en adoptant des images adaptatives avec srcset, en mettant en place le chargement paresseux et en gérant le cache navigateur, vous pouvez considérablement améliorer les temps de chargement de vos pages et offrir une expérience utilisateur optimale. Prenez le temps de mettre en œuvre ces techniques d'optimisation, et votre site web sera plus rapide, plus efficace et plus agréable pour vos utilisateurs.

---

Illustation de couverture par : free-vectors.net