Des images adaptatives qui économisent vraiment la bande passante : srcset, sizes, picture et tests

Une photo nette sur un ordinateur portable peut gaspiller de la bande passante sur un petit téléphone. Une miniature qui se charge vite sur mobile peut devenir floue dans une grande carte sur ordinateur. Les images adaptatives répondent à ces deux problèmes : elles proposent au navigateur plusieurs versions utiles du même visuel et les informations nécessaires pour choisir.

Le balisage devient simple lorsque l’on distingue trois rôles : srcset énumère les fichiers candidats, sizes décrit leur largeur d’affichage prévue et <picture> propose d’autres formats ou compositions. La difficulté consiste surtout à vérifier ce que le navigateur télécharge réellement.

Déterminer d’abord si l’image est un contenu ou un décor

Une photo de produit, une illustration d’article ou une image éditoriale constitue généralement un contenu. Elle appartient à un élément <img>, avec une alternative textuelle pertinente lorsque nécessaire. Un ornement peut relever du décor CSS. Une petite icône d’interface répétée peut convenir à un système d’icônes ou à une planche de sprites.

Le créateur de sprites CSS de Web2Generators définit des zones dans une planche existante et génère le CSS de positionnement ; il n’assemble pas des images indépendantes en un fichier. L’article Les sprites CSS sur le Web moderne : quand les utiliser et comment les tester explique pourquoi les sprites peuvent convenir à de petites icônes de taille fixe, sans remplacer les photographies adaptatives.

La distinction compte aussi pour l’accessibilité. Un élément <img> possède une sémantique d’image native et un attribut alt. Une image d’arrière-plan CSS n’en possède pas.

Étape 1 : adapter d’abord la mise en page CSS

Avant d’exporter une douzaine de variantes, vérifiez la largeur d’affichage de l’image. Pour une image de contenu classique :

.article-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

L’image remplit ainsi son conteneur sans déborder, mais cela ne demande pas au navigateur de télécharger un fichier plus petit. Un fichier de 2 400 pixels peut toujours être transféré vers un téléphone, puis réduit à 360 pixels CSS.

Mesurez l’emplacement de l’image, pas seulement la fenêtre du navigateur. Dans une disposition à deux colonnes, une carte peut occuper la moitié de la largeur de la fenêtre sur ordinateur, même si la page est très large. C’est cette information dont le navigateur a besoin à l’étape suivante.

Pour les maquettes, le générateur de Lorem Ipsum peut remplir les cartes avec des paragraphes et des listes de longueurs variées, afin de vérifier l’alignement des images lorsque le contenu s’allonge.

Étape 2 : utiliser srcset avec des descripteurs de largeur

Préparez plusieurs versions de la même photo, avec les mêmes proportions et le même cadrage. Ajoutez-les comme fichiers candidats. Les noms ci-dessous sont des exemples ; créez les fichiers aux largeurs indiquées avant d’utiliser ce balisage :

<img
  class="article-image"
  src="coast-720.jpg"
  srcset="
    coast-360.jpg 360w,
    coast-720.jpg 720w,
    coast-1200.jpg 1200w
  "
  sizes="(max-width: 700px) 100vw, 50vw"
  width="720"
  height="480"
  alt="Coastal path above a rocky shoreline"
>

Les descripteurs 360w, 720w et 1200w indiquent la largeur intrinsèque en pixels de chaque fichier. Ce ne sont pas des points de rupture. Vérifiez qu’ils correspondent aux dimensions réelles des fichiers.

La valeur de sizes décrit la largeur d’affichage CSS prévue ; elle ne fixe pas cette largeur. Votre mise en page CSS doit créer les emplacements décrits. Ici, l’image occupe approximativement toute la largeur de la fenêtre sur petit écran et la moitié au-delà de 700 pixels CSS. Si la carte se trouve dans un conteneur de largeur maximale limitée, utilisez une formule adaptée à ce conteneur. Employer 100vw partout conduit souvent à des téléchargements trop volumineux dans une grille sur ordinateur.

