format WebP<\/a> lorsque vous avez besoin d’une compression élevée avec une compatibilité étendue.<\/li>\n<\/ul>Réduisez le paramètre de qualité par paliers et prévisualisez l’image à sa taille finale sur la page. Si vous constatez du flou, du banding ou des artefacts en blocs, augmentez légèrement la qualité jusqu’à ce que l’image paraisse propre.<\/p>
Utilisez une compression sans perte pour les éléments graphiques qui nécessitent une précision au pixel près.<\/strong> Les méthodes sans perte préservent chaque pixel à l’identique, ce qui est essentiel pour les logos, les icônes, les éléments d’interface utilisateur et les images contenant du texte.<\/p>Pour ces cas :<\/p>
\nUtilisez le format PNG<\/strong> lorsque la transparence ou les bords nets doivent rester intacts.<\/li>\n\n\n\nÉvitez de convertir des logos ou des images contenant beaucoup de texte en formats avec perte si cela nuit à la netteté.<\/li>\n<\/ul>Avant de publier une image, vérifiez qu’elle paraît nette à sa taille d’affichage réelle, que la taille du fichier correspond à son rôle sur la page et qu’aucun artefact de compression n’est visible à un zoom de 100 %.<\/p>
3. Utilisez les bonnes dimensions d’image et le bon rapport d’aspect<\/h3> Servir des images aux bonnes dimensions évite les transferts de données inutiles et prévient l’instabilité de la mise en page.<\/p>
De nombreux sites web mettent en ligne des images à leur résolution d’origine, même lorsqu’elles sont affichées dans un format bien plus petit. Si une photo mesure 4000 px de large mais s’affiche à 800 px à l’écran, le navigateur télécharge tout de même le fichier complet, puis le redimensionne. Cela gaspille de la bande passante et ralentit le rendu.<\/p>
Commencez par adapter la largeur de l’image aux exigences de la mise en page.<\/p>
Par exemple :<\/p>
\nPour les mises en page mobiles, les images ont rarement besoin de dépasser 800 px de largeur<\/strong>.<\/li>\n\n\n\nPour les zones de contenu standard sur ordinateur de bureau, 1200 à 1600 px<\/strong> suffisent.<\/li>\n\n\n\nPour les sections hero en pleine largeur sur les grands écrans, n’augmentez que si le design l’exige.<\/li>\n<\/ul>La règle essentielle est simple : la largeur intrinsèque de l’image ne doit pas dépasser sensiblement sa largeur maximale affichée.<\/p>
Si le navigateur ne connaît pas à l’avance le ratio d’aspect (la largeur et la hauteur d’une image), il ne peut pas réserver d’espace pendant le chargement de la page. Cela provoque des décalages de mise en page lorsque l’image finit par se charger.<\/p>
Pour éviter cela :<\/p>
\nMaintenez des rapports d’aspect cohérents pour les images similaires, comme les vignettes de produits.<\/li>\n\n\n\n Définissez toujours les attributs width et height dans votre HTML.<\/li>\n\n\n\n Évitez les recadrages qui modifient les proportions de manière imprévisible d’un point de rupture à l’autre.<\/li>\n<\/ul>Lorsque votre mise en page s’adapte à différentes tailles d’écran, utilisez des techniques d’images responsives pour que le navigateur sélectionne automatiquement le bon fichier.<\/p>
Pour une diffusion responsive, mettez en œuvre :<\/p>
\nL’attribut srcset<\/strong> pour fournir plusieurs largeurs d’image.<\/li>\n\n\n\nL’attribut sizes<\/strong> indique au navigateur la place qu’occupera l’image dans le viewport.<\/li>\n<\/ul>Exemple<\/p>
<img \nsrc=\"image-800.jpg\" \nsrcset=\"image-400.jpg 400w, image-800.jpg 800w, image-1600.jpg 1600w\" \nsizes=\"(max-width: 768px) 100vw, 800px\" \nwidth=\"800\" \nheight=\"600\" \nalt=\"Descriptive alt text\">\n<\/pre>Cela indique au navigateur :<\/p>
\nSur les écrans jusqu’à 768 px de large, utilisez une image qui occupe 100 % de la largeur du viewport.<\/li>\n\n\n\n Sinon, supposez que l’image s’affiche à 800 px.<\/li>\n<\/ul>Le navigateur télécharge ensuite le plus petit fichier qui satisfait ces conditions.<\/p>
Si vos images sont plus grandes que leur taille affichée ou n’ont pas de dimensions définies, vous transférez des données inutiles et vous risquez des décalages de mise en page. Adaptez les dimensions à la mise en page, préservez des proportions constantes et laissez le navigateur choisir le bon fichier pour chaque appareil.<\/p>
4. Mettez en œuvre le SEO des images<\/h3> Le SEO des images garantit que les moteurs de recherche puissent comprendre, indexer et classer vos images dans le contexte du reste de votre page.<\/p>
Pour rendre les images découvrables, concentrez-vous sur les noms de fichiers, le texte alternatif et les données structurées.<\/p>
Nommage des fichiers<\/h4> Les moteurs de recherche lisent les noms de fichiers comme des signaux contextuels. Un nom générique comme IMG_4821.jpg n’apporte aucune information. <\/p>
Pour créer un nom descriptif qui renforce la pertinence thématique, suivez ces règles :<\/p>
\nUtilisez des mots clairs et descriptifs qui reflètent le contenu de l’image.<\/li>\n\n\n\n Séparez les mots avec des tirets, pas avec des tirets bas.<\/li>\n\n\n\n Utilisez des noms concis et cohérents avec le sujet de la page.<\/li>\n<\/ul>Par exemple :<\/p>
\nblue-running-shoes.jpg <\/strong>est descriptif et facile à rechercher.<\/li>\n\n\n\nimage1.jpg<\/strong> n’a aucun sens.<\/li>\n<\/ul>Si l’image illustre une section précise, alignez le nom du fichier sur le mot-clé cible de cette section.<\/p>
Texte alternatif<\/h4> Le texte alternatif décrit l’image pour les moteurs de recherche et les personnes malvoyantes qui utilisent des lecteurs d’écran pour naviguer sur internet. <\/p>
Pour améliorer l’accessibilité et aider les images à se classer dans les résultats de recherche, rédigez des textes alternatifs qui :<\/p>
\nDécrivez ce que vous voyez sur l’image.<\/li>\n\n\n\n Reflétez la fonction de l’image sur la page.<\/li>\n\n\n\n Utilisez des mots-clés pertinents de manière naturelle, sans bourrage de mots-clés.<\/li>\n<\/ul>✅ Correct :<\/strong> « Chaussures de course bleues pour homme avec semelle blanche » Mauvais :<\/strong> « chaussures »<\/p>✅ Bon :<\/strong> « Graphique en courbes montrant la croissance mensuelle du trafic du site web »Mauvais :<\/strong> « image de graphique »<\/p>Évitez de répéter le titre de la page ou d’ajouter des expressions comme « image de » ou « photo de ». Si l’image est décorative et n’apporte aucune valeur informative, utilisez un attribut alt vide pour que les lecteurs d’écran l’ignorent.<\/p>
Données structurées (Schema.org\/ImageObject)<\/h4> Les données structurées fournissent aux moteurs de recherche des informations explicites sur une image. Cela renforce la manière dont les images sont interprétées et affichées dans les résultats de recherche.<\/p>
Utilisez le balisage ImageObject de Schema.org pour définir des propriétés telles que :<\/p>
\nURL du contenu<\/li>\n\n\n\n description<\/li>\n\n\n\n nom<\/li>\n\n\n\n largeur et hauteur<\/li>\n<\/ul>Exemple en JSON-LD :<\/p>
{ \n\"@context\": \"https:\/\/schema.org\", \n\"@type\": \"ImageObject\", \n\"contentUrl\": \"https:\/\/example.com\/images\/blue-running-shoes.jpg\", \n\"name\": \"Men's Blue Running Shoes\", \n\"description\": \"Lightweight men's blue running shoes with white sole\", \n\"width\": 800, \n\"height\": 600\n}\n<\/pre>Ces données structurées clarifient ce que représente l’image et la manière dont elle se rapporte au contenu de la page. Il peut prendre en charge des fonctionnalités de recherche avancées et améliorer la précision de l’indexation.<\/p>
Si vos images génèrent du trafic, apparaissent dans des listes de produits ou soutiennent des pages de destination clés, mettez en place des données structurées de manière cohérente. <\/p>
Les métadonnées rendent les images compréhensibles. Les données structurées les rendent explicites.<\/p>
5. Utilisez le chargement différé<\/h3> Le chargement différé retarde le chargement des images non visibles à l’écran jusqu’à ce que l’utilisateur fasse défiler la page à proximité d’elles, ce qui réduit le poids initial de la page et accélère le premier rendu significatif.<\/p>
Si votre page comporte des images situées sous la ligne de flottaison, comme des éléments de galerie, des miniatures d’articles associés ou des illustrations dans de longs articles, activez le chargement différé afin que le navigateur donne la priorité à ce que l’utilisateur voit en premier.<\/p>
Utilisez le chargement différé natif en HTML :<\/p>
<img \nsrc=\"team-photo-800.webp\" \nsrcset=\"team-photo-400.webp 400w, team-photo-800.webp 800w, team-photo-1600.webp 1600w\" \nsizes=\"(max-width: 768px) 100vw, 800px\" \nwidth=\"800\" \nheight=\"600\" \nalt=\"Team working in an office\" \nloading=\"lazy\" \ndecoding=\"async\"><\/pre>Appliquez ces règles :<\/p>
\nUtilisez loading= »lazy » pour les images qui se trouvent hors de l’écran au chargement.<\/li>\n\n\n\n Évitez d’activer le chargement différé pour l’image principale au-dessus de la ligne de flottaison, qui est souvent l’élément Largest Contentful Paint<\/strong>.<\/li>\n\n\n\nMaintenez la largeur et la hauteur définies pour que la mise en page reste stable pendant le chargement des images.<\/li>\n\n\n\n Utilisez decoding= »async » pour réduire le blocage du thread principal pendant le décodage.<\/li>\n<\/ul>Si vous avez une hero image susceptible d’être l’élément LCP, traitez-la différemment :<\/p>
\nDéfinissez loading= »eager » (ou omettez loading) et envisagez d’utiliser fetchpriority= »high » pour le récupérer plus tôt.<\/li>\n<\/ul>Si vous utilisez WordPress, le chargement différé est activé par défaut à partir de WordPress 5.5. La plateforme ajoute automatiquement loading= »lazy » aux balises d’image qu’elle génère. Cela réduit le poids de chargement initial sans configuration supplémentaire.<\/p>
Cependant, ne partez pas du principe que le comportement par défaut est toujours correct. Passez en revue vos modèles et vérifiez que les images situées au-dessus de la ligne de flottaison, en particulier les grandes sections hero, ne sont pas chargées en différé. Si votre visuel principal tarde à s’afficher, cela peut nuire au Largest Contentful Paint.<\/p>
6. Testez et surveillez les performances du site web<\/h3> L’optimisation des images influe directement sur des indicateurs de performance mesurables, en particulier le Largest Contentful Paint (LCP)<\/strong>, le Cumulative Layout Shift (CLS)<\/strong> et le poids total de la page.<\/p>Largest Contentful Paint<\/a> <\/strong> (LCP)<\/strong> mesure le temps nécessaire pour que le plus grand élément visible à l’écran s’affiche complètement. Un LCP de 2,5 secondes ou moins est considéré comme bon, entre 2,5 et 4 secondes comme acceptable, et au-delà de 4 secondes comme médiocre, car cela nuit à l’expérience utilisateur et au SEO.<\/p>Sur de nombreux sites web, cet élément est une image « hero » ou un visuel mis en avant au‑dessus de la ligne de flottaison. Si cette image est trop volumineuse, mal compressée ou chargée tardivement, le LCP augmente.<\/p>
Pour tester le LCP :<\/p>
\nAnalysez votre page avec Google PageSpeed Insights<\/strong>.<\/li>\n\n\n\nIdentifiez quel élément est marqué comme LCP.<\/li>\n\n\n\n S’il s’agit d’une image, vérifiez sa taille de fichier et son format.<\/li>\n\n\n\n Assurez-vous qu’il ne fasse pas l’objet d’un chargement différé.<\/li>\n\n\n\n Vérifiez qu’il se charge au début de la cascade des requêtes.<\/li>\n<\/ul>Le Cumulative Layout Shift (CLS) <\/strong>mesure la stabilité visuelle en suivant l’ampleur des déplacements du contenu pendant le chargement de la page. Un score CLS de 0,1 ou moins est idéal, entre 0,1 et 0,25 est acceptable, et au-delà de 0,25 est considéré comme médiocre, car il perturbe l’expérience utilisateur et peut nuire au classement dans les résultats de recherche.<\/p>Lorsque des images se chargent sans largeur ni hauteur définies, le navigateur ne peut pas réserver d’espace à l’avance, ce qui entraîne le déplacement des éléments à mesure qu’ils s’affichent.<\/p>
Pour tester le CLS :<\/p>
\nConsultez le score CLS dans PageSpeed Insights.<\/li>\n\n\n\n Inspectez les éléments signalés qui se déplacent pendant le chargement.<\/li>\n\n\n\n Ajoutez des attributs width et height explicites aux images.<\/li>\n\n\n\n Maintenez des rapports d’aspect cohérents sur tous les points de rupture.<\/li>\n<\/ul>Le poids total de la page<\/strong> reflète la quantité de données téléchargées lors du chargement d’une page. Comme les images représentent souvent les trois quarts de la taille de la page, elles dominent fréquemment cet indicateur.<\/p>Pour évaluer le poids de la page :<\/p>
\nUtilisez le test de vitesse GTmetrix pour trier les ressources par taille de fichier.<\/li>\n\n\n\n Identifiez les fichiers image les plus volumineux.<\/li>\n\n\n\n Comparez la taille de fichier de chaque image à ses dimensions affichées.<\/li>\n\n\n\n Remplacez les fichiers surdimensionnés par des versions aux dimensions appropriées.<\/li>\n<\/ul>Pour une analyse plus approfondie, utilisez WebPageTest<\/strong> :<\/p>\nExaminez le diagramme en cascade pour voir à quel moment les images sont demandées.<\/li>\n\n\n\n Utilisez la vue pellicule pour repérer le moment où la plus grande image visible apparaît.<\/li>\n\n\n\n Confirmez que les images sous la ligne de flottaison se chargent après le rendu initial.<\/li>\n<\/ul>Si une image a un impact significatif sur le temps de LCP ou le poids total de la page, optimisez d’abord cette ressource. Cela apporte généralement l’amélioration la plus mesurable.<\/p>
Meilleurs outils pour optimiser les images<\/h2> Les outils d’optimisation d’images prennent en charge la compression, la conversion des formats en AVIF et WebP, et la diffusion automatisée sur l’ensemble des appareils. <\/p>
Selon votre workflow, vous pouvez utiliser un outil accessible via le navigateur pour un contrôle manuel, une extension WordPress pour automatiser les mises en ligne, un compresseur web léger pour des retouches rapides, ou un Content Delivery Network (CDN) qui optimise les images en edge.<\/p>
Squoosh (Google)<\/h3>\n
\n\t\t\t\n\t\t\t\t<\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div>Squoosh est un outil gratuit et open source, accessible depuis le navigateur, qui offre un contrôle fin sur la compression et la conversion de format.<\/p>
Il prend en charge AVIF, WebP, JPEG et PNG, et permet une comparaison visuelle côte à côte avant l’exportation. Cela le rend utile pour optimiser des images critiques, par exemple pour des sections hero ou des visuels de landing page, où la performance LCP est importante.<\/p>Avantages<\/strong> <\/p><\/td>Inconvénients<\/strong> <\/p><\/td><\/tr>Contrôle manuel complet de la compression<\/span> <\/p><\/td>
Aucune automatisation<\/span> <\/p><\/td><\/tr>Comparaison visuelle des formats<\/span> <\/p><\/td>
Nécessite d’optimiser les images individuellement<\/span> <\/p><\/td><\/tr>Prend en charge AVIF et WebP nativement<\/span> <\/p><\/td>
Non intégré aux flux de travail du CMS<\/span> <\/p><\/td><\/tr><\/tbody><\/table><\/figure>ShortPixel<\/h3>\n
\n\t\t\t\n\t\t\t\t<\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div>ShortPixel est une extension WordPress et un service cloud qui automatise la compression d’images et la conversion vers des formats de nouvelle génération.<\/p>
Il prend en charge AVIF, WebP, JPEG et PNG. Il peut optimiser par lots des bibliothèques existantes et servir des formats modernes de manière conditionnelle en fonction de la prise en charge par le navigateur. Cela le rend adapté aux sites WordPress riches en contenu qui nécessitent de l’automatisation.<\/p>Avantages<\/strong> <\/p><\/td>Inconvénients<\/strong> <\/p><\/td><\/tr>Compression automatique lors du téléversement<\/span> <\/p><\/td>
Nécessite WordPress<\/span> <\/p><\/td><\/tr>Optimisation par lots des images existantes<\/span> <\/p><\/td>
Dépendance au traitement dans le cloud<\/span> <\/p><\/td><\/tr>Diffusion conditionnelle d’AVIF et de WebP<\/span> <\/p><\/td>
Moins de précision image par image que les outils manuels<\/span> <\/p><\/td><\/tr><\/tbody><\/table><\/figure>Imagify<\/h3>\n
\n\t\t\t\n\t\t\t\t<\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div>Imagify propose la compression et le redimensionnement automatisés dans WordPress.<\/p>
Il prend en charge WebP et AVIF, en plus de JPEG et PNG. Les niveaux de compression sont prédéfinis, ce qui simplifie la configuration pour les sites qui privilégient la cohérence plutôt que des réglages manuels fins.<\/p>Avantages<\/strong> <\/p><\/td>Inconvénients<\/strong> <\/p><\/td><\/tr>Niveaux de compression prédéfinis<\/span> <\/p><\/td>
Contrôle granulaire limité<\/span> <\/p><\/td><\/tr>Workflow d’optimisation automatique<\/span> <\/p><\/td>
Uniquement pour WordPress<\/span> <\/p><\/td><\/tr>Prend en charge les formats modernes<\/span> <\/p><\/td>
Moins d’options de configuration avancées<\/span> <\/p><\/td><\/tr><\/tbody><\/table><\/figure>TinyPNG \/ TinyJPG<\/h3>\n
\n\t\t\t\n\t\t\t\t<\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div>TinyPNG propose une compression rapide par glisser-déposer via une interface web.<\/p>
TinyPNG propose une compression rapide par glisser-déposer via une interface web et prend en charge WebP, JPEG, PNG et AVIF nativement. Elle privilégie la simplicité au paramétrage avancé, ce qui la rend pratique pour une optimisation rapide par petits lots.<\/p>Avantages<\/strong> <\/p><\/td>
![\"Affichage](\"\/fr\/tutoriels\/wp-content\/uploads\/sites\/46\/2026\/04\/optimisation-des-images-pagespeed-insights.png\")
<\/figure>![\"Page](\"\/fr\/tutoriels\/wp-content\/uploads\/sites\/46\/2026\/04\/optimisation-d-images-squoosh.png\")