Guide : Responsive Images (srcset)

TL;DR — Responsive images let a navigateur charger a right-sized version of a picture au lieu de un giant fichier — a petit un on a phone, a big un on a desktop. Vous do it with the srcset and sizes attributes on votre <img> tag (liste the sizes vous have; le navigateur picks). Ce doesn’t directement boost votre rankings, but it rend pages faster and arrête les from “jumping” as images charger, and speed is something Google measures.

Ce que responsive images are

A “responsive” image adapts to the device looking at it. Au lieu de sending the même huge photo to a phone and a desktop, vous give le navigateur a few versions at différent sizes and let it grab the un que fits. Phones obtenir a petit fichier; big screens obtenir a big un. Moins wasted données, faster pages.

Là are two façons to do ce, and it’s worth knowing qui is qui:

• srcset + sizes on <img> — the courant un. Même picture, différent sizes. Vous liste ce que vous have and le navigateur chooses. Ce is appelé resolution switching.
• The <picture> element — pour quand vous vouloir a genuinely différent image at différent sizes (dire, a wide crop on desktop and a tall, tight crop on mobile), or a modern fichier format with a fallback. Ce is appelé art direction, and la plupart sites don’t besoin it.

The basic version

Here’s ce que resolution switching semble comme:

<img
  src="puppy-1000.jpg"
  srcset="puppy-1000.jpg 1000w, puppy-2000.jpg 2000w, puppy-3000.jpg 3000w"
  sizes="(max-width: 600px) 480px, 1000px"
  width="1000" height="1000"
  alt="Puppy with balloons" />

• src is votre normal, always-there fallback. Garder it.
• srcset listes the versions vous have and how wide chaque un is (1000w = 1000 pixels wide).
• sizes indique le navigateur how big the image va en réalité apparaître so it peut pick the correct fichier avant it loads anything.
• width and height reserve space so lune page doesn’t jump autour pendant que the image loads.
• alt is the même description you’d toujours écrire. Garder it identical à travers every version.

Pourquoi bother (the honest réponse)

Responsive images don’t earn vous a ranking “boost.” Ce que ils do is faire pages charger faster and arrêter the layout from shifting — and ceux are choses Google measures as partie of page experience. Si a speed outil (Lighthouse, PageSpeed Insights) is nagging vous to “properly size images,” srcset/sizes is the fix it’s asking pour.

Un plus chose: ce doesn’t modifier ce que montre up in Google Images. Google indexes the image in votre src attribute — the responsive variants are simplement delivery. So garder votre alt text, filename, and the principal image URL the même aucun matter qui version le navigateur loads.

Vouloir the precise version — w vs x descriptors, quand vous en réalité besoin <picture>, the LCP and layout-shift mechanics, and the mobile-indexing rules — switch to the Avancé tab.

TL;DR — Two jobs, un syntax family. srcset/sizes on <img> = resolution switching (même image, navigateur picks best-fit — a suggestion); <picture> = art direction or format switching (author-dictated crops/formats — a command). La plupart sites seulement besoin the premier. Responsive images are pas a direct ranking signal and don’t modifier ce que Google indexes — Google indexes the src URL, so garder alt text, filenames, and image URLs stable à travers breakpoints (indexation mobile-first). The réel payoff is Core Web Vitals: right-sizing images is the fix behind Lighthouse’s “Properly size images” audit (fails at a 4KiB gap), and width/height (or aspect-ratio) — pas srcset — is ce que empêche CLS. Don’t lazy-load the LCP image. I reuse the exact srcset + width/height pattern from my Ahrefs CLS piece.

Two différent jobs, un syntax family

Everything in ce topic collapses into two mechanisms, and half the confusion out là comes from mixing les up:

1. Resolution switching — the même image at différent sizes or pixel densities. Vous give le navigateur a menu with srcset and sizes on the <img>, and the navigateur decides qui fichier to récupérer fondé on the viewport and screen density. Ce is the courant cas.
2. Art direction — a genuinely différent image per condition: a wide crop on desktop, a tight vertical crop on mobile, or a différent fichier format entirely. Ici vous dictate the choice with the <picture> element.

