Points de rupture d'images adaptatives : guide pratique WebP

Mis à jour le : June 28, 2026

Les points de rupture d'images adaptatifs sont les largeurs d'image que vous générez afin que les téléphones, tablettes, ordinateurs portables et écrans haute densité puissent télécharger un fichier proche de la taille qu'ils rendent réellement. En en choisissant trop peu, les utilisateurs mobiles reçoivent des pixels de bureau. En en choisissant trop, votre build, cache et CDN se remplissent de variantes que personne n'a besoin d'utiliser.

Ce guide couvre le juste milieu : mesurez l'espace de disposition (layout slot), générez une échelle WebP courte, écrivez srcset et sizes, puis vérifiez que le navigateur choisit le bon fichier depuis le CDN.

Réponse rapide : quels points de rupture d'images adaptatifs devriez-vous utiliser ?

Utilisez des points de rupture qui correspondent à l'espace image rendu réel, puis ajoutez une marge pour la densité des écrans Retina. Pour de nombreuses images d'articles, une échelle WebP utile est 480w, 720w, 960w, 1200w et 1440w. Pour les images de héros pleine largeur, ajoutez 1920w si le design peut réellement afficher cette largeur.

Ne copiez pas aveuglément les points de rupture CSS. Une page peut avoir un point de rupture de disposition de 1280px alors que l'image elle-même est affichée dans une colonne d'article de 720px. Dans ce cas, une image de 1440w pourrait déjà couvrir un affichage 2x, et une variante 1920w pourrait être perdue.

La méthode fiable est simple : inspectez la plus grande largeur d'espace CSS, multipliez par la densité la plus élevée que vous souhaitez prendre en charge, arrondissez à des largeurs sensées, et supprimez les quasi-doublons. Ensuite, associez ces fichiers à un attribut sizes véridique afin que le navigateur puisse choisir correctement.

Qu'est-ce que les points de rupture d'images adaptatifs ?

Les points de rupture d'images adaptatifs sont des largeurs de fichiers générées, et non nécessairement des points de rupture de design. Les points de rupture CSS changent la disposition. Les points de rupture d'images donnent au navigateur un menu de fichiers, tels que 480w, 720w, 960w et 1440w.

Le guide sur les images adaptatives de MDN explique le problème fondamental : le navigateur a besoin de suffisamment d'informations pour choisir une image de taille appropriée avant que la disposition ne soit terminée. L'attribut srcset liste les candidats, tandis que sizes décrit l'espace que l'image occupera.

Cette séparation est importante. Si srcset est correct mais que sizes ment, le navigateur peut toujours télécharger un fichier plus grand que nécessaire. Si sizes est correct mais que les fichiers générés sautent les largeurs utiles, le navigateur n'a pas de bon choix.

Pour les choix de format, associez les points de rupture à un format web moderne. WebP est un défaut sûr pour une large compatibilité, et AVIF peut valoir la peine d'être ajouté pour les grandes bibliothèques photographiques. Le compromis de format est couvert dans Comparaison AVIF vs WebP.

Comment choisir les largeurs de points de rupture ?

Commencez par l'espace rendu, pas par le fichier source. Une photo produit de 4000px n'a pas besoin d'une variante web de 4000px si le plus grand espace visible est de 760px. Elle a besoin de suffisamment de pixels pour paraître nette dans cet espace sur les écrans qui vous intéressent.

Utilisez cet ordre :

1. Ouvrez la page au format mobile le plus étroit, à une largeur tablette courante, à une largeur ordinateur portable et à une large largeur de bureau.
2. Mesurez l'espace image rendu en pixels CSS.
3. Multipliez chaque espace par 1x et 2x si vous souhaitez une prise en charge haute densité.
4. Arrondissez à une petite échelle comme 480, 720, 960, 1200, 1440 et 1920.
5. Supprimez les largeurs qui sont inférieures à environ 15 % de différence.
6. Arrêtez-vous à la plus grande largeur que le design peut utiliser.