Le navigateur choisit une ressource selon ces informations, la densité de pixels, le zoom, son propre comportement et d’autres contraintes. Vous ne pouvez pas imposer le même choix à tous les appareils. Un emplacement de 360 pixels CSS ne télécharge pas forcément un fichier de 360 pixels : un écran de densité 2x peut sélectionner la version de 720 pixels.

Ce fonctionnement diffère des descripteurs de densité x, comme 1x, 2x, utiles lorsque l’image a une taille CSS fixe. Pour des colonnes flexibles, les candidats de largeur w associés à sizes sont généralement plus faciles à raisonner.

Étape 3 : utiliser picture pour changer de format ou de cadrage

<picture> répond à deux besoins distincts. Le choix du format propose des encodages plus récents avec une solution de repli. La direction artistique choisit un autre cadrage sur petit écran, par exemple un sujet en portrait à la place d’une composition panoramique.

Voici un exemple de choix de format avec repli :

<picture>
  <source type="image/avif" srcset="coast-360.avif 360w, coast-720.avif 720w, coast-1200.avif 1200w"
          sizes="(max-width: 700px) 100vw, 50vw">
  <source type="image/webp" srcset="coast-360.webp 360w, coast-720.webp 720w, coast-1200.webp 1200w"
          sizes="(max-width: 700px) 100vw, 50vw">
  <img class="article-image" src="coast-720.jpg"
       srcset="coast-360.jpg 360w, coast-720.jpg 720w, coast-1200.jpg 1200w"
       sizes="(max-width: 700px) 100vw, 50vw"
       width="720" height="480"
       alt="Coastal path above a rocky shoreline">
</picture>

Le navigateur examine les sources dans l’ordre et utilise la première compatible dont les conditions correspondent. L’élément <img> est indispensable : il fournit le repli, l’alternative textuelle et la sémantique de l’image. Chaque format doit proposer des dimensions adaptées pour combiner un encodage moderne et un choix de résolution. Une erreur de chargement de la source sélectionnée ne constitue pas un mécanisme fiable de repli vers le JPEG ; vérifiez l’URL de chaque candidat.

Utilisez <picture> avec des conditions media pour un cadrage réellement différent. Le changement de format ne justifie pas de redimensionner arbitrairement une composition. Si le cadrage mobile change les proportions, vérifiez soigneusement l’espace réservé ; les attributs width et height sur <source> peuvent aider les navigateurs compatibles à réserver les bonnes proportions.

Étape 4 : réserver l’espace pour éviter les décalages

Indiquez autant que possible les dimensions intrinsèques exactes des images de contenu. Le navigateur peut ainsi calculer leurs proportions avant l’arrivée des données :

<img class="article-image" src="team-portrait.jpg" width="900" height="600"
     alt="Project team working around a table">

Avec height: auto, ces dimensions réservent l’espace tout en laissant la largeur d’affichage diminuer. Pour une carte avec un cadrage de hauteur fixe, utilisez un conteneur aux proportions connues et object-fit: cover, puis vérifiez que les sujets importants ne sont pas coupés sur petit écran.

Le texte et les images interagissent. Testez des titres sur une ou trois lignes, des tailles de police agrandies pour l’accessibilité, des libellés traduits et une image qui ne se charge pas. Le Lorem Ipsum aide à éprouver les espacements, mais ne remplace ni le texte définitif ni les alternatives textuelles descriptives.

Étape 5 : choisir ce qui se charge tôt et ce qui peut attendre

Une grande image visible dès l’ouverture peut influencer le Largest Contentful Paint (LCP). Évitez loading="lazy" sur le visuel principal visible sans défilement. Pour une image principale importante, fetchpriority="high" peut être utile, mais sa multiplication crée une concurrence avec d’autres ressources essentielles.

Les images situées loin sous la première zone visible peuvent souvent utiliser le chargement différé natif :

<img class="article-image" src="detail-720.jpg" width="720" height="480"
     loading="lazy" decoding="async" alt="Detail of a wooden stair railing">

Le seuil exact de chargement différé dépend du navigateur. Une image en attente dans les outils de développement n’indique donc pas forcément une erreur ; faites défiler la page, puis observez le déclenchement de la requête.

