Pourquoi les images décident de la vitesse de votre page
Sur la plupart des pages, les images représentent la plus grande part des octets téléchargés par le navigateur. Cela en fait la cible numéro un pour un site plus rapide — et la principale raison pour laquelle une page échoue aux Core Web Vitals, car la plus grande image est souvent l'élément LCP (Largest Contentful Paint) que Google mesure. Optimiser les images ne signifie pas une qualité inférieure ; cela signifie livrer la même image en bien moins d'octets. Réussissez cela et tout le reste — LCP, scores mobiles, consommation de données — s'améliore en même temps.
Bon dimensionnement et adaptatif
Le gaspillage le plus courant consiste à servir une image énorme dans un petit espace — une photo de 4000px affichée à 800px télécharge quand même les 4000px en entier. Exportez les images proches de la taille à laquelle elles sont réellement affichées. Puis servez différentes tailles à différents écrans avec srcset et sizes, pour qu'un téléphone reçoive un petit fichier et un ordinateur de bureau un plus grand.
Images adaptatives avec srcset
<img
src="/hero-800.jpg"
srcset="/hero-400.jpg 400w, /hero-800.jpg 800w, /hero-1600.jpg 1600w"
sizes="(max-width: 600px) 400px, 800px"
alt="Product hero"
width="800" height="500">Passez aux formats nouvelle génération : WebP et AVIF
Le WebP, et l'AVIF là où il est supporté, produisent des fichiers 25 à 50 % plus légers que le JPEG ou le PNG à qualité visuelle égale. C'est le changement qui fait disparaître la recommandation « Servir les images dans des formats nouvelle génération » de PageSpeed Insights. Servez-les avec un élément picture pour que les navigateurs qui supportent le nouveau format le reçoivent, et que les plus anciens reviennent automatiquement à l'original.
Servir AVIF/WebP avec un repli
<picture>
<source srcset="/photo.avif" type="image/avif">
<source srcset="/photo.webp" type="image/webp">
<img src="/photo.jpg" alt="Photo" width="1200" height="800">
</picture>Chargement différé — mais pas votre image principale
Le chargement différé (lazy-loading) reporte les images jusqu'à ce qu'elles soient sur le point d'entrer dans la fenêtre visible, afin qu'une longue page ne télécharge pas tout dès le départ. La plupart des plateformes le font par défaut. La seule exception est votre image hero ou principale, généralement l'élément LCP : chargez-la sans attendre (et envisagez fetchpriority="high") pour que le pixel le plus important s'affiche le plus vite possible. Différez tout ce qui est sous la ligne de flottaison, priorisez la seule chose au-dessus.
Diffusez depuis l'edge — et convertissez automatiquement
Même une image parfaitement compressée est lente si elle parcourt la distance depuis un serveur éloigné. Un CDN met vos images en cache en périphérie et sert chaque visiteur depuis l'emplacement le plus proche, afin que les octets arrivent vite où qu'il se trouve. cdn.com.tr le fait pour chaque ressource, via HTTP/2 et Brotli modernes, avec un SSL automatique devant.
Et vous n'avez pas à convertir les formats à la main. Pour WordPress, l'extension gratuite CDNTR crée du WebP (et de l'AVIF là où votre serveur le supporte) sur votre propre serveur et les sert depuis le CDN via un élément picture, avec l'original en repli automatique. Elle ne sert un fichier converti que lorsqu'il est réellement plus léger, si bien qu'une photo déjà bien compressée n'est jamais alourdie, et elle peut convertir toute votre bibliothèque de médias en masse.
Mesurez et confirmez
Passez votre page dans PageSpeed Insights avant et après. Vous recherchez deux choses : la disparition des recommandations « Servir les images dans des formats nouvelle génération » et « Dimensionner correctement les images », et une baisse de votre LCP. Si la plus grande image est encore lente, vérifiez qu'elle n'est pas en chargement différé et qu'elle est servie dans un format nouvelle génération depuis le CDN. Un rapide avant/après vous garde honnête sur ce qui a vraiment aidé.
Là où ça rapporte le plus
Les pages produits sont chargées en images ; des images plus légères et nouvelle génération se chargent plus vite et augmentent les conversions.
Les images hero d'articles et les galeries dominent le poids de la page ; les optimiser corrige le LCP et les scores mobiles.
Les téléphones sur des réseaux plus lents ressentent chaque kilo-octet en trop ; des images nouvelle génération bien dimensionnées aident le plus à cet endroit.
FAQ optimisation des images
Le WebP ou l'AVIF réduisent-ils la qualité d'image ?
Non. À qualité visuelle égale, ils produisent simplement un fichier plus léger. L'AVIF compresse généralement le mieux, le WebP est proche et plus largement supporté ; un élément picture vous permet de proposer les deux et de revenir à l'original pour les anciens navigateurs.
Dois-je convertir chaque image moi-même ?
Non. Sur WordPress, l'extension gratuite CDNTR convertit et sert automatiquement du WebP/AVIF et peut convertir votre bibliothèque en masse. Sur d'autres stacks, un outillage au moment du build ou un pipeline d'images peut faire de même ; l'essentiel est que les visiteurs reçoivent le format le plus léger.
Qu'est-ce qui compte le plus, le format ou la taille ?
Les deux, mais le bon dimensionnement vient généralement en premier : livrer une image de 4000px dans un emplacement de 800px gaspille bien plus que ce que le format ne fera jamais gagner. Dimensionnez correctement, puis convertissez vers un format nouvelle génération, puis diffusez depuis le CDN.