J'ai encodé les quatre graphiques de cet article localement à 1400 par 788 en WebP. Chaque fichier mesuré fait moins de 35 KB car les assets sont des graphiques instructifs plats. Une photo prise avec un appareil photo aux mêmes dimensions sera généralement beaucoup plus grande, alors mesurez votre propre sortie avant d'établir des budgets.

Si un dossier entier a besoin de ces largeurs, utilisez une étape de redimensionnement répétable. Le Guide de redimensionnement par lots couvre le modèle en ligne de commande pour produire des images dérivées sans écraser les fichiers maîtres.

À quoi devraient ressembler srcset et sizes ?

Pour la plupart des images de contenu adaptatives, utilisez des descripteurs de largeur avec sizes. Les descripteurs de largeur indiquent au navigateur la vraie largeur en pixels de chaque candidat. La valeur sizes indique au navigateur quelle sera la largeur de l'image dans la disposition.

<img
  src="https://cdn.example.com/blog/photo-960.webp"
  srcset="
    https://cdn.example.com/blog/photo-480.webp 480w,
    https://cdn.example.com/blog/photo-720.webp 720w,
    https://cdn.example.com/blog/photo-960.webp 960w,
    https://cdn.example.com/blog/photo-1440.webp 1440w"
  sizes="(min-width: 900px) 720px, 92vw"
  width="1440"
  height="810"
  alt="Photo de produit affichée dans une disposition d'article adaptative">

L'exemple sizes dit : lorsque le viewport fait au moins 900px de large, l'espace image est de 720px ; sinon, l'espace est de 92 % du viewport. Un téléphone qui mesure 390px de large peut choisir un fichier proche de 720w pour un affichage 2x au lieu de télécharger un fichier 1440w.

Le guide web.dev sur les images adaptatives montre le même principe de sélection par le navigateur : donnez au navigateur des candidats et des informations de disposition précises afin qu'il puisse choisir avant que la requête d'image ne soit faite.

Utilisez un élément <picture> lorsque le recadrage ou le format change, pas pour chaque changement de taille normal. Par exemple, les images héros dirigées par l'art peuvent nécessiter un recadrage mobile carré et un recadrage desktop large. Les changements de largeur simples sont généralement plus faciles avec un seul img et un bon srcset.

Combien de points de rupture d'images est trop ?

Plus il y a de variantes, pas nécessairement mieux. Chaque largeur supplémentaire ajoute du temps de build, du stockage, des entrées de cache, une surface d'invalidation CDN et du travail de révision. Si deux candidats sont très proches, les économies de octets du navigateur peuvent être trop faibles pour justifier un autre fichier.

Utilisez un ensemble compact à moins que votre trafic et le volume d'images ne justifient un réglage plus fin. Cinq largeurs par image est souvent suffisant pour les pages d'articles et de marketing. Les sites produits avec zoom, grilles et multiples recadrages peuvent en nécessiter davantage, mais ils devraient être générés par un pipeline plutôt que manuellement.

Surveillez ces signes indiquant que l'échelle est trop dense :

• 640w, 700w et 760w existent tous pour la même image.
• Les journaux CDN montrent que certaines variantes ne sont presque jamais demandées.
• Le temps de build augmente car chaque téléversement produit dix dérivés ou plus.
• Les éditeurs ne peuvent pas dire quel fichier doit aller dans le frontmatter, Open Graph et le contenu du corps.
• L'assurance qualité visuelle commence à vérifier les noms de fichiers au lieu des pages rendues.

Surveillez ces signes indiquant que l'échelle est trop clairsemée :

• Les téléphones téléchargent le fichier 1440w ou 1920w pour des images corporelles ordinaires.
• Les écrans Retina de bureau paraissent flous car le plus grand candidat est trop petit.
• Le navigateur choisit toujours le même src de secours.
• PageSpeed ou Lighthouse signalent des images surdimensionnées sur mobile.

