Comment optimiser les images pour un chargement plus rapide

Demandez à n'importe quel développeur web ce qui ralentit la plupart des sites : la réponse est presque toujours la même. Les images. L'optimisation des images pour le web consiste à réduire la taille des fichiers sans perdre en qualité visuelle, pour que les pages se chargent plus vite sans paraître moins belles. Une seule photo non compressée peut peser plusieurs méga-octets. La même image, bien formatée et compressée, peut peser moins de 100 kilo-octets sans différence visible à l'écran. Cet article explique les bons formats de fichier, le fonctionnement de la compression, quand redimensionner avant l'import, la place du chargement différé (lazy loading) et ce qui change le plus concrètement la vitesse de chargement de vos pages.

Les images sont le plus gros contributeur au poids des pages sur la plupart des sites. Une page avec cinq photos non optimisées peut peser dix fois plus que nécessaire. Ce poids se traduit directement par un chargement plus lent, un moins bon score de Largest Contentful Paint et des visiteurs qui partent avant la fin de l'affichage. Pour comprendre pourquoi la vitesse de chargement influence votre activité et votre classement dans la recherche, consultez l'article sur pourquoi la vitesse d'un site web compte.

Pourquoi les images ralentissent-elles les sites ?

Quand un visiteur ouvre une page, le navigateur télécharge toutes les ressources de la page avant de l'afficher. Les images sont généralement les plus lourdes de ces ressources. Chaque image demande sa propre requête, et le navigateur doit attendre la fin de ces requêtes avant de pouvoir afficher complètement le contenu.

Comment les images affectent les mesures de chargement

• Les images influencent directement le Largest Contentful Paint (LCP). Si le plus grand élément visible d'une page est une image d'en-tête, le LCP est le temps qu'il faut à cette image pour se charger entièrement
• Les images non optimisées augmentent le poids total de la page, ce qui retarde toutes les autres mesures de la chronologie de chargement
• Sur les connexions mobiles, l'effet est amplifié. Une image d'en-tête de 3 Mo qui se charge en deux secondes en haut débit peut prendre huit secondes ou plus sur un réseau mobile moyen
• Plusieurs grandes images aggravent le problème. Une galerie ou une page produit avec dix photos non compressées peut être difficile à utiliser sur des connexions plus lentes

Quels formats de fichier utiliser pour les images web ?

JPEG

• Le format standard pour les photographies et les images avec des dégradés et beaucoup de couleurs
• Gère la compression avec perte, c'est-à-dire qu'une partie des données de l'image est supprimée définitivement pour réduire la taille du fichier
• Pris en charge par tous les navigateurs et appareils, sans exception
• Un réglage de qualité de 75 à 85 produit des fichiers 60 à 80 pour cent plus petits que l'original, sans perte de qualité visible pour la plupart des photographies

PNG

• Le format des images qui ont besoin d'un fond transparent, notamment les logos, les icônes et les graphiques avec des aplats de couleur
• Utilise la compression sans perte, c'est-à-dire qu'aucune donnée n'est supprimée et que l'image est conservée à l'identique
• Les fichiers PNG sont nettement plus lourds que les JPEG pour les photographies. N'utilisez le PNG que lorsque la transparence est nécessaire ; utilisez le JPEG ou le WebP pour les photos

WebP

• Un format moderne conçu pour remplacer à la fois le JPEG et le PNG, avec une meilleure compression à qualité équivalente
• Les images WebP sont généralement 25 à 35 pour cent plus petites que les fichiers JPEG équivalents
• Gère la compression avec et sans perte, ainsi que la transparence
• Pris en charge par tous les grands navigateurs. Si votre créateur de site ne convertit pas automatiquement les images en WebP, convertissez-les manuellement avant l'import

AVIF

• Un format plus récent qui offre une meilleure compression que le WebP, souvent 50 pour cent plus petit que le JPEG à qualité comparable
• La prise en charge par les navigateurs progresse mais n'est pas encore universelle. Utilisez l'AVIF là où il est pris en charge, avec un repli automatique vers le WebP ou le JPEG pour les navigateurs qui ne le gèrent pas

Qu'est-ce que la compression d'image et comment fonctionne-t-elle ?

La compression réduit la taille du fichier en supprimant ou en simplifiant des données de l'image. Il en existe deux types, et la différence détermine quand utiliser chacun.

La compression avec perte

• Supprime définitivement une partie des données de l'image pour obtenir un fichier plus petit
• Les données supprimées sont choisies selon ce que l'œil humain remarque le moins, en général les variations de couleur subtiles et les détails fins de texture
• Utilisée dans le JPEG et le WebP avec perte
• Un réglage de qualité de 75 à 85 produit des fichiers considérablement plus petits, avec des images qui paraissent identiques à l'original non compressé dans la plupart des usages
• Évitez de réenregistrer un JPEG déjà compressé avec un réglage de qualité plus bas. Cela cumule les artefacts de compression et dégrade davantage l'image à chaque enregistrement

La compression sans perte

• Réduit la taille du fichier sans supprimer aucune donnée de l'image. Chaque pixel est conservé à l'identique
• Utilisée dans le PNG et le WebP sans perte
• Gain de taille plus faible qu'avec la compression avec perte, mais sans aucune perte de qualité
• Convient surtout aux schémas de produit, aux captures d'écran, aux graphiques riches en texte ou à toute image dont les artefacts de compression seraient visibles ou inacceptables

Faut-il redimensionner les images avant de les importer ?

