Publié le 8 octobre 2025
Réduire le temps de téléchargement des images peut améliorer le temps de chargement perçu de la page et le LCP.
Échec de l'insight
Cet insight met en évidence les images dont la taille de téléchargement est inutilement élevée. Les économies d'octets estimées sont calculées en comparant la taille de téléchargement de l'image à un rapport octets/pixel efficace pour le format d'image.
Améliorer le temps de téléchargement des images
Cette information recommande plusieurs stratégies pour améliorer le temps de téléchargement des images en fonction de leur taille et de leur format. Le déploiement d'un CDN d'images peut être extrêmement utile pour toutes ces stratégies.
Augmenter le facteur de compression de l'image
La plupart des formats d'image sont compatibles avec un niveau de compression qui peut être ajusté pour réduire la taille du fichier image au détriment de la qualité de l'image. Vous pouvez utiliser des outils d'image tels que ImageOptim, Squoosh et Imagemin pour optimiser le facteur de compression des images.
Utiliser des formats d'image modernes
AVIF et WebP sont des formats d'image qui offrent une compression et une qualité supérieures à celles des formats JPEG et PNG plus anciens. L'encodage de vos images dans ces formats plus récents est une bonne stratégie pour réduire la taille de téléchargement des images.
Le format AVIF est compatible avec la dernière version de tous les principaux navigateurs et offre des fichiers plus petits que les autres formats avec les mêmes paramètres de qualité. Pour en savoir plus sur AVIF, consultez l'atelier de programmation sur la diffusion d'images AVIF.
WebP est compatible avec tous les principaux navigateurs et offre une meilleure compression avec et sans pertes pour les images sur le Web. Pour en savoir plus sur WebP, consultez Utiliser des images WebP.
Utiliser des formats vidéo pour le contenu animé
Les grandes images GIF sont inefficaces pour diffuser du contenu animé par rapport aux vidéos. Envisagez d'utiliser des vidéos MPEG4/WebM pour les animations et PNG/WebP pour les images statiques au lieu d'images GIF afin d'économiser des octets réseau.
Consultez Remplacer les GIF animés par des vidéos pour accélérer le chargement des pages pour découvrir comment remplacer les images GIF par des vidéos.
Diffuser des images de taille responsive
Dans l'idéal, votre page ne doit jamais diffuser d'images plus grandes que la version affichée sur l'écran de l'utilisateur. Toute valeur supérieure à celle-ci entraîne un gaspillage d'octets et ralentit le temps de chargement de la page.
Une stratégie consiste à utiliser des formats d'image vectoriels, comme SVG. Avec une quantité finie de code, une image SVG peut être mise à l'échelle de n'importe quelle taille. Pour en savoir plus, consultez Remplacer les icônes complexes par des SVG.
Si les images vectorielles ne sont pas une option, il est préférable de diffuser des images "responsive". Avec les images responsives, vous générez plusieurs versions de chaque image, puis vous spécifiez celle à utiliser dans votre code HTML ou CSS à l'aide de requêtes média, de dimensions de fenêtre, etc.
Par exemple, l'élément <img> possède les attributs srcset et sizes, qui peuvent spécifier des URL d'image pour différentes tailles :
Si vous devez modifier complètement l'image, vous pouvez utiliser l'élément <picture> :
Pour en savoir plus, consultez Images responsives et L'élément picture.
Conseils spécifiques à la pile
Cet insight propose également des conseils spécifiques aux piles pour les pages utilisant les technologies suivantes :
AMP
- Envisagez d'afficher tous vos composants
amp-imgdans des formats WebP tout en spécifiant une solution de remplacement appropriée pour les autres navigateurs. - Pour le contenu animé, utilisez
amp-animafin que le processeur soit sollicité le moins possible lorsque le contenu se situe hors écran.
Drupal
- Vous pouvez envisager d'utiliser un module qui optimise et réduit automatiquement la taille des images importées sur le site sans perdre en qualité.
- Assurez-vous d'utiliser le module Responsive Image Styles intégré fourni par Drupal pour toutes les images affichées sur le site.
Joomla
Envisagez d'utiliser un plug-in ou un service qui convertira automatiquement les images que vous importerez dans un format optimal.
Magento
Envisagez d'utiliser une extension Magento tierce qui optimise les images.
WordPress
Vous pouvez envisager d'utiliser un plug-in WordPress d'optimisation d'image pour compresser vos images sans dégrader leur qualité.