Srcset sizes : servir la bonne image à chaque écran

Pourquoi une image responsive change le résultat de votre site

Sur la plupart des sites de PME, les images pèsent plus lourd que tout le reste de la page réuni. Prenez un smartphone qui télécharge la photo de 2 400 pixels prévue pour un grand écran : il charge des données qu'il n'affichera jamais. Résultat ? La page traîne, le visiteur attend, et une partie d'entre eux repart avant d'avoir vu votre offre.

Le design responsive s'occupe de la mise en page, en réorganisant les blocs selon la taille de l'écran. Une image responsive, au sens strict, demande davantage. Réduire la photo en CSS ne suffit pas : c'est le fichier lui-même qui doit correspondre à l'écran qui le réclame. Voilà le rôle de srcset et de son complément sizes, deux attributs de la balise img qu'on oublie volontiers quand un projet est livré à la hâte.

Côté référencement, l'enjeu est bien réel. Le poids des images agit directement sur le LCP, l'un des Core Web Vitals que Google suit pour juger l'expérience offerte par une page. Sur mobile, une image d'en-tête trop lourde explique très souvent un mauvais score. Pour creuser la question du poids des fichiers, notre guide pour optimiser les images de votre site web détaille compression et formats.

Comment le navigateur choisit une image : srcset, width et densité de pixels

Une idée simple d'abord, avant d'écrire la moindre ligne. Le navigateur lance le téléchargement des images très tôt : avant d'avoir calculé la mise en page, avant même d'avoir lu votre CSS. Quelle place occupera l'image ? Il l'ignore encore. Srcset et sizes sont là pour la lui souffler à l'avance.

Le descripteur x : la densité de pixels de l'écran

Sur les écrans récents, chaque pixel CSS correspond à plusieurs pixels physiques. C'est ce qu'on appelle la densité de pixels, ou device pixel ratio. Pour rester parfaitement net, un écran de densité 2 réclame une image deux fois plus large. Le descripteur x a été pensé pour ce cas précis.

Exemple : img src='logo.jpg' srcset='logo.jpg, logo-2x.jpg 2x' alt='Logo de l'entreprise'. L'image s'affiche sur 300 pixels CSS et existe en deux fichiers. L'écran classique reçoit la version 1x ; l'écran haute résolution, la version 2x. Je réserve cette méthode aux images dont la taille d'affichage ne bouge pas : un logo, une icône, une photo de profil dans un encart fixe.

Le descripteur w : la largeur réelle du fichier

Dès que l'image change de taille d'un écran à l'autre, x ne suffit plus. Place au descripteur w, qui donne la largeur intrinsèque de chaque fichier, en pixels. Par exemple : srcset='photo-480.jpg 480w, photo-800.jpg 800w, photo-1200.jpg 1200w'.

Méfiez-vous : w ne désigne pas la largeur d'affichage. Il décrit le fichier, rien d'autre. Une photo large de 800 pixels porte la mention 800w, où qu'elle apparaisse dans la page. Indiquer la place qu'elle y prendra, c'est le travail de sizes.

Ce que fait le navigateur de ces informations

Trois données entrent dans le calcul : la largeur d'affichage annoncée par sizes, la densité de l'écran, la liste des fichiers disponibles. Imaginez un téléphone de densité 3 où l'image occupe 360 pixels CSS. Il lui faut environ 1 080 pixels réels, et le navigateur retient le fichier le plus proche au-dessus de ce besoin.

Ce choix, vous le suggérez ; vous ne l'imposez pas. Connexion lente ? Le navigateur peut se rabattre sur une version plus légère. Version plus grande déjà en cache ? Il peut la réutiliser. C'est voulu : srcset décrit les options, le navigateur tranche. La documentation en anglais revient sans cesse sur cette formule, et elle a raison d'insister.

Écrire l'attribut sizes sans se tromper

De tous ces attributs, sizes est celui qui fait trébucher le plus de monde. Sa logique tient pourtant en une phrase : il traduit en HTML ce que votre CSS fait déjà. Vous connaissez la largeur de l'image à chaque point de rupture ? Alors vous savez écrire sizes.

La syntaxe : une condition, puis une largeur