The web.dev Apprendre: Responsive images course frames the difference exactly correct: with srcset le navigateur obtient suggestions, whereas “the picture element gives commands.” And the scope-setting line worth tattooing on the wall, aussi from web.dev: “Vous probably won’t besoin to utiliser the picture element pour la plupart of votre responsive images — the srcset and sizes attributes on the img element cover a lot of utiliser cas.” Reach pour <picture> seulement quand vous en réalité besoin a différent image, pas a différent size of the même un.

srcset and sizes — resolution switching

w-descriptors vs. x-descriptors

srcset takes a comma-separated liste of candidate fichiers, chaque tagged with a descriptor. Là are two kinds:

• Width descriptors (w) — vous state chaque file’s intrinsic pixel width (puppy-2000.jpg 2000w). Le navigateur combines que with votre sizes valeur to fonctionner out qui fichier meilleur fits the space and the device’s pixel density. Ce is the flexible option and ce que you’ll utiliser la plupart of the temps.
• Pixel-density descriptors (x) — vous state qui fichier is pour qui device pixel ratio (logo.png 1x, logo@2x.png 2x). Utiliser ces pour fixed-size images (an avatar, a logo) où the affiché size jamais changements; vous don’t besoin sizes with x descriptors.

Rule of thumb: fluid, content-width images → w descriptors + sizes; fixed-size UI images → x descriptors.

Pourquoi sizes matters (and ce que se produit si vous skip it)

With w descriptors, sizes isn’t optional cosmetics — it’s how le navigateur knows how big the image va render so it peut choisir avant layout. Per web.dev, sizes “indique le navigateur ce que size vous expect the image to be affiché at sous différent conditions,” as a comma-separated liste of media conditions and widths:

sizes="(max-width: 600px) 480px, 1000px"

Lire it as: “si the viewport is 600px or narrower, the image va be à propos de 480px wide; sinon, à propos de 1000px.” Omit sizes and le navigateur assumes the image fills the complet viewport width (100vw) — so on a wide screen it may pull votre largest fichier pour an image that’s en réalité rendering at 400px, quietly defeating the whole point. Manquant sizes is the unique la plupart courant srcset mistake.

Don’t guess at ceux width valeurs from the layout in votre head — vérifier the image’s réel rendered CSS width in le navigateur (DevTools → Elements → the computed width of the <img> box) at chaque breakpoint vous care à propos de, and définir sizes to match. A sizes valeur que doesn’t match the réel rendered width encore causes the navigateur to select the incorrect candidate même though the markup is syntactically correct — syntax validation alone won’t catch que; voir the currentSrc vérifier ci-dessous to confirmer ce que en réalité chargé.

Worked exemple (my reusable pattern)

Ce is the exact pattern from my Ahrefs piece, Ce que Is Décalage cumulatif de mise en page (CLS) & How To Améliorer It, expanded with sizes:

<img
  src="puppy-1000.jpg"
  srcset="puppy-1000.jpg 1000w,
          puppy-2000.jpg 2000w,
          puppy-3000.jpg 3000w"
  sizes="(max-width: 600px) 480px, 1000px"
  width="1000" height="1000"
  alt="Puppy with balloons" />

Every piece is load-bearing: src is the fallback and l’URL Google indexes; srcset listes the candidates with w descriptors; sizes indique le navigateur the rendered width; width/height reserve space (the CLS fix — plus ci-dessous); alt stays identical aucun matter qui fichier loads.

The picture element — art direction and format switching

Quand vous en réalité besoin it

Utiliser <picture> pour two choses srcset can’t do:

1. Art direction — a différent crop per breakpoint. web.dev’s exemple: on a narrow phone vous pourrait serve a tall, tight crop; on a wide desktop, a short, wide un. Même subject, deliberately différent framing.
2. Format switching — offer AVIF/WebP with a JPEG fallback via <source type="…">, letting le navigateur prendre the premier format it supports. Ce ties straight back to the format guidance on the Image SEO hub.

The syntax (and the fallback rule)

The <picture> element wraps un or plus <source> elements and toujours ends with a plain <img>:

