Cédric Lengagne
Les images sont probablement les éléments les plus lourds et longs à charger d’un site internet (si l’on exclue la vidéo). Or, vous le savez, le temps de chargement est un des éléments essentiel de l’expérience utilisateur. Nous le faisons tous consciemment ou non: Nous ne naviguons pas sur un site internet où les pages mettent 10 secondes à charger.
On considère souvent qu’une image de plus de 100Ko est trop lourde pour un site internet. Et qu’une page internet ne doit pas excéder la taille de 1Mo (Mo peut mettre un peu moins de 10 secondes à charger avec une connection 3g moyenne).
Dans cet article, nous verrons quelques techniques pour alléger votre site internet en optimisant les images.
Cela parait évident, et pourtant, l’image la moins lourde est celle qui n’existe pas ! Je ne dis pas qu’il ne faut pas d’images sur son site web (même si l’on peut considérer ça comme un beau défis pour un webdesigner), bien que des alternatives sympas aux images existent…. Je dis par là qu’il faut, pour chaque image, se poser la question de sa pertinence ou non et de son intérêt d’un point de vue commercial (est ce que l’image fait vendre ?) et esthétique.
Quoiqu’il en soit, au delà de 20 images par page, on peut admettre qu’il y en a trop, et la meilleure idée, dans un premier temps, c’est d’en retirer.
Il est primordial d’utiliser les formats d’images appropriés. On utilisera le png uniquement lorsque l’on doit gérer du transparent par exemple (et encore, il existe là aussi des alternatives plus légères).
Si ce n’est pas le cas, on privilégiera le format jpeg qui est un format moins lourd. En effet, La compression JPEG permet une charge plus rapide des pages web et est adaptée aux images avec beaucoup de détails, comme les photos.
Dans la même lignée, il existe aussi le format webp, un format d’image créé par Google pour offrir une meilleure compression et une qualité d’image supérieure par rapport aux autres formats d’images JPEG et PNG. WebP prend en charge les images avec transparence et offre une compression sans perte pour les images sans transparence. Enfin, WebP est également rapide à charger et décoder, ce qui en fait un bon choix pour les images sur le web. C’est d’ailleurs un des critères d’évaluation des tests Google Lighthouse.
Pour finir, il ne fait pas oublier le format svg qui est un format vectoriel, c’est un format de fichier qui représente une image sous forme de formules mathématiques plutôt que de pixels. Cela signifie que l’image peut être redimensionnée sans perte de qualité, en conservant le même poids, car les formules sont recalculées pour s’adapter à la nouvelle taille. De plus, l’avantage de ce format est la possibilité d’interagir avec des éléments de l’image à l’aide de code javascript. On peut imaginer un changement progressif de couleur au fur et à mesure du scroll d’une page web par exemple.
La compression d’images consiste à réduire la taille des fichiers d’images sans altérer significativement leur qualité. Cela peut être fait en supprimant des données inutiles telles que les métadonnées ou en utilisant des algorithmes de compression sans perte ou avec perte de qualité.
Pour compresser les images pour un site web, il existe plusieurs solutions.
La plus simple et efficace c’est de compresser ses images avant de les ajouter au site. Pour cela, il faut utiliser vos logiciels de retouche d’image préféré comme Gimp ou Photoshop (Tout webmaster doit connaitre et maitriser les fonctionnalités de base de ces logiciels).
Il existe également des outils en ligne
Il existe de nombreux autres plugins pour compresser les images dans WordPress, parmi eux on retrouve:
La plupart de ces outils sont payants et conserve une version non compressée des images sur votre serveur. Soyez donc vigilent quand à l’indexation de ces images et au poids de ces dernières sur votre serveur web.
Un autre élément essentiel, très simple, et pourtant souvent délaissé est le dimensionnement des images. Il est fréquent de voir des images inadaptées, 4 fois trop grandes. Pourquoi charger une image de 1000px par 1000px lorsque celle ci est redimensionnée en 400px par 400px par le navigateur ?
Le mieux est encore de prévoir plusieurs versions des images, de toutes tailles, permettant un chargement en fonction du type d’appareil. Ainsi, les images au format mobiles seront donc plus légères (car plus petite, donc moins de pixels, vous l’avez compris). Vous avez de la chance, le CMS WordPress fonctionne nativement de la sorte, et vous pouvez même personnaliser vos formats d’images. Autant ne pas s’en priver.
Cela n’est pas de l’optimisation de performance mais concerne plutôt le SEO. Ainsi, vous aidez les moteurs de recherche à comprendre de quoi il s’agit dans l’image et vous gagner en accessibilité en permettant aux utilisateurs utilisant une assistance vocale à comprendre le contenu de votre image.
Utiliser un CDN (Content Delivery Network) peut aussi aider à optimiser les images pour un site web ( ou plutôt leur vitesse de chargement). Les CDN stockent des copies des fichiers du site web sur des serveurs déployés dans différentes régions du monde, ce qui permet aux utilisateurs de charger plus rapidement les images grâce à la réduction de la distance entre eux et le serveur.
De plus, certains CDN offrent également des fonctionnalités de compression et d’optimisation d’images telles que la minification des images, la conversion des formats d’images, etc. Il est donc possible d’améliorer les performances des images en utilisant un CDN, mais il est toujours conseillé de compresser les images avant de les charger sur le site web.
Cela semble être une évidence, et pourtant, sur un très grand nombre de sites internet, cette optimisation d’image n’est faite qu’à moitié ou pas du tout.
Le conseil que je peux vous donner est de NE PAS REMETTRE A PLUS TARD cette optimisation, d’optimiser au fur et à mesure, et de mettre en ligne des images déjà traitées via vos logiciels de retouche de photo préférés. Il ne faut pas attendre que le site soit en ligne pour reprendre l’ensemble des images, c’est long et fastidieux !