Concrètement, sizes est une liste séparée par des virgules, où chaque élément associe une condition media à une largeur. La dernière largeur, sans condition, sert de valeur par défaut. Lecture de gauche à droite, arrêt à la première condition vraie : l'ordre compte donc.

• (max-width: 600px) 100vw : sur un écran de 600 pixels de large ou moins, l'image occupe toute la largeur du viewport.
• (max-width: 1024px) 50vw : jusqu'à 1 024 pixels, elle prend la moitié de l'écran.
• 800px : au-delà, elle ne dépasse jamais 800 pixels, quelle que soit la taille de la fenêtre.

Trois unités sont admises : les pixels, vw (pourcentage de la largeur du viewport) et les calculs via calc(). Les pourcentages simples, eux, sont refusés dans sizes. Votre image vit dans une colonne avec marges ? Une valeur comme calc(100vw - 32px) donnera une estimation plus juste.

Un exemple complet img srcset sizes

Prenons une image d'article qui occupe toute la largeur sur mobile et plafonne à 720 pixels sur ordinateur : img src='photo-800.jpg' srcset='photo-480.jpg 480w, photo-800.jpg 800w, photo-1440.jpg 1440w' sizes='(max-width: 760px) 100vw, 720px' width='1440' height='960' alt='Atelier de menuiserie vu de l'intérieur'.

La documentation MDN illustre ce principe avec un exemple devenu classique, aux fichiers nommés elva-fairy-480w.jpg et elva-fairy-800w.jpg. En anglais, vous y croiserez des tournures comme « you can » ou « if you want to », suivies du même raisonnement : décrire les fichiers, puis la place occupée. D'une langue à l'autre, rien ne change.

Sans sizes, que se passe-t-il ?

Des descripteurs w sans sizes ? Le navigateur part du principe que l'image occupe 100vw, soit toute la largeur de l'écran. En pleine largeur, ça tombe juste. Pour une vignette dans une grille de trois colonnes, en revanche, il récupère un fichier trois fois trop large. Sur les sites que nous auditons, aucune erreur ne revient plus souvent.

La valeur sizes auto et le lazy loading

Plus récente, la valeur sizes='auto' confie au navigateur le calcul de la largeur. Elle ne marche qu'avec les images en chargement différé (loading='lazy'), puisque la mise en page est alors déjà connue. Le support reste inégal. Mon conseil : vérifiez-le sur caniuse.com avant de vous y fier, et ajoutez toujours une valeur de secours après auto, par exemple sizes='auto, (max-width: 760px) 100vw, 720px'. Quand différer une image ? Notre article sur le lazy loading répond à la question.

La balise picture : direction artistique et formats d'image

Srcset et sizes déclinent une même image en plusieurs tailles. Il arrive pourtant qu'on veuille une image différente selon l'écran, ou un autre format selon le navigateur. La balise picture entre alors en scène : un élément qui regroupe plusieurs balises source et une balise img.

Recadrer selon l'écran avec picture et source media

Sur un écran large, une photo d'équipe panoramique rend bien. Sur un téléphone ? Les visages deviennent minuscules. D'où la direction artistique (art direction en anglais) : un recadrage serré pour le mobile, le plan large pour l'ordinateur.

Côté code, la balise picture contient <source media='(min-width: 900px)' srcset='equipe-large.jpg'>, puis la balise img src='equipe-serre.jpg' alt='L'équipe dans les locaux'. Chaque source est testée dans l'ordre. Ici, la condition fait loi : avec picture et source media, le choix cesse d'être une suggestion. Condition vraie, source utilisée.

Proposer AVIF ou WebP avec l'attribut type

Second usage de picture : les formats. On empile une source type='image/avif', une autre type='image/webp', puis l'img en JPEG. Chaque navigateur s'arrête au premier format qu'il sait lire. Tous les navigateurs courants lisent désormais le format WebP, la plupart l'AVIF. Rien n'empêche chaque source de porter son propre srcset et son propre sizes.

L'img de secours et l'attribut alt restent obligatoires

Retirez la balise img, et plus rien ne s'affiche : l'élément picture se contente de choisir la source. Affichage, dimensions, texte alternatif, tout repose sur l'élément img. L'attribut alt s'y place donc, une seule fois. Pour bien le rédiger, suivez la méthode de notre fiche sur l'attribut alt.

