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 !

Pourquoi réduire le poids de ses images ?

Un utilisateur sur deux abandonne sa recherche si un site mobile met plus de 3 secondes à charger, et chaque seconde supplémentaire impacte jusqu’à 20% des conversions sur mobile. Vous comprenez l’importance d’avoir un site qui charge le plus rapidement possible !

Réduire le temps de chargement de vos pages vous permettra de :

• Faire baisser le risque d’abandon d’une page par l’utilisateur lors du chargement
• Assurer une navigation plus agréable à vos utilisateurs
• Permettre à Google de crawler davantage de pages avec le même temps alloué, ce qui aura un impact positif sur votre référencement naturel.

Première précaution à prendre pour avoir des poids d’images raisonnables : utiliser des visuels aux bonnes dimensions. Un visuel en haute qualité non redimensionné aura bien souvent un poids 10 à 20 fois trop élevé ! Imaginez le désastre en termes de temps de chargement d’une page.

Mais d’autres méthodes sont à votre portée pour optimiser vos photos et illustrations. Nous vous expliquons les fondamentaux pour bien choisir son format d’image (JPEG, PNG) afin de s’assurer d’un poids léger et sans perte de qualité.

Quand utiliser le format JPEG ?

Le JPEG est un des formats les plus répandus, car il permet d’obtenir des images avec un faible poids. Il utilise un mécanisme appelé compression qui dégrade légèrement la qualité pour alléger la quantité d’informations à stocker.

Il faut donc savoir dans quel cas on peut l’utiliser sans détériorer l’image.

✔️Le JPEG est idéal pour les photographies, qui sont très riches en informations. L’algorithme de compression optimise le poids nécessaire pour stocker les informations, et les éventuelles pertes de qualité ne sont pas visibles à l’oeil nu.

❌En revanche le JPEG est à proscrire pour les illustrations et les logos : avec leurs grands aplats de couleur, la détérioration se verra très vite.

Une photo et une illustration, chacune exportée en JPEG

En y sélectionnant le format JPEG, on vous demandera de choisir un indice de qualité entre 0 et 100 : il s’agit du réglage de compression que permet le format JPEG.

Plus cette valeur est basse, plus l’image sera compressée : son poids sera faible, mais elle perdra en qualité.

Vous pouvez ainsi chercher le meilleur rapport qualité-poids pour votre image. Sur une photo, vous pouvez généralement descendre à une qualité de 70 sans détérioration visible, et parfois même jusqu’à 50.

Quand utiliser le format PNG ?

À l’inverse, une image au format PNG vous assurera toujours une qualité optimale : vous n’aurez aucune perte. Le PNG rend également possible l’utilisation de transparence dans les images.

En contrepartie, le PNG a un poids bien plus élevé avec les images complexes.

✔️Il est parfait pour les illustrations et les logos, qui nécessitent un export sans perte et ne seront pas très lourds grâce à leur faible complexité.

❌ À l’inverse pour des photographies, le PNG n’est donc pas du tout approprié : la grande richesse de pixels sera très lourde à enregistrer.

Une illustration et une photo chacune exportée en PNG, et leurs poids

En effet, le second, similaire au format gif, n'enregistre qu’un maximum de 256 couleurs différentes dans votre image, ce qui dégradera votre image.

Est-ce que ça marche vraiment ?

En appliquant ces quelques règles, vous observerez rapidement des différences de poids radicales entre l’export en JPEG et l’export en PNG d’un même visuel.

Ci-dessous un comparatif : pour une photographie avec de grandes dimensions, le poids est divisé par 5 en choisissant le bon format !

Pour optimiser encore plus le temps de chargement de son site

Vous avez maintenant les fondamentaux pour optimiser le poids des images de votre site. Mais vous pouvez aller encore plus loin pour gagner quelques précieux kilo-octets lors du chargement de vos pages :

• Intégrer des illustrations au format vectoriel : ainsi en affichant votre logo grâce à son fichier source au format SVG, vous ferez un gain de poids encore meilleur que si vous aviez utilisé un export en PNG.
• S’intéresser aux formats d’images nouvelle génération : les formats WebP, JPEG XR ou JPEG 2000 peuvent vous offrir des gains de poids encore plus intéressants. Attention cependant, ils ne sont pas encore supportés par tous les navigateurs : vous devrez donc toujours prévoir des images en JPEG ou en PNG au cas où.

Vous souhaitez optimiser la vitesse de chargement de votre site en allant plus loin que les images ? Les experts de notre agence spécialisée en ergonomie et webdesign sont à votre écoute pour mettre en place une stratégie d’optimisation des performances de votre site !

Envie d'en savoir plus ? Nos experts ont réalisé pour vous une checklist : en 39 points-clés, auditez rapidement et simplement votre site web et déterminez en un seul coup d’œil les points d'optimisation !