Les meilleures pratiques SEO pour les images de Google recommandent des URL d'images crawlables, un texte environnant utile et un alt text descriptif. La livraison adaptative doit préserver ces bases. Ne cachez pas les images importantes dans des arrière-plans CSS si elles doivent être indexées ou comprises comme du contenu de page.

Comment les points de rupture affectent-ils Core Web Vitals ?

Les points de rupture adaptatifs affectent la performance car les octets d'image dominent souvent le premier écran. Si l'image héros est également l'élément Largest Contentful Paint, le mauvais point de rupture peut faire attendre l'élément le plus important sur un fichier deux fois plus grand que nécessaire.

Le guide web.dev sur l'optimisation du Largest Contentful Paint recommande de rendre les images LCP probables découvrables tôt et de leur donner la priorité si approprié. Les points de rupture ne remplacent pas ce travail. Ils s'assurent que le fichier prioritaire est de la bonne taille.

Pour les images au-dessus du pli :

1. Définissez explicitement width et height pour réserver l'espace.
2. Évitez de faire un chargement paresseux (lazy loading) sur l'image LCP probable.
3. Utilisez fetchpriority="high" uniquement pour l'image qui en a réellement besoin.
4. Gardez sizes précis pour la disposition initiale.
5. Vérifiez le currentSrc sélectionné dans DevTools.

Pour les images sous le pli :

1. Effectuez un chargement paresseux des galeries et images d'articles normales.
2. Utilisez la même échelle de points de rupture à moins qu'un recadrage plus petit ne suffise.
3. Compressez après redimensionnement, pas avant.
4. Gardez l'alt text spécifique à l'image visible.
5. Vérifiez les cascades réseau mobile, et pas seulement le bureau.

Si votre problème est principalement un retard de découverte du contenu héros, lisez Extraction d'images critiques. Si les fichiers sont simplement trop lourds, passez par le Guide de ratio de compression d'image avant de modifier le balisage.

Quelles vérifications CDN effectuer avant la publication ?

Les points de rupture ne sont terminés que lorsque les URL finales fonctionnent. Un brouillon Markdown propre peut toujours échouer si le chemin du CDN est incorrect, si l'objet a le mauvais type de contenu, ou si la page référence accidentellement un fichier local /blog/....

Exécutez cette vérification avant publication :

Dans Chrome DevTools, inspectez l'image rendue et vérifiez currentSrc. Puis changez le viewport et le ratio de pixels de l'appareil. L'URL sélectionnée devrait parcourir l'échelle. Si elle ne change jamais, le balisage ou le composant d'image du framework pourrait remplacer vos candidats.

Pour un passage de publication plus large, utilisez la Liste de contrôle complète d'optimisation des images. Pour les budgets spécifiques au mobile, associez ceci au Guide d'optimisation des images mobiles. Les décisions de chargement paresseux sont couvertes séparément dans Charger les images avec paresse.

Liste de contrôle des points de rupture d'images adaptatives

Utilisez cette version courte lors de la révision d'une demande de tirage (pull request) :

• L'image maîtresse est plus grande que la variante générée la plus grande.
• Les largeurs générées correspondent aux espaces rendus réels.
• Les largeurs ne sont pas regroupées en incréments minuscules et peu utiles.
• Les fichiers WebP sont compressés après redimensionnement.
• srcset utilise les descripteurs de largeur corrects.
• sizes correspond à la disposition, et non à un 100vw deviné.
• L'image LCP probable n'est pas chargée paresseusement.
• Les images sous le pli sont chargées paresseusement.
• La largeur et la hauteur sont présentes pour éviter les décalages de mise en page (layout shift).
• Les URL CDN renvoient HTTP 200 avant publication.
• Les liens internes dirigent les lecteurs vers les étapes suivantes de compression, mobile et chargement paresseux.

L'ensemble de points de rupture utile est le plus petit ensemble qui maintient les images nettes sans forcer les téléphones à télécharger des fichiers de bureau. Mesurez l'espace, générez l'échelle, publiez les fichiers WebP, et confirmez que le navigateur choisit le fichier attendu.