<!-- Art direction: different crop per breakpoint -->
<picture>
  <source media="(max-width: 600px)" srcset="hero-crop-mobile.jpg">
  <img src="hero-crop-desktop.jpg" width="1200" height="675"
       alt="Product hero shot">
</picture>

<!-- Format switching: modern format with a fallback -->
<picture>
  <source type="image/avif" srcset="hero.avif">
  <source type="image/webp" srcset="hero.webp">
  <img src="hero.jpg" width="1200" height="675" alt="Product hero shot">
</picture>

Que trailing <img src> n’est pas optional. Google states it directement: per section 4.8.1 of the HTML Standard, “assurez-vous que vous provide an img element as a fallback with a src attribute quand en utilisant the picture element.” It’s the fichier older navigateurs and robots d’exploration fall back to — and, à nouveau, the un Google indexes.

Fait srcset aider SEO? Direct vs. indirect

Here’s the framing every competing guide fumbles, so I’ll be blunt.

Directement: aucun. Responsive-image markup n’est pas a ranking signal the façon texte alternatif or filenames are pour recherche d’images. Ajout srcset doesn’t lift votre positions, and it doesn’t modifier ce que apparaît in Google Images. Google indexes the image referenced in src; the srcset/<picture> variants are a delivery mechanism, pas separately indexable assets. Garder votre alt text, filename, and données structurées attached to que principal src image.

Indirectly: yes, and it’s un of the biggest levers vous have. Right-sized images are the la plupart effective concrete fix pour two Core Web Vitals — LCP and CLS — qui feed Google’s page-experience signals. That’s the whole payoff. It’s the même shape as the WebP/AVIF story on the Image SEO hub: aucun boost pour the format itself, the win is speed.

Responsive images and LCP

Oversized images are un of the la plupart courant causes of a slow Largest Contentful Paint, and responsive images are Lighthouse’s recommended fix. The Lighthouse “Properly size images” audit listes “tout images in votre page que aren’t appropriately sized, along with the potential savings” — anything bigger than it needs to be “simplement results in wasted bytes and slows bas page charger temps.” Its fix, verbatim: “With responsive images, vous generate multiple versions of chaque image, and alors specify qui version to utiliser in votre HTML or CSS en utilisant media requêtes, viewport dimensions, and so on.”

Two specifics worth knowing:

• The échec threshold is 4KiB. Lighthouse seulement flags an image quand “the rendered size is au moins 4KiB plus petit que the réel size.” Petit overshoots don’t count; serving a 3000px fichier into a 400px slot fait.
• A tooling shortcut. Google recommends RespImageLint, “a utile bookmarklet pour identifying the optimal srcset and sizes valeurs pour votre images.” Run it avant vous hand-calculate breakpoints.

Don’t lazy-load the LCP image

Ce is the rule personnes break la plupart. srcset on votre hero is fine — but jamais pair it with lazy chargement on the LCP element. The largest above-the-fold image devrait charger eagerly with fetchpriority="high", exactly as the Image SEO hub covers. And quand vous construire a responsive <picture> hero, garder the swap logic native: Google warns que it “won’t load content that requires user interactions” comme swiping or clicking, so a JS scheme que seulement loads the réel image après interaction hides it from Google.

Responsive images and CLS

Here’s the trap: srcset alone ne fait pashing pour layout shift. Resolution switching decides qui fichier loads; it doesn’t reserve space pour it. Left sans dimensions, per web.dev’s Optimize CLS guide, “as images load, text shifts down the page to make room for them” — parce que the space “can’t be allocated pour it jusqu’à le navigateur starts to download it and peut determine its dimensions.”

The fix is explicit dimensions, and it composes with responsive markup:

• Définir width and height attributes on the <img>. Modern navigateurs “définir the par défaut aspect ratio of images fondé on an image’s width and height attributes,” so ceux two numbers reserve the correct box avant quelconque srcset variant downloads. (web.dev)
• Pair les with height: auto in CSS pour fluid containers. Ce is the partie que semble contradictory but isn’t: web.dev’s propre guidance is to “utiliser CSS to resize the image to the width of the container” and “définir height: auto; to éviter en utilisant a fixed valeur pour the image height.” The HTML attributes définir the intrinsic aspect ratio; the CSS lets the image scale fluidly. Ensemble ils prevent CLS and stay responsive.
• Or utiliser CSS aspect-ratio to reserve the space quand vous pouvez’t définir attributes.

