Optimisation des images : chargement différé et formats WebP
Ajoutez loading=lazy aux images, diffusez les formats modernes WebP et AVIF, utilisez des images adaptatives avec srcset et sizes et définissez une largeur et une hauteur explicites pour éviter les décalages de mise en page.
Optimisation des images : chargement différé et formats WebP est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Les images dominent le poids des pages
Une page web médiane pèse environ 2 Mo, dont les images représentent à peu près la moitié. Optimiser les images est la tâche de performance qui offre le plus grand impact.
Formats modernes : WebP et AVIF
WebP est 25 à 35 % plus léger que JPEG à qualité comparable et est pris en charge par tous les navigateurs modernes. AVIF est encore plus léger (réduction de 50 %), mais son encodage est plus lent. Utilisez les deux avec une solution de repli.
L'élément picture
Utilisez <picture> pour servir AVIF s'il est pris en charge, puis WebP et enfin JPEG comme solution de repli.
<picture>
<source srcset="/photo.avif" type="image/avif">
<source srcset="/photo.webp" type="image/webp">
<img src="/photo.jpg" alt="Description" width="800" height="600">
</picture>Chargement différé natif
Ajoutez loading="lazy" aux images situées sous la ligne de flottaison. Le navigateur diffère leur chargement jusqu'à ce qu'elles s'approchent de la fenêtre d'affichage : aucun JavaScript n'est nécessaire.
<img src="/post-1.webp" alt="" width="800" height="450" loading="lazy">
<!-- Don't lazy-load the hero — it should load eagerly: -->
<img src="/hero.webp" alt="" width="1200" height="600" fetchpriority="high">Images adaptatives avec srcset et sizes
Servez des images plus petites sur les écrans plus petits. srcset répertorie les images candidates avec leur largeur ; sizes indique au navigateur quelle largeur l'image occupe à chaque point de rupture.
<img
src="/photo-800.jpg"
srcset="/photo-400.jpg 400w,
/photo-800.jpg 800w,
/photo-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 800px"
alt="" width="800" height="600">Pourquoi définir explicitement width et height
Le navigateur réserve l'espace en fonction des attributs width/height, ce qui évite un décalage de la mise en page à l'arrivée de l'image. Les navigateurs modernes calculent automatiquement le rapport largeur/hauteur à partir de ces attributs.
decoding="async"
Ajoutez decoding="async" pour permettre au navigateur de décoder l'image en dehors du fil d'exécution principal et ainsi le laisser afficher d'autres contenus.
<img src="/photo.webp" alt="" width="800" height="600" loading="lazy" decoding="async">CDN d'images
Les CDN d'images (Cloudinary, imgix, Vercel Image Optimization, Cloudflare Images) transforment les images à la volée : redimensionnement, conversion en WebP/AVIF, compression et diffusion depuis des caches périphériques.
<!-- Cloudinary auto-format and auto-quality -->
<img src="https://res.cloudinary.com/demo/image/upload/f_auto,q_auto,w_800/photo.jpg" alt="" width="800" height="600">Composant Image de Next.js
Le composant <Image> de Next.js gère automatiquement srcset adaptatif, conversion en WebP, chargement différé et espace réservé flou.
import Image from 'next/image';
<Image
src="/photo.jpg"
alt="Description"
width={800}
height={600}
placeholder="blur"
priority={isHero}
/>Compression des JPEG et PNG
Si vous ne pouvez pas passer à WebP, compressez au moins vos images : utilisez Squoosh (squoosh.app) pour des images ponctuelles, ImageOptim pour le traitement par lots ou sharp dans un script de compilation.
SVG pour les icônes et les logos
Utilisez SVG pour les icônes, les logos et toutes les illustrations vectorielles. Les SVG se redimensionnent parfaitement, sont très légers et peuvent être mis en forme avec CSS. Intégrez les petits SVG directement pour éviter une requête HTTP supplémentaire.
Vérification rapide
Quel attribut HTML indique au navigateur de différer le chargement d'une image jusqu'à ce qu'elle s'approche de la fenêtre d'affichage ?
Récapitulatif : optimisation des images
Utilisez des formats modernes (AVIF, WebP) avec l'élément picture. Ajoutez loading="lazy" sous la ligne de flottaison et fetchpriority="high" sur l'image principale. Définissez explicitement width/height pour éviter le CLS. Utilisez srcset/sizes pour les images adaptatives. Les CDN d'images automatisent les transformations. Le composant Image de Next.js s'en charge entièrement. Utilisez SVG pour les icônes.
Apprends HTML avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 41
- Leçons
- 163
Questions Fréquemment Posées
La leçon « Optimisation des images : chargement différé et formats WebP » est-elle gratuite ?
Oui — le texte complet de « Optimisation des images : chargement différé et formats WebP » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Optimisation des images : chargement différé et formats WebP » ?
Ajoutez loading=lazy aux images, diffusez les formats modernes WebP et AVIF, utilisez des images adaptatives avec srcset et sizes et définissez une largeur et une hauteur explicites pour éviter les d… Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « Optimisation des images : chargement différé et formats WebP » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?
Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Signaux essentiels du Web : LCP, FID et CLS
- Audits et évaluation avec Lighthouse
- Optimisation des images : chargement différé et formats WebP
- Division du code et routes chargées à la demande