Réduire le temps de chargement de son site en optimisant ses images

Le poids des images sur votre site a un impact direct sur le temps de chargement de vos pages. Optimiser vos visuels peut ainsi vous faire gagner de précieuses secondes, à condition de respecter les formats JPEG ou PNG et de choisir la compression adaptée !

Optimiser ses images pour de meilleures performances de chargement

Les pages de votre site se chargent trop lentement ? Vous cherchez à optimiser vos performances de chargement pour améliorer l’expérience de vos utilisateurs ? Si vous n’avez pas apporté un soin particulier au poids de vos images, vous avez sans doute une grande marge de progression sur ce point. 

L’impact des images sur votre temps de chargement

Commençons par le commencement : pourquoi faudrait-il optimiser vos images ?

Le poids de vos visuels a un impact direct sur le temps de chargement de chaque page. Et un chargement trop lent fera fuir un grand nombre d’utilisateurs. Le poids des images est donc étroitement lié à l’optimisation de votre taux de conversion.

Par ailleurs, il est communément admis que l'optimisation des images joue un rôle dans l'amélioration de votre référencement naturel.

Sachez également que parmi les éléments qui participent au poids total d’une page (styles, scripts…), les images sont très, très encombrantes.

Voici la répartition du poids des éléments pour les pages d’accueil de plusieurs sites : 

Et pourtant, il est possible d’avoir des poids d’images bien plus raisonnables sur son site :

Bien choisir son format d’image

La première chose à savoir, pour bien gérer ses images et leur poids, est que chaque format d’image est adapté à un besoin spécifique. Pour chaque image de votre site, vous avez plusieurs options : 

Le format JPEG

Il s’agit d’un des formats les plus communs, car relativement léger. Son principal atout est sa capacité à compresser les images : vous pouvez volontairement dégrader une image pour diminuer son poids.

Cela en fait un format particulièrement adapté aux photos : la richesse de pixels d’une photo rend la déperdition de qualité très discrète. À moins, bien sûr, que vous choisissiez une compression trop importante : votre image montrera alors des “artefacts”.

En revanche, sur une illustration avec de grands aplats, la compression sera beaucoup plus visible.

→ À privilégier pour les photos, en ajustant le degré de compression à chaque photo pour un résultat optimal

Le format PNG

À l’inverse, le PNG va toujours enregistrer vos images dans leur qualité d’origine, sans aucune dégradation. Enregistrer une photo avec ce format signifie que chaque pixel devra être rendu fidèlement, ce qui implique un poids très élevé.

Mais le PNG est très adapté pour les illustrations, logos, etc, dont les formes sont plus simples. Son algorithme est d’ailleurs si efficace qu’avec ce genre d’images, vous obtiendrez un poids plus faible qu’avec le format JPEG

→ À privilégier pour les illustrations

Le format SVG

Le format SVG est un format vectoriel : l’image n’est pas composée de pixels enregistrés un à un, mais de tracés géométriques. Ce qui en fait des images bien plus légères !

Peu d’images de votre site seront appropriées pour être enregistrées de cette manière, mais il s’agit d’une optimisation intéressante.

→ À privilégier pour les logos et les icônes

Le format WEBP

Il s’agit d’un format d’image moderne développé par Google. Il propose des compressions avec et sans perte donnant des poids plus légers que les formats JPEG et PNG, ce qui en fait un format idéal si vous cherchez à optimiser au mieux vos performances de chargement.

Ce format est encore peu démocratisé, en partie parce qu’il n’a longtemps été supporté que par quelques navigateurs. Désormais, seul Internet Explorer ne le supporte pas.

Si vous souhaitez vous assurer que tous vos utilisateurs verront vos images, vous devrez proposer une image alternative à un des autres formats.

→ Pour optimiser au mieux, mais exige une intégration plus complexe

Plugins et solutions de traitement automatique

Bien sûr, réaliser le bon export sur chaque image individuellement prendrait bien trop de temps. Il existe des outils qui vous permettent d’automatiser ces tâches.

Réduisez le poids de quelques images rapidement

Des sites comme compressor.io ou Tiny PNG vous proposent d’uploader vos images pour les récupérer avec une compression optimisée, et donc un poids grandement réduit.

Ces deux solutions sont utilisables gratuitement, mais avec la contrainte d’être limité au traitement de quelques images à la fois (10 et 20, respectivement). Elles ne sont donc pas adaptées aux grands volumes de visuels.

Traitez de grands lots d’images à la fois

Les versions payantes des deux outils cités précédemment vous permettent notamment de traiter des quantités illimitées de visuels.

Parmi les solutions payantes, Kraken.io est particulièrement adapté aux traitements à grande échelle pour les images de votre site. Il permet aussi de choisir la taille à laquelle vous voulez redimensionner vos images en plus de les compresser, et met une API à disposition pour les développements personnalisés.

Optimisez les images sur votre CMS

Selon votre situation, vous préfèrerez peut-être retravailler les images directement depuis votre back-office. Sachez alors qu’il existe des plugins répondant à ce besoin : c’est par exemple le cas d’Imagify, Imsanity ou EWWW Image Optimizer si vous utilisez Wordpress.

Bonnes pratiques pour le temps de chargement

Pour finir, quelques bonnes pratiques supplémentaires pour optimiser au mieux le poids des images sur votre site :

1/ Exportez les images à la taille d’affichage

Inutile d’héberger une image de 2000 px de large si elle va finalement s’afficher à une taille de 300 px. Exporter vos images aux bonnes dimensions est essentiel pour réduire le poids des médias lors du chargement de vos pages.

2/ Utilisez des images adaptatives

Pour aller plus loin sur le point précédent : en principe, les images de votre site s’afficheront dans une plus grande définition sur desktop que sur mobile. Ainsi, sur mobile, l’image téléchargée lors du chargement de la page sera plus lourde que nécessaire. Pour pallier cela, vous pouvez utiliser une version plus petite de l’image, qui sera chargée à la place de la grande.

Cela fournit une expérience optimisée pour tous les utilisateurs, quel que soit le device utilisé.

3/ Mettez en place un lazyloading

Le lazyloading (“chargement paresseux”) permet de charger les images uniquement lorsque l'utilisateur les atteint en défilant dans la page. Ainsi, le chargement de la page en elle-même est nettement réduit.

Avec ces bonnes pratiques, vous pourrez réduire drastiquement le poids des images pour chaque chargement d’une page de votre site, et ainsi améliorer l’expérience de vos utilisateurs. Libre à vous d’adapter le niveau d’efforts que vous mettez en place pour ces optimisations en fonction de votre contexte métier, du nombre de visuels sur votre site et de leur nature (photos, illustrations…)