Qui kills a persistent myth: width/height attributes don’t break fluid layouts. Attributes + height: auto is the correct combo, pas a conflict. I walk via the complet layout-shift mechanics in my Ahrefs CLS article; La version courte is “reserve the space so that there’s no shift” and let the image fill it.

Indexation mobile-first implications

Google indexes primarily the mobile version of votre pages, so two rules matter plus que ils utilisé to quand you’re serving responsive variants:

• Garder texte alternatif identical à travers breakpoints. Google’s indexation mobile-first meilleur practices dire to “assurez-vous que the mobile site has the même texte alternatif pour images as the desktop site.” An art-directed mobile crop doit pas drop context Google nécessite.
• Garder image URLs stable. Don’t utiliser URLs que modifier every temps lune page loads pour images. Ce dovetails with Google’s Image SEO guidance to consistently référence the image with the même URL so it peut cache and reuse it. Responsive CDNs que mint a fresh URL per requête break ce — pin stable URLs pour votre variants.

Google’s propre summary of pourquoi to bother is plain: “designing responsive web pages leads to meilleur utilisateur experience, since personnes peut accès les à travers a plethora of device types.”

Ce que à propos de Bing?

There’s aucun Bing-specific guidance on srcset, sizes, or the <picture> element — Bing’s public documentation doesn’t adresse responsive-image markup at tout. So don’t justify responsive images with a Bing algorithm hook; the cas is performances and UX, qui Bing (comme Google) treats as page-experience quality plutôt que something vous peut point at a documented responsive-images rule pour.

Erreurs fréquentes

• Forgetting sizes with w descriptors — le navigateur assumes 100vw and may récupérer votre biggest fichier pour a petit slot.
• Dropping the fallback src on <picture> — a spec violation Google explicitly flags, and it’s l’URL robots d’exploration index.
• Mismatched width/height ratio vs. the actually-served image — encore causes shift.
• Lazy-loading the LCP hero — delays LCP pour aucun raison; charger it eagerly with fetchpriority="high".
• Regenerating image URLs per requête — breaks Google’s mise en cache and the mobile-first “stable URL” rule.
• Reaching pour <picture> quand srcset/sizes voudrait do — unnecessary complexity; web.dev dit la plupart sites don’t besoin it.

Où ce sits

Ce is the sizing-and-delivery deep dive sous the broader Image SEO hub — the performances half of image SEO, parallel to how the texte alternatif guide handles the image-search half. Pour the layout-shift mechanics in complet, voir my Ahrefs CLS article; pour LCP, fetchpriority, and the chargement strategy, that’s Core Web Vitals fonctionner wearing an image hat.

AI summary

A condensed prendre on the Avancé version:

• Two mechanisms, un family. srcset/sizes on <img> = resolution switching (même image, navigateur picks best-fit — a suggestion). <picture> = art direction or format switching (author-dictated crops/formats — a command). La plupart sites seulement besoin srcset/sizes.
• Descriptors: w (width) descriptors besoin a sizes attribute and cover fluid, content-width images; x (pixel-density) descriptors suit fixed-size UI images and don’t besoin sizes.
• sizes is mandatory with w descriptors — omit it and le navigateur assumes 100vw, souvent fetching the largest fichier needlessly. La plupart courant srcset mistake.
• Pas a direct ranking signal. Responsive markup doesn’t modifier ce que Google indexes — Google indexes the src URL; variants are delivery seulement. Garder texte alternatif, filenames, and données structurées on the principal src image.
• LCP payoff: oversized images are a top causer of slow LCP; responsive images are Lighthouse’s recommended fix (“Properly size images” audit; fails at a 4KiB gap; RespImageLint helps pick srcset/sizes).
• CLS: srcset alone ne fait pashing pour shift — définir width/height attributes (or CSS aspect-ratio), paired with height: auto pour fluid layouts. Attributes + height: auto is the correct combo, pas a conflict.
• Jamais lazy-load the LCP image; charger it eagerly with fetchpriority="high", and garder responsive swaps native (Google won’t charger interaction-triggered content).
• Indexation mobile-first: même texte alternatif and stable image URLs à travers breakpoints; don’t mint a fresh URL per requête.
• Bing: aucun dedicated responsive-images guidance — justify the fonctionner on performances/UX.

