HTML Academy · Leçon

Images adaptatives avec srcset et sizes

Servez des images de dimensions adaptées aux différentes densités d’écran.

Images adaptatives avec srcset et sizes est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 2 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 HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.

Le problème des images uniques

Servir une seule grande image à tous les appareils gaspille la bande passante sur les petits écrans :

Un téléphone doté d’un écran de 390 px n’a pas besoin d’une image de 2 400 px
Un écran 4K mérite une image de résolution supérieure à 96 ppp
Les images adaptatives fournissent la bonne image pour le bon écran

L’attribut srcset

srcset fournit une liste de sources d’image avec leur largeur :

<img
  src="photo-800.jpg"
  srcset="
    photo-400.jpg  400w,
    photo-800.jpg  800w,
    photo-1600.jpg 1600w
  "
  alt="Mountain landscape"
>
<!-- 400w, 800w, 1600w = intrinsic widths of each file -->
<!-- Browser chooses the best match for the device -->
<!-- src is the fallback for browsers that don't support srcset -->

Descripteurs de densité de pixels

Utilisez les descripteurs 1x, 2x et 3x pour les images de taille fixe proposées dans différentes résolutions :

<img
  src="logo.png"
  srcset="logo.png 1x, logo@2x.png 2x, logo@3x.png 3x"
  alt="Coddy logo"
  width="120"
  height="40"
>
<!-- 2x screens (Retina) get logo@2x.png -->
<!-- 3x screens (iPhone Pro) get logo@3x.png -->
<!-- 1x screens get logo.png -->

L’attribut sizes

sizes indique au navigateur la largeur d’affichage de l’image selon les différentes tailles de fenêtre d’affichage :

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1200px) 50vw,
         800px"
  alt="Landscape photo"
>
<!-- At ≤600px viewport: image takes 100% of viewport width -->
<!-- At ≤1200px viewport: image takes 50% -->
<!-- Otherwise: image is 800px wide -->

Comment le navigateur sélectionne une image

Le navigateur calcule : valeur de sizes × densité de pixels de l’appareil pour choisir une image dans srcset :

Fenêtre d’affichage de 600 px, DPR de 2×, taille = 100vw → image de 1 200 px nécessaire → sélection de 1600w
Fenêtre d’affichage de 1 200 px, DPR de 1×, taille = 50vw → image de 600 px nécessaire → sélection de 800w
Une fois l’image chargée, le navigateur la met en cache et peut ne pas la recharger

Valeur sizes par défaut

Sans sizes, le navigateur considère que l’image occupe toute la largeur de la fenêtre d’affichage (100vw) :

<!-- Without sizes: browser assumes 100vw -->
<!-- This causes it to download a very large image on wide screens -->
<!-- Always specify sizes if your image is not full-width -->

<img
  srcset="hero-800.jpg 800w, hero-1600.jpg 1600w"
  sizes="100vw"  <!-- explicit full-width -->
  src="hero-1600.jpg"
  alt="Hero image"
>

Descripteurs de largeur srcset et descripteurs x

Les deux modes de srcset :

Descripteurs de largeur (w) — avec sizes : sélection adaptative tenant compte de la mise en page
Descripteurs de densité de pixels (x) — images de taille fixe proposées dans plusieurs résolutions

Utilisez les descripteurs w pour la plupart des images adaptatives. Utilisez x pour les icônes, les logos et les éléments de taille fixe.

Générer des fichiers srcset

Outils qui génèrent des variantes d’images adaptatives :

Sharp (Node.js) — redimensionnement programmatique des images
Squoosh — comparaison visuelle dans le navigateur
Cloudinary / Imgix — redimensionnement à la demande fondé sur l’URL
Extensions Webpack / Vite — génération lors de la construction

srcset avec WebP et solution de repli

Combinez srcset avec <picture> pour prévoir une solution de repli de format :

<picture>
  <!-- Modern browsers: WebP -->
  <source
    type="image/webp"
    srcset="photo-400.webp 400w, photo-800.webp 800w"
    sizes="(max-width: 600px) 100vw, 50vw"
  >
  <!-- Fallback: JPEG -->
  <img
    srcset="photo-400.jpg 400w, photo-800.jpg 800w"
    sizes="(max-width: 600px) 100vw, 50vw"
    src="photo-800.jpg"
    alt="Mountain photo"
  >
</picture>

Direction artistique ou changement de résolution

Deux types de problèmes concernent les images adaptatives :

Changement de résolution — même image, résolutions différentes → utilisez srcset et sizes
Direction artistique — recadrage ou composition différente selon les écrans → utilisez <picture> avec <source media>

Vérifier les images adaptatives

Comment vérifier que votre srcset fonctionne :

Ouvrez DevTools → onglet Réseau → filtrez les images
Configurez la simulation d’appareil avec différentes tailles de fenêtre d’affichage et valeurs de DPR
Rechargez la page — vérifiez quel fichier le navigateur demande
Vérifiez également : Lighthouse → Performances → contrôle « Images correctement dimensionnées »

Compatibilité des navigateurs avec srcset

La compatibilité des navigateurs avec srcset est excellente :

Pris en charge par tous les navigateurs modernes (Chrome, Firefox, Safari et Edge)
La solution de repli src prend en charge les anciens navigateurs
Aucun polyfill n’est nécessaire pour une utilisation en production

Vérification rapide

Que indique l’attribut sizes au navigateur ?

Récapitulatif : srcset et sizes

Principes essentiels des images adaptatives :

srcset — liste de fichiers image avec leur largeur intrinsèque ou leur densité de pixels
sizes — conditions de média décrivant la largeur d’affichage de l’image
Le navigateur sélectionne la meilleure correspondance : valeur de sizes × DPR de l’appareil
Descripteurs de largeur (w) pour les images fluides ; x pour les éléments de taille fixe
Fournissez toujours src comme solution de repli

Questions Fréquemment Posées

La leçon « Images adaptatives avec srcset et sizes » est-elle gratuite ?

Oui — le texte complet de « Images adaptatives avec srcset et sizes » 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 HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Images adaptatives avec srcset et sizes » ?

Servez des images de dimensions adaptées aux différentes densités d’écran. Tu pratiques HTML 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 HTML Academy ?

Aucune expérience préalable n'est requise. HTML 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 2 sur 4.

Combien de temps prend la leçon « Images adaptatives avec srcset et sizes » ?

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 HTML Academy ?

Oui. Chaque leçon HTML 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

L’élément img : src, alt, width et height
Images adaptatives avec srcset et sizes
L’élément picture pour la direction artistique
figure et figcaption

← Retour à HTML Academy