Elles peuvent aussi bien embellir un site qu’alourdir ses performances…
Les images d’un site web sont incontournables pour le rendre plus design et apporter une fluidité de navigation, mais quand elles sont mal optimisées elles peuvent devenir les facteurs d’un ralentissement important et ainsi créer des frustrations voire un abandon du site par l’internaute.
Face à leur importance et aux changements permanent des sites web qui nécessitent l’intégration d’images, on en oublie très souvent qu’il y a des règles à respecter pour conserver la fluidité et la rapidité de son site. En effet, 30 à 40% du temps lorsque nous effectuons des tests lors de nos audits, les images représentent la première cause de ralentissement !
Pourquoi optimiser le poids des images ?
- Pour réduire votre taux de rebond : Aujourd’hui 57% des internautes quittent un site si le temps de chargement est supérieur à 3 secondes (source: ThinkWithGoogle).
- La norme établie pour le e-commerce en Europe en temps de réponse serveur est de 300 ms, au delà de cette limite votre temps de réponse doit être fortement amélioré
- 100 ms gagnées en temps de réponse vous apportent 1% de croissance de votre taux de conversion, soit 1 % de revenu supplémentaire à la fin de l’année
Et pourtant il existe de nombreuses façons simples et rapides pour les optimiser au maximum…
Comment optimiser ses images ?
1. Redimensionner les images avant l’import
En limitant la taille de l’image avant l’import vous obtiendrez en toute logique une image beaucoup moins lourde. L’idée principale est de toujours s’assurer que l’on ne fait pas télécharger une image plus grande que nécessaire à l’utilisateur. Très souvent, lors de nos audits, nous découvrons qu’une partie des images qui figurent sur le site sont envoyées à l’utilisateur dans une dimension supérieure à la dimension spécifié dans le code HTML du site. Quand cela se produit, il y a un gâchis de ressource et de temps de transfert car l’utilisateur va commencer par télécharger une grande image pour finalement la redimensionner automatiquement à la baisse lors de l’affichage par le navigateur.
La bonne pratique consiste donc à avoir une correspondance parfaite entre les dimensions des images (dans le fichier lui-même) et les dimensions spécifiées dans le code HTML pour ces mêmes images. Quand la dimension n’est pas la même il est nécessaire de les redimensionner.
2. Compresser les images
Très simple et très rapide, la compression d’image permet de réduire la taille de celle-ci par suppression des fichiers composés d’informations répétitives. Par exemple dans une image, il peut y avoir des rangées entières de pixels de la même couleur, dans ce cas au lieu d’enregistrer pour chacun de ces pixels un numéro représentant cette couleur, on peut mettre un code signifiant de mettre ici 300 fois la couleur choisie.
Le principe de compression des images n’est évidemment pas neuf, mais sachez que ce domaine a continué de progresser dans les dernières années. Aussi, nous vous conseillons fortement de vérifier que l’ensemble des images de votre site utilise bien le maximum de niveau de compression.
Vous vous demandez peut-être si l’impact de la compression est visible auprès de vos visiteurs ? En effet, cela peut dépendre du degré de compression que vous allez utiliser, mais la plupart du temps vous serez étonnés de ne pas arriver à faire la différence entre 2 images affichées à l’écran, l’une des deux ayant une taille largement plus basse.
Pour vous aider dans cette démarche, nous vous conseillons l’excellent outil en ligne compressor.io, qui permet justement de comparer les différences avant/après compression !
3. Opter pour le JPEG ou le PNG ?
Pourquoi le JPEG : c’est le format le plus adapté en terme de compression d’image numérique. Il est possible de choisir le taux de compression avec ce format mais attention plus la compression est importante, moins l’image sera lourde, mais en contrepartie elle perd de sa qualité. Il faut donc choisir le bon compromis, mais ça on vous laisse faire ! (cf. vos futurs essais avec compressor.io)
Pour le PNG : Contrairement au JPEG, le PNG accepte la transparence, par conséquent son utilisation sur le web est plus avantageuse et davantage privilégiée pour certaines images comme les logos par exemple. Néanmoins pour toutes les autres qui ne nécessitent pas de transparence, le JPEG, avec ses nombreuses options de compression, restera plus adapté.
4. Rappel : Génération Mobile First
Depuis le passage de la Google Speed Update, nous sommes passés dans une ère de Mobile First ! Pensez bien évidemment à rendre vos images responsives et bien suivre les étapes d’optimisation du poids de vos images !
La vitesse de chargement des pages d’un site web est devenue le sujet majeur de ces dernières années. La conjoncture et le rythme de vie actuel nous incite à être de plus en plus impatients. Les internautes eux aussi sont dans la même configuration et veulent naviguer sans attendre, à nous de nous adapter pour offrir la meilleure expérience numérique et d’achat à nos clients.