Documentation officielle

Primary-source documentation and developer guidance.

Google — Search

• Google Images meilleur practices — the srcset remarque, the <picture> fallback-src requirement, same-URL guidance, and the responsive-design rationale.
• Indexation mobile-first meilleur practices — même texte alternatif and stable image URLs à travers mobile and desktop; don’t lazy-load principal content on interaction.

Google — web.dev (developer guidance)

• Apprendre: Responsive images — srcset complements src; how sizes and media conditions fonctionner.
• Apprendre: The picture element — quand vous besoin <picture>, art direction, and “suggestions vs. commands.”
• Optimize Décalage cumulatif de mise en page — width/height attributes, aspect ratio, and height: auto pour fluid images.
• Récupérer Priority API — fetchpriority="high" pour the LCP image.

Chrome DevTools / Lighthouse

• Correctement size images (uses-responsive-images) — the audit, the 4KiB threshold, and the RespImageLint bookmarklet.

MDN

• En utilisant responsive images in HTML — the référence pour srcset, sizes, w/x descriptors, and <picture> syntax.

Quotes from the source

On-the-record statements from Google’s documentation and developer guidance. Où a page exposes the text, the lien is a deep lien que jumps to the quoted passage.

Google — Image SEO docs

• “The srcset attribute allows specifying different versions of the same image, specifically for different screen sizes.” Jump to quote
• “Designing responsive web pages leads to better user experience, since people can access them across a plethora of device types.” Source
• On keeping image URLs stable: “consistently reference the image with the same URL, so that Google can cache and reuse the image.” Jump to quote

Google — Indexation mobile-first docs

• “Make sure that the mobile site has the same alt text for images as the desktop site.” Jump to quote
• “Don’t use URLs that change every time the page loads for images.” Jump to quote

web.dev — srcset vs. picture

• “Where the srcset attribute gives suggestions to the browser, the picture element gives commands.” Jump to quote

Me — on the CLS fix

• “Reserve the space so that there’s no shift” and the image simply fills it. Jump to quote

Copy-paste responsive image patterns

Three patterns que cover almost every réel cas. Tout of les garder a fallback src, explicit width/height (the CLS fix), and identical alt text.

1. Resolution switching — the everyday <img srcset> (my reusable pattern)

<img
  src="puppy-1000.jpg"
  srcset="puppy-1000.jpg 1000w,
          puppy-2000.jpg 2000w,
          puppy-3000.jpg 3000w"
  sizes="(max-width: 600px) 480px, 1000px"
  width="1000" height="1000"
  alt="Puppy with balloons" />

Pair it with ce CSS so the image scales fluidly sans causing layout shift:

img {
  max-width: 100%;
  height: auto; /* with width/height attributes set, this prevents CLS */
}

2. Fixed-size image — pixel-density (x) descriptors, aucun sizes nécessaire

<img
  src="logo.png"
  srcset="logo.png 1x, logo@2x.png 2x"
  width="200" height="60"
  alt="Company logo" />

3. The LCP hero — eager + élevé priority, and format fallback via <picture>

<picture>
  <source type="image/avif" srcset="hero.avif">
  <source type="image/webp" srcset="hero.webp">
  <img
    src="hero.jpg"
    width="1200" height="675"
    fetchpriority="high"
    loading="eager"
    alt="Product hero shot" />
</picture>

Rules baked into ces:

• Toujours garder the trailing <img src> — it’s the fallback and l’URL Google indexes.
• With w descriptors, sizes is requis; sans it le navigateur assumes 100vw.
• With x descriptors, omit sizes.
• Jamais ajouter loading="lazy" to the LCP image (pattern 3) — que delays LCP; utiliser fetchpriority="high" à la place.

To trouver the correct srcset/sizes valeurs au lieu de guessing, run RespImageLint, the bookmarklet Google recommends, over the live page.

