Les images composant une page d’un site Internet sont un point important à prendre en compte pour accélérer le chargement. C’est l’un des critères de référencement pour améliorer le positionnement sur les moteurs de recherche. Ça fait partie des points à travailler pour une meilleure expérience utilisateur surtout sur les mobiles.

1. La taille des images

Toutes les image sont composées d’une largeur et d’une hauteur en pixel. Plus une image possède de pixels plus son poids est élevé. Le nombre de couleurs différentes rentre aussi dans le calcul du poids de l’image, une image en niveau de gris sera plus légère qu’une autre avec beaucoup de couleurs même si sa taille est plus grande. Une image prise avec un appareil photo d’un capteur de 24 méga pixel a une taille de 6000 x 4000 pixels. La mettre telle quelle sur son site web va réduire considérablement le chargement de la page et la pénaliser dans les résultats de recherche.

Il faut donc réduire la résolution des images pour les adapter à son site Internet. L’idéal serai de desservir des images différentes selon le support de l’utilisateur. En effet la taille de l’écran d’un smartphone est inférieure à celui d’une tablette ou d’un ordinateur. Mais cela demande plus de travail et de maintenance. En réduisant la taille des images pour correspondre aux différentes parties du site où elles doivent aller est déjà une bonne approche pour optimiser le chargement de la page.

Par exemple si l’image fait partie du corps d’un article il n’est pas nécessaire qu’elle soit plus large que la section où elle va être intégrée. Si la largeur de la zone de l’article fait 800 pixels vous devez réduire la largeur de votre image à 800 pixels. En optimisant chaque image de votre page vous allez l’alléger considérablement et réduire son temps de chargement.

Si vous avez besoin de conseil n’hésitez pas à nous contacter et nous étudierons ensemble le meilleure façon pour optimiser votre site Internet et vos images.

Optimiser les images de son site Internet
Le poids des images est un critère important pour le référencement

2. Les différents formats

Il existe de très nombreux formats d’images en informatique mais sur Internet seulement 4 formats sont utilisés. Chaque format a ses spécificités que vous devez utiliser selon vos besoins :

Le format JPEG OU JPG

C’est le format le plus couramment utilisé pour les images des sites Internet. Il possède un bon rapport entre la qualité et le poids de l’image. Quand vous exportez une image au format JPG vous devez choisir un niveau de qualité entre 0 et 100. Avec un niveau élevé l’image sera de bonne qualité mais un poids plus grand. Cependant ce format ne permet pas de mettre de la transparence dans les images. Il est intégré nativement dans tous les logiciels de conception graphique ce qui en fait le format le plus répandu.

Le format PNG

Le format PNG est un format plus récent qui a été développé pour Internet et pour contourner la licence du format GIF. Il intégre une couche alpha afin d’afficher de la transparence dans l’image. Il est un peu plus lourd que le format JPG de bonne qualité pour un rendu quasi similaire. Il est préférable d’utiliser le format JPG si vous n’avez pas de transparence dans votre image.

Le format GIF

C’est le format le plus ancien dévelopé dans les années 80 et encore utilisé de nos jours. Son principal inconvénient c’est qu’il ne dispose que de 256 couleurs pour l’affichage. Le poids des images est assez léger et il supporte une couche alpha afin de mettre de la transparence. Sa principale caractéristique est qu’il permet de créer des animations en intégrant plusieurs images dans le conteneur. C’est un format très répandu qui est utile lorsque l’on souhaite afficher une image animée. Mais plus l’animation est longue plus le fichier est lourd à charger.

Le format WEBP

Le format WEBP est un format récent développé par Google qui vise a remplacer les anciens formats d’image. Le rapport entre la qualité et le poids est un peu meilleur que les autres formats. Cependant il n’est pas pris en charge dans certains navigateurs ni dans certains logiciels de conception graphique à cause de problème concurrentiel. Vous noterez que le logo de son fondateur sur sa page d’accueil n’est pas dans ce format 🙂


3. Le taux de compression

Le taux de compression concerne essentiellement les images au format JPG. Avec n’importe quel logiciel de conception graphique vous avez la possibilité d’enregistrer une image JPG avec un certain niveau de qualité. Les niveaux de qualité vont de 0 (qualité basse) à 100 (qualité haute). Plus le niveau de qualité est élevé plus l’image sera lourde car elle aura plus de détails.

Dans l’exemple ci-dessous nous comparons la même image avec des niveaux de qualité différents. Celle de gauche est enregistrée avec une qualité de 10 et celle de droite avec un niveau de 90. On peut voir clairement la différence de qualité quand on fait varier le taux de compression.

Image avec un taux de compression élevé
Qualité 10 : 18 ko
Image avec un taux de compression faible
Qualité 90 : 100 ko

Pour optimiser vos images sur votre site web il est bien d’utiliser un niveau de qualité entre 60 et 80 selon la taille et le positionnement. C’est un bon rapport entre une qualité correcte et un poids rapide à charger.


4. Outils d’optimisation

Il existe de nombreux outils pour compresser les images afin d’optimiser le chargement de vos pages web. Les logiciels les plus connus sont Adobe Photoshop, Affinity Photo et Gimp. Si vous êtes sur MacOS vous pouvez utiliser ImageOptim qui est très simple d’utilisation et qui utilise des librairies de compression reconnues. Il y a aussi des solutions en ligne comme le site compressor.io qui sont très complet.

Enfin il y a des plugins WordPress permettant d’optimiser ces images directement dans la bibliothèque des médias. Le plus connu est Imagify qui est gratuit d’utilisation pour un usage limité. Il y a le plugin de cache WP-Optimize qui intègre une fonction d’optimisation des images de la bibliothèque. Il existe de nombreux plugins qui font très bien le travail, il faut prendre le temps de les tester et de choisir celui qui vous semble le mieux. Vérifiez que les plugins sont maintenus à jour pour des raisons de sécurité.


5. Conclusion

L’optimisation des images de son site Internet est une étape importante pour améliorer le chargement de vos pages web. Les images représentent une grande partie du poids d’une page et les moteurs de recherche peuvent vous pénaliser si vos images ne sont pas compressées. Un site rapide à charger surtout sur les mobiles, améliore grandement l’expérience utilisateur et la navigation.

La technique LazyLoad pour différer le chargement des images est aussi à privilégier. Elle permet un chargement des images non pas à l’affichage de la page mais quand elles apparaissent dans la fenêtre au scroll de l’utilisateur. WordPress 5.4 intègre nativement la technique du LazyLoad pour optimiser le chargement des pages.

En fonction des technologies que vous utilisez, vous trouverez les bons outils pour optimiser vos images. Essayez de trouver un compromis entre qualité et poids. Vous pouvez utiliser PageSpeed Insights pour identifier les problèmes d’optimisation de votre site et détecter les images qui sont trop lourdes.

Vous pouvez nous contacter pour toute question relative à l’optimisation de votre site. Nous étudions chaque cas et proposons des prestations sur-mesures pour améliorer l’expérience utilisateur. Un site Internet optimisé et rapide à charger améliore votre identité et votre image de marque. Découvrez nos prestations en création de site Internet et nous restons à votre disposition pour tout conseil.