La taille du fichier et les dimensions en pixels sont deux questions distinctes, et les deux influencent la vitesse de chargement. Compresser une image de 4 000 pixels de large ne sert à rien si le navigateur n'a besoin de l'afficher qu'à 800 pixels de large. Le navigateur télécharge toute l'image de 4 000 pixels et la réduit dans la fenêtre d'affichage, ce qui gaspille de la bande passante et ralentit la page pour chaque visiteur.

Comment dimensionner correctement les images avant l'import

• Repérez la largeur maximale à laquelle l'image sera affichée. Pour les images pleine largeur sur ordinateur, c'est généralement entre 1 440 et 1 920 pixels
• Pour les images dans des colonnes ou des cartes, la largeur affichée est plus petite, souvent entre 400 et 800 pixels
• Redimensionnez l'image à sa taille d'affichage maximale avant l'import
• Pour les écrans retina et à haute densité, multipliez la largeur d'affichage par 1,5 à 2. Une image de carte de 400 pixels de large gagne à avoir un fichier source de 600 à 800 pixels de large pour paraître nette sur les écrans retina

Qu'est-ce que le chargement différé et comment influence-t-il l'optimisation des images ?

Le chargement différé retarde le téléchargement des images qui ne sont pas encore visibles dans la fenêtre d'affichage. Au lieu de charger toutes les images de la page d'un coup, le navigateur ne charge les images que lorsque les visiteurs approchent en faisant défiler. Sur les pages qui comptent beaucoup d'images, cela réduit nettement le poids initial de la page et améliore le Time to Interactive pour le contenu visible sans défilement.

• Le chargement différé est pris en charge nativement par tous les grands navigateurs avec l'attribut loading="lazy" sur les balises d'image
• N'appliquez pas le chargement différé aux images visibles sans défilement. L'image d'en-tête et tout contenu visible sans faire défiler doivent se charger immédiatement
• Appliquez le chargement différé à toutes les images situées plus bas, notamment les galeries de produits, les vignettes de blog et les sections riches en images plus bas dans la page

Pour un détail complet du fonctionnement du chargement différé et de son bon usage, consultez l'article sur ce qu'est le chargement différé et comment il fonctionne.

Que sont les images adaptatives et pourquoi comptent-elles ?

Une image adaptative est une image qui sert un fichier de taille différente selon la taille d'écran du visiteur. Au lieu d'envoyer une image de 1 920 pixels à tous les appareils, y compris à un visiteur sur un écran mobile de 375 pixels de large, les images adaptatives permettent au navigateur de ne demander que ce dont il a besoin.

Comment les images adaptatives réduisent le temps de chargement sur mobile

• Un visiteur sur mobile reçoit une version de l'image de 400 pixels au lieu du fichier complet pour ordinateur, ce qui réduit considérablement la taille du téléchargement
• Les images adaptatives utilisent l'attribut srcset pour définir plusieurs fichiers sources à différentes largeurs, afin que le navigateur choisisse le bon
• Les créateurs de site qui gèrent cela automatiquement vous évitent de générer manuellement plusieurs tailles d'image
• Les images adaptatives améliorent directement les Core Web Vitals sur mobile, où l'optimisation des images a le plus d'effet sur le LCP

Pour un détail des Core Web Vitals et du calcul du score LCP, consultez l'article sur ce que sont les Core Web Vitals.

Comment optimiser les images étape par étape ?

Avant l'import

• Redimensionnez l'image aux bonnes dimensions d'affichage
• Choisissez le bon format : WebP pour les photographies et les graphiques courants, PNG uniquement quand la transparence est nécessaire
• Compressez avec un réglage de qualité de 75 à 85 pour les formats avec perte
• Vérifiez la taille du fichier. Une image web typique doit peser moins de 200 Ko. Les images d'en-tête sur ordinateur peuvent aller jusqu'à 400 Ko ; au-delà, il vaut la peine de la revoir avant l'import

Après l'import

• Ajoutez un texte alternatif descriptif à chaque image. C'est important pour l'accessibilité et cela contribue à la visibilité dans la recherche. Pour un guide complet, consultez l'article sur comment utiliser les images sur votre site web
• Appliquez le chargement différé à toutes les images situées sous la ligne de flottaison
• Lancez un test de vitesse de page après l'ajout de nouvelles images. Une seule image non optimisée peut annuler toutes les autres améliorations de vitesse de la page

En continu

• Vérifiez les nouvelles images avant chaque import. Des images non optimisées passent facilement quand on travaille vite
• Lancez un test de vitesse après la publication d'un lot important de nouvelles images
• Revoyez les anciennes images si le site date d'avant les pratiques d'optimisation actuelles. Les anciennes bibliothèques d'images sont une source fréquente et négligée de problèmes de vitesse

Pour un guide sur le test des performances de l'ensemble de votre site, consultez l'article sur comment tester la vitesse de votre site web.

Comment WEMASY gère l'optimisation des images

Le créateur de site web WEMASY compresse et convertit automatiquement les images à l'import. Les images sont servies en format WebP lorsque le navigateur le gère, avec des formats de repli pour les appareils plus anciens. Plusieurs tailles sont générées à l'import, de sorte que les visiteurs sur mobile reçoivent des fichiers de taille adaptée sans aucune configuration manuelle.

Le chargement différé est appliqué par défaut aux images situées sous la ligne de flottaison sur toutes les pages créées avec WEMASY. Le texte alternatif peut être ajouté dans l'éditeur d'images de la plateforme. Les scores de vitesse de page, y compris le LCP, sont visibles dans le tableau de bord de statistiques WEMASY, avec les problèmes liés aux images signalés page par page et accompagnés de recommandations précises.

Découvrez ce qui est inclus avec le créateur de site web WEMASY, ou consultez les offres sur la page des tarifs.

Questions fréquentes