Qui un do vous en réalité besoin: srcset/sizes or picture?

Fonctionner via the réel branch the article draws entre resolution switching and art direction / format switching.

La plupart sites arrêter at the premier branch and jamais leave srcset/sizes — reach pour <picture> seulement quand the image itself nécessite to modifier, pas simplement its size.

Ce que pas to do

Six concrete mistakes the article calls out, chaque with pourquoi it’s incorrect and the fix.

• Forgetting the sizes attribute with w-descriptors. Pourquoi it’s incorrect: sans sizes, le navigateur assumes the image fills the complet viewport width (100vw), so it may récupérer votre biggest candidate pour a slot que renders beaucoup plus petit. Do à la place: toujours pair w-descriptor srcset with a sizes valeur que matches how the image en réalité renders at chaque breakpoint.
• Dropping the fallback <img src> on <picture>. Pourquoi it’s incorrect: it’s a spec violation Google explicitly flags, and it’s l’URL robots d’exploration and Google Images en réalité index — aucun fallback signifie aucun indexable image. Do à la place: every <picture> block ends with a plain <img src="...">, jamais simplement <source> elements.
• Mismatched width/height ratio versus the actually-served image. Pourquoi it’s incorrect: the attributes définir the reserved aspect ratio; si the réel image doesn’t match it, the layout encore shifts une fois the image loads. Do à la place: garder the width/height (or aspect-ratio) ratio identical to the image fichiers you’re en réalité serving à travers tout srcset/<picture> variants.
• Lazy-loading the LCP hero image. Pourquoi it’s incorrect: loading="lazy" delays the récupérer of exactly the image Plus grand affichage de contenu is timing, pushing LCP plus tard pour aucun benefit. Do à la place: charger the LCP image eagerly with fetchpriority="high", jamais loading="lazy".
• Regenerating image URLs on every requête. Pourquoi it’s incorrect: it breaks Google’s image mise en cache and violates the indexation mobile-first rule contre URLs que modifier every temps lune page loads. Do à la place: pin stable, consistent URLs per image variant so Google peut cache and reuse les.
• Reaching pour <picture> quand srcset/sizes voudrait do. Pourquoi it’s incorrect: it’s unneeded complexity — web.dev is explicit que la plupart sites don’t besoin <picture> at tout. Do à la place: par défaut to srcset/sizes resolution switching; seulement ajouter <picture> quand vous genuinely besoin a différent crop or format per condition.

Courant problèmes

Symptom-first lookup pour the two responsive-image problems readers en réalité hit.

Layout encore shifts (CLS) même though srcset is définir up

• Symptom: Lighthouse or PageSpeed Insights encore reports layout shift on an image, or vous pouvez visually voir content jump as the image loads, despite having a working srcset/sizes.
• Probable causer: srcset alone ne fait pashing pour layout shift — it seulement decides qui fichier loads, pas how beaucoup space to reserve. The image has aucun width/ height attributes (or CSS aspect-ratio), so le navigateur can’t allocate space jusqu’à the fichier starts downloading and its dimensions are connu.
• Fix + confirmer: Ajouter explicit width and height attributes to the <img> (or définir CSS aspect-ratio), and pair les with height: auto in CSS so the image encore scales fluidly. Confirmer by re-running the CLS vérifier (Lighthouse or a live CrUX vérifier) and watching pour the shift to disappear — the reserved box devrait now hold its size avant the image finishes chargement.

Lighthouse flags “Properly size images” / an oversized image is chargement

• Symptom: The Lighthouse “Properly size images” audit listes un or plus images with wasted bytes, or une page feels slow to reach its Plus grand affichage de contenu même though the image itself semble fine.
• Probable causer: The rendered size of the image is au moins 4KiB plus petit que the réel fichier being served — commonly parce que there’s aucun srcset at tout, or sizes is manquant so le navigateur defaulted to 100vw and pulled the largest candidate pour a petit slot.
• Fix + confirmer: Ajouter (or correct) srcset with appropriately sized candidates and a sizes valeur matching the réel rendered width; run RespImageLint to vérifier the valeurs au lieu de guessing. Confirmer by re-running the Lighthouse “Properly size images” audit and checking the flagged image ne … plus apparaît (or its potential savings drop ci-dessous the 4KiB threshold).