• Plusieurs tailles de la même image : srcset et sizes sur img suffisent.
• Un cadrage différent selon l'écran : picture avec source media.
• Plusieurs formats : picture avec source type.
• Les deux à la fois : picture, en combinant media et type sur les sources.

La méthode pas à pas pour votre site

Cinq étapes suffisent pour mettre en place des images responsive. Respectez leur ordre : chacune s'appuie sur la précédente.

• Relevez la largeur d'affichage de chaque type d'image à chaque point de rupture : en-tête, image d'article, vignette, logo.
• Retenez trois à cinq largeurs de fichiers qui couvrent ces besoins, sans oublier les écrans de densité 2 et 3.
• Générez ces versions automatiquement, via votre CMS, un outil de build ou un service d'images, plutôt qu'à la main.
• Écrivez srcset et sizes en partant de votre CSS, puis ajoutez width et height sur chaque img.
• Testez sur plusieurs écrans et contrôlez quel fichier est réellement téléchargé.

Fixer width et height pour éviter les sauts de page

Width et height ne forcent aucune taille d'affichage. Leur rôle : transmettre au navigateur le ratio de l'image. Il réserve ainsi la bonne hauteur avant le téléchargement, et le texte ne saute plus à l'arrivée de l'image. Côté CSS, ajoutez max-width: 100% et height: auto pour que l'image épouse son conteneur sans se déformer.

Combien de versions générer ?

Le nombre parfait n'existe pas. Trop peu de versions, et certains écrans héritent d'un fichier trop lourd ; trop, et stockage comme cache gonflent sans gain réel. Je recommande d'espacer les largeurs de sorte que deux versions voisines présentent un écart de poids sensible. Un en-tête en pleine page mérite davantage de déclinaisons qu'une petite vignette.

Vérifier le résultat sur un vrai device

Ouvrez les outils de développement de votre navigateur, onglet Réseau, cache désactivé. Rechargez. Le nom du fichier téléchargé s'affiche. Dans la console, la propriété currentSrc d'une image révèle la source retenue. Firefox comme Chrome offrent un mode d'affichage responsive pour simuler la largeur et la densité d'un téléphone.

Piège classique : le zoom du navigateur modifie la densité de pixels perçue. Zoom à 150 % ? Le navigateur réclame des fichiers plus grands. Testez donc à 100 %, puis confirmez sur un téléphone réel.

Les pièges fréquents et ce qui fait varier l'effort

Presque toujours, l'erreur naît d'un décalage entre HTML et CSS. Le code est valide, rien ne casse à l'œil nu, mais les mauvais fichiers partent sur le réseau. Voici les cas que nous croisons le plus.

• Un sizes oublié avec des descripteurs w : le navigateur suppose 100vw et télécharge trop large.
• Un sizes qui ne suit plus le CSS après une refonte : la grille a changé, l'attribut non.
• Des conditions mal ordonnées : une condition large placée en tête masque les suivantes.
• x et w mélangés dans un même srcset : c'est interdit, et le navigateur ignore l'attribut.
• Des fichiers étiquetés 800w qui ne font pas 800 pixels : le calcul du navigateur tombe faux.
• Une image d'en-tête en lazy loading : elle arrive trop tard et dégrade le LCP.

De quoi dépend le temps de mise en place

Tout dépend d'abord de votre outil. WordPress, par exemple, génère déjà plusieurs tailles et un srcset de base, mais son sizes par défaut reste souvent trop générique. Sur un site développé spécifiquement, le réglage se fait dans les gabarits : une fois le composant image bien écrit, chaque nouvelle page en profite. Nombre de gabarits, images anciennes à régénérer, besoin de direction artistique : voilà ce qui fait varier la charge.

Chez RankerSquare, les images responsive font partie du socle de chaque projet, pas des options. Comptez dès 19,90 € par mois en abonnement pour un site vitrine conçu pour vous ; les autres projets sont sur devis. Votre site actuel affiche de mauvais scores sur mobile ? Notre équipe de création de site internet peut chercher d'où vient le problème.

Questions fréquentes