Contrairement à ce que l’on pourrait penser, les images représentent la première cause de ralentissement des pages sur un site web. L’optimisation des images représente donc un aspect crucial pour la vitesse de chargement de vos pages mais également le référencement naturel (SEO) de votre site.
Pourquoi l’optimisation des images est-elle importante pour un site web ?
Dans cet article, vous découvrirez que l’optimisation des images de votre site web permet de :
– Améliorer la vitesse de chargement
– Améliorer le référencement naturel (SEO) sur votre site
– Améliorer l’expérience utilisateur (UX)
– Augmenter le taux de conversion / diminuer le taux de rebond
Les meilleures pratiques pour l’optimisation des images de votre site web
Utiliser les bons formats d’image pour l’optimisation des images de votre site web
Il existe plusieurs formats d’images, tous différents et adaptés à un usage spécifique. Choisir le bon format pour vos images vous permettra d’optimiser le poids de celles-ci. Voici une liste des formats d’images les plus courants, que vous serez probablement amenés à rencontrer :
JPEG : Probablement le format le plus connu. Ce format est idéal pour les photos et les images complexes avec beaucoup de couleurs. Il est facile de compresser ce format, tout en conservant une bonne qualité d’image.
PNG : Format d’images et d’illustrations de haute qualité qui gèrent des arrière-plans transparents. Ce format n’est pas recommandé pour les photos et les images complexes.
WebP : Le format que je vous recommande pour vos images sur votre site web. Le format WebP offre une excellente compression tout en conservant la qualité de l’image. Son poids très léger permet d’améliorer les performances de chargement de vos images. Attention toutefois à vérifier la compatibilité du format avec les différents navigateurs.
Le format « Webp2 » (successeur du format WebP) est actuellement en cours de développement.
SVG : Ce format est utilisé pour les graphiques vectoriels, il est très léger et s’adapte à toutes les résolutions sans perte de qualité (le format SVG permet un agrandissement « infini », sans perte de qualité car les éléments qui composent le graphique sont vectorisés). Ce format ne doit pas être utilisé pour les photos et les images avec beaucoup de couleurs.
Compresser les images (tout en gérant la qualité) pour une meilleure optimisation
La compression des images permet de réduire le poids des images, tout en gérant le degrés de « dégradation » de votre image. Plusieurs outils vous permettent de gérer cette compression, en voici une liste non exhaustive :
TinyPNG : Compresse les images PNG et JPEG tout en réduisant leur taille sans perte significative de qualité.
ImageOptim : Outil de compression pour macOS qui optimise les images en supprimant les métadonnées et en réduisant la taille des fichiers.
Squoosh : Outil en ligne de Google qui vous permet de redimensionner, compresser et exporter vos images dans plusieurs formats. C’est un outil que j’affectionne particulièrement car il permet de comparer en direct la qualité de votre image avant/après compression, ce qui vous permet de jauger au mieux la compression de vos images tout en conservant une qualité suffisante.
Optimiser les images de votre site web en les redimensionnant
Les images doivent être redimensionnées en fonction de l’espace où elles seront affichées. Par exemple, il est inutile de charger une image de 2000 pixels de large si elle ne sera affichée que dans un conteneur de 600 pixels.
Si vous souhaitez redimensionner manuellement vos images, vous pouvez utiliser certains des outils cités précédemment (comme Squoosh, Photoshop, Illustrator) et bien d’autres !
Si vous souhaitez redimensionner automatiquement vos images, vous pouvez utiliser un plugin proposé par WordPress, tel que Imagify, Smush ou encore Image Optimization.
Tutoriel d’utilisation de Squoosh pour redimensionner et compresser vos images
Aperçu de l’interface Squoosh
Rendez-vous sur https://squoosh.app/ .
Il vous suffit de faire glisser (« drag and drop ») votre image sur l’interface de l’outil.
Vous apercevez alors le poids de votre image (cf flèche 1).
Vous pouvez déplacer la barre verticale centrale de l’écran (cf flèche 2) pour apercevoir la dégradation avant / après compression de votre image : à droite de cette barre, la qualité après compression; à gauche, la qualité avant compression de l’image. Cette fonctionnalité est très utile pour régler le paramètre de « qualité » de l’image et essayer d’obtenir le meilleur ratio entre compression / qualité suffisante pour votre image.
Enfin, vous pouvez voir le poids après redimensionnement / compression de votre image (cf flèche 3) : un indicateur vous montre le pourcentage de diminution du poids de votre image (par rapport au poids initial du média).
Redimensionnement de l’image sur Squoosh
Pour redimensionner votre image sur Squoosh, cliquez sur le curseur « Resize » (flèche 1).
Vous aurez ensuite accès à la modification de la largeur de l’image [Width] et de la hauteur de l’image [Height] (cf flèche 2).
Par défaut, le modification d’une des 2 valeurs (largeur ou hauteur) entrainera la modification de l’autre valeur, afin de respecter le ratio de votre image et de ne pas la déformer.
Si vous souhaitez modifier qu’une seule valeur indépendamment de l’autre (ce qui aura pour effet de « cropper » / « rogner » votre image), vous pouvez décocher la case « Maintain aspect ratio » (flèche 3). Vous pourrez ainsi ne modifier que la largeur de votre image par exemple.
Attention : après avoir décoché la case « Maintain aspect ratio », il faut veiller à modifier le paramètre « Fit method » sur « Contain ».
Exportation de formats d’images, comme le Webp, sur Squoosh
Le deuxième onglet « Compress » de Squoosh vous permet de sélectionner le format d’export de votre image. Comme évoqué plus haut, je vous recommande le plus souvent d’utiliser le format « WebP » pour vos images si elles sont à destination de votre site web.
Vous aurez ensuite la possibilité d’indiquer la « qualité » souhaité de l’image. Ce paramètre est un indicateur compris entre 0 et 100. Plus vous vous rapprochez de la valeur 100, moins il y aura de compression de l’image et de perte de qualité. À l’inverse, plus vous vous rapprochez de la valeur 0, plus l’image sera compressée et plus la qualité de l’image sera impactée.
Le plus souvent, une valeur comprise entre 75 et 95 vous permettra d’obtenir une compression suffisante et une bonne qualité d’image.
Le chargement différé (Lazy loading) pour vos images, c’est quoi ?
Le chargement différé, ou lazy loading, est une technique qui permet de charger les images uniquement lorsque l’utilisateur les fait défiler dans la fenêtre de visualisation. Cela réduit le nombre de requêtes HTTP au chargement initial de la page, ce qui accélère le rendu des parties visibles de votre site.
Les extensions qui permettent de gérer les images sur votre site web proposent généralement cette fonctionnalité de chargement en différé.
Utiliser un CDN pour les images
Un réseau de distribution de contenu (CDN) permet de distribuer vos images via des serveurs situés à différents endroits géographiques. Cela réduit le temps de chargement des images pour les utilisateurs situés loin de votre serveur d’origine.
Des services comme Cloudflare, KeyCDN ou ImageKit permettent de distribuer les images de manière plus efficace et d’optimiser leur livraison en fonction de la localisation des visiteurs.
Optimiser les images pour améliorer le référencement naturel (SEO) de votre site web
Les images jouent également un rôle dans le référencement naturel de votre site. Voici les principales recommandations que je vous propose :
Texte alternatif (balise « Alt ») : Le texte alternatif d’une image remplit 2 missions principales :
– Ce texte dit « de remplacement » sera affiché à la place de l’image si jamais votre image ne peut pas se charger correctement (image qui n’existe plus, problème côté serveur, etc.)
– Pour les personnes utilisant une liseuse d’écran (comme les personnes aveugles ou personnes malvoyantes), c’est ce texte qui sera lu pour décrire la représentation de l’image. Pour une question d’accessibilité, il est donc très important de compléter ces textes alternatifs. C’est pourquoi Google vous sanctionnera en pénalisant votre référencement naturel si vous ne complétez pas les balises alternatives des images.
Nom des fichiers : Privilégiez des noms de fichiers cohérents pour vos images, sans caractères spéciaux.
Par exemple, si votre image représente une maison à vendre en Gironde, préférez le nom de fichier « maison-a-vendre-gironde.jpg » plutôt que « IMG_1357.jpg ». En effet, étant donné que les URLS de vos fichiers sont présents dans le code source de votre site, il est préférable d’utiliser des mots-clés dans vos noms de fichiers, plutôt que des combinaisons de lettres et de chiffres qui ne donneront aucune information à Google au sujet du contenu de vos images.
Sitemaps d’images : Si votre site contient de nombreuses images, vous pouvez soumettre un sitemap spécialement dédié aux images de votre site à Google, afin d’améliorer l’indexation de ces dernières.
Les tests de performance de votre site web que vous pouvez effectuer simplement
Une fois l’ensemble des images de votre site web optimisées, il est crucial de tester les performances globales de votre site. Des outils comme Google PageSpeed Insights, GTmetrix ou Lighthouse peuvent analyser la vitesse de votre site et vous fournir des recommandations supplémentaires pour améliorer les performances.
En plus du traitement des images, il existe d’autres aspects techniques sur lesquels vous pouvez travailler. Si cela vous intéresse, vous pouvez consulter l’article que j’ai rédigé au sujet des conseils pour améliorer le temps de chargement des pages.
Conclusion sur l’optimisation des images sur votre site web
L’optimisation des images est une étape indispensable pour garantir la rapidité, l’efficacité et l’accessibilité de votre site web. En appliquant les bonnes pratiques mentionnées (choix du format, compression, redimensionnement, chargement différé, balise Alt) vous pouvez améliorer considérablement l’expérience utilisateur et votre positionnement dans les moteurs de recherche.
En continuant à surveiller et à optimiser régulièrement vos images, vous assurez la pérennité de votre site et son adaptabilité aux nouveaux standards du web.