Cheat sheet: descriptors, picture vs. srcset, and the CLS/LCP rules

Validation tests

Réussir/échouer checks que confirmer a responsive-image modifier en réalité took effect.

Properly-sized images ship correctement

Tester to run: Run the Lighthouse “Properly size images” audit (Chrome DevTools > Lighthouse > Performances, or PageSpeed Insights) on lune page vous simplement mis à jour. Attendu result: The image vous fixed ne … plus apparaît in the audit’s flagged liste, or its potential savings drop ci-dessous the 4KiB gap threshold. Échec interpretation: Si it’s encore flagged, soit srcset candidates are encore aussi grand pour the rendered size, or sizes is manquant/incorrect and le navigateur is encore defaulting to 100vw. Monitoring window: Immediate — re-run correct après deploying the modifier. Rollback trigger: The audit encore flags the même image with unchanged potential savings après confirming sizes matches the réel rendered width.

srcset/sizes valeurs are en réalité optimal

Tester to run: Run RespImageLint (the bookmarklet Google recommends) contre the live page. Attendu result: Aucun warnings à propos de oversized candidates or a manquant/incorrect sizes valeur. Échec interpretation: A warning signifie soit a candidate is unnecessarily grand pour its breakpoint or sizes doesn’t match the container’s réel rendered width. Monitoring window: Immediate, on the live URL après deploy. Rollback trigger: RespImageLint garde flagging the même image après you’ve corrected the sizes valeur.

Le navigateur en réalité selected the candidate vous attendu

Tester to run: Passing the Lighthouse/RespImageLint checks confirms votre markup is valid — it doesn’t confirmer le navigateur picked the fichier vous intended at a donné viewport. Charger lune page at the breakpoint vous care à propos de, ouvrir DevTools, select the <img>, and vérifier its currentSrc property in the console ($0.currentSrc in Chrome/Firefox DevTools) — MDN’s propre exemple fait exactly ce: comparing currentSrc contre the attendu filename to confirmer qui candidate chargé. Cross-check contre the Network tab to voir qui fichier was en réalité requested. Repeat at votre narrow and wide breakpoints, and at 1x and 2x device pixel ratio si vous emulate it. Attendu result: currentSrc matches the candidate fichier you’d expect pour que viewport width and pixel density, and the Network tab montre seulement que fichier was récupéré. Échec interpretation: Si currentSrc renvoie a candidate bigger or plus petit que attendu, soit the sizes valeur doesn’t match the image’s réel rendered CSS width (voir “Why sizes matters” in the Avancé tab) or a srcset descriptor is incorrect. Remarque que navigateur selection is implementation-defined — the HTML Standard leaves the exact choice among valid candidates to le navigateur (density, zoom, and network conditions peut tout factor in), so don’t expect byte-identical behavior à travers navigateurs; vérifier pour “reasonable candidate,” pas un fixed réponse. Monitoring window: Immediate — vérifier per breakpoint correct après deploying. Rollback trigger: currentSrc garde returning an oversized candidate at a narrow viewport après you’ve corrected sizes to match the réel rendered width.

Aucun layout shift from the image

Tester to run: Vérifier Décalage cumulatif de mise en page pour lune page — Lighthouse’s CLS score, or a live CrUX/PageSpeed Insights field-data vérifier pour l’URL. Attendu result: CLS attributable to the image drops to (near) zero une fois width/height (or aspect-ratio) are définir. Échec interpretation: Persistent shift usually signifie the width/height ratio doesn’t match the réel image being served, or the attributes are manquant entirely. Monitoring window: Lab données is immediate; field données (CrUX) nécessite à propos de 28 days to accumulate a trustworthy trend. Rollback trigger: CLS in field données doesn’t améliorer après 28 days despite the lab vérifier passing — revisit si the served image ratio en réalité matches the reserved box.

Testez vos connaissances: Responsive images

Five rapide questions on srcset, sizes, <picture>, and how responsive images affecter SEO. Pick an réponse pour chaque, alors vérifier.

Journal des modifications