Optimisation des images : accélérez votre site avec WebP & AVIF

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

Sur les photographies, le WebP et l'AVIF produisent des fichiers bien plus légers que le JPEG à qualité visuelle égale : dans notre mesure, une photo en 1920×1080 est passée de 186 Ko en JPEG optimisé à 114 Ko en WebP et 87 Ko en AVIF. Sur les captures d'écran, les aplats et les petites icônes, l'écart se réduit ou s'inverse : comparez les octets (les chiffres sont dans AVIF ou WebP). C'est le changement qui fait disparaître la recommandation « Servir les images dans des formats nouvelle génération » de PageSpeed Insights. Si vous hébergez les fichiers vous-même, 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. Avec CDN.com.tr, une seule URL suffit : la périphérie lit l'en-tête Accept du navigateur et choisit le format à chaque requête.

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.

Sur tout site derrière cdn.com.tr, l'optimisation des images convertit en périphérie : activez-la pour le compte ou pour une règle de diffusion, et les images JPEG et PNG partent vers les navigateurs compatibles en WebP, ou en AVIF si vous choisissez WebP + AVIF pour le compte, sans changer les URL de vos images. En pleine taille, une image nouvellement convertie n'est envoyée que si elle est plus légère que l'original ; si une conversion échoue, la périphérie sert l'image d'origine à la place. Le traitement est décompté de votre quota mensuel. Le vérificateur de format d'image montre dans quel format chacune de vos images arrive au navigateur. Notre guide du CDN d'images détaille le côté périphérie : une URL qui répond en plusieurs formats, le redimensionnement par l'URL et la raison pour laquelle chaque variante est un objet de cache à part.

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