Soyez particulièrement attentif aux grandes images d’arrière-plan CSS : elles peuvent être découvertes plus tard qu’un <img> dans le HTML. Utilisez-les lorsqu’elles sont décoratives, pas simplement pour éviter le balisage adaptatif. Le guide des images adaptatives de Google  détaille le dimensionnement, le chargement et les priorités. Sa version française comporte des formulations et des exemples de code imprécis ; comparez-les à la version anglaise  avant de les reprendre.

Étape 6 : examiner ce que le navigateur a réellement téléchargé

Ouvrez les outils de développement, sélectionnez Réseau, retirez les filtres restrictifs et rechargez sans cache lorsque le test le nécessite. Examinez les requêtes d’images et la taille réelle des ressources. Essayez ensuite une fenêtre étroite, une fenêtre plus large et un écran haute densité ou une émulation d’appareil. Sélectionnez l’élément image et examinez sa propriété currentSrc pour identifier l’URL choisie ; utilisez le panneau Réseau pour distinguer les octets transférés d’une réutilisation du cache. Effectuez un nouveau chargement à chaque taille : réduire une page déjà chargée peut conserver la grande image.

Cherchez des observations concrètes :

Pour configurer l’inspection dans Chrome, Firefox, Edge et Safari, consultez le guide de vérification des requêtes réseau. Lorsqu’une image paraît ancienne après un déploiement, l’article Pourquoi votre site sert d’anciens fichiers : déboguer Cache-Control et les ETags avec cURL aide à distinguer une référence incorrecte d’une réponse en cache.

Étape 7 : adopter les nouveaux formats sans perdre les solutions de repli

Les formats évoluent et leur prise en charge varie selon les versions. JPEG XL est par exemple pris en charge dans Firefox 158 selon ses notes de version (en anglais) , mais cela ne signifie pas que tous les visiteurs peuvent décoder image/jxl. Testez les versions utilisées par votre public et conservez un repli fonctionnel. Le guide MDN des formats d’images  décrit leurs caractéristiques et les questions de compatibilité. Certaines indications de compatibilité françaises sont anciennes ; consultez aussi la version anglaise  et les notes de version pour les changements récents.

Un déploiement fiable commence généralement par une base JPEG ou PNG, ajoute WebP ou AVIF lorsque le gain est utile et évalue les nouveaux formats par la mesure. Comparez la qualité visuelle et la taille des fichiers sur vos propres photographies ; le nom d’un format ne garantit pas que chaque image sera plus petite. Les chaînes de traitement automatisées doivent vérifier que chaque fichier transformé est lisible, possède le type MIME annoncé et conserve le cadrage voulu.

Notre actualité sur Firefox Enterprise explique pourquoi la configuration du navigateur fait aussi partie d’un plan de test. Vérifiez les versions et les politiques réellement utilisées par vos visiteurs, plutôt que de considérer un test réussi comme une preuve de compatibilité universelle.

Les images de boutons ou de commandes demandent une attention particulière. Une icône décorative peut avoir un alt vide ou être masquée aux technologies d’assistance, mais un bouton composé uniquement d’une icône doit toujours avoir un nom accessible. Préférez un libellé visible lorsque l’espace le permet.

Une vérification pratique avant publication

Choisissez une page représentative avec une grande image principale, une grille de cartes et une petite illustration dans le texte. Relevez les largeurs CSS finales des emplacements. Générez quelques largeurs de fichiers pertinentes pour chaque rapport de proportions. Vérifiez que le code indique les vraies largeurs intrinsèques et que sizes correspond à la mise en page. Ajoutez les dimensions explicites et des alternatives textuelles utiles. Vérifiez que l’image principale n’utilise pas le chargement différé, puis examinez les téléchargements à plusieurs largeurs de fenêtre et densités de pixels.

Comparez surtout les performances avant et après. Réduire les octets peut aider, mais des variantes inutiles, de mauvais cadrages ou une découverte tardive des images peuvent annuler le gain. Les images adaptatives doivent améliorer la page sans rendre le contenu plus difficile à comprendre.

Si vous travaillez aussi sur un groupe de petites icônes d’interface, le créateur de sprites CSS de Web2Generators permet de définir les zones d’une planche existante une fois les grandes images de contenu correctement prises en charge.