Poradnik: Responsive Images (srcset)

TL;DR — Responsive images let a przeglądarka load a right-sized version of a picture zamiast one giant file — a mały one on a phone, a big one on a komputer stacjonarny. You robić it z the srcset i sizes atrybuty on twój <img> znacznik (lista the sizes you mieć; the przeglądarka picks). ten doesn’t directly boost twój rankings, ale it makes strony faster i stops them z “jumping” as images load, i speed jest something Google measures.

co responsive images są

A “responsive” image adapts to the urządzenie looking at it. zamiast sending the same huge photo to a phone i a komputer stacjonarny, you give the przeglądarka a kilka versions at różny sizes i let it grab the one że fits. Phones get a mały file; big screens get a big one. mniej wasted data, faster strony.

There są two ways to robić ten, i it’s worth knowing który jest który:

• srcset + sizes on <img> — the common one. Same picture, różny sizes. You lista co you mieć i the przeglądarka chooses. ten jest called resolution switching.
• The <picture> element — dla gdy you want a genuinely różny image at różny sizes (say, a wide crop on komputer stacjonarny i a tall, tight crop on mobilny), lub a modern file format z a fallback. ten jest called art direction, i najbardziej witryny don’t need it.

The basic version

Here’s co resolution switching looks like:

<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 jest twój normal, zawsze-there fallback. zachować it.
• srcset listy the versions you mieć i how wide każdy one jest (1000w = 1000 pixels wide).
• sizes tells the przeglądarka how big the image będzie actually appear so it może pick the right file przed it loads anything.
• width i height reserve space so the strona doesn’t jump around podczas gdy the image loads.
• alt jest the same opis you’d zawsze write. zachować it identical w całym każdy version.

Why bother (the honest answer)

Responsive images don’t earn you a ranking “boost.” co they robić jest make strony load faster i stop the layout z shifting — i tamte są things Google measures as part of strona experience. If a speed narzędzie (Lighthouse, PageSpeed Insights) jest nagging you to “properly size images,” srcset/sizes jest the fix it’s asking dla.

One więcej thing: ten doesn’t change co pokazuje up in Google Images. Google indexes the image in twój src atrybut — the responsive warianty są just delivery. So zachować twój alt tekst, filename, i the main image URL the same no matter który version the przeglądarka loads.

Want the precise version — w vs x descriptors, gdy you actually need <picture>, the LCP i layout-shift mechanics, i the mobilny-indeksowanie reguły — switch to the Advanced tab.

TL;DR — Two jobs, one syntax family. srcset/sizes on <img> = resolution switching (same image, przeglądarka picks best-fit — a suggestion); <picture> = art direction lub format switching (author-dictated crops/formaty — a command). najbardziej witryny tylko need the pierwszy. Responsive images są nie a bezpośredni ranking signal i don’t change co Google indexes — Google indexes the src URL, so zachować alt tekst, filenames, i image URLs stable w całym breakpoints (mobilny-pierwszy indeksowanie). The rzeczywisty payoff jest Core Web Vitals: right-sizing images jest the fix behind Lighthouse’s “Properly size images” audit (fails at a 4KiB gap), i width/height (lub aspect-ratio) — nie srcset — jest co zapobiega CLS. Don’t lazy-load the LCP image. I reuse the dokładny srcset + width/height pattern z my Ahrefs CLS piece.

Two różny jobs, one syntax family

Everything in ten topic collapses do two mechanisms, i half the confusion out there comes z mixing them up:

1. Resolution switching — the same image at różny sizes lub pixel densities. You give the przeglądarka a menu z srcset i sizes on the <img>, i the przeglądarka decides który file to fetch na podstawie the viewport i screen density. ten jest the common case.
2. Art direction — a genuinely różny image per condition: a wide crop on komputer stacjonarny, a tight vertical crop on mobilny, lub a różny file format entirely. Here you dictate the choice z the <picture> element.

The web.dev Learn: Responsive images course frames the difference exactly right: z srcset the przeglądarka gets suggestions, whereas “the picture element gives commands.” i the scope-setting wiersz worth tattooing on the wall, również z web.dev: “You probably won’t need to użyj picture element dla najbardziej of twój responsive images — the srcset i sizes atrybuty on the img element cover a lot of używać cases.” Reach dla <picture> tylko gdy you actually need a różny image, nie a różny size of the same one.

srcset i sizes — resolution switching

w-descriptors vs. x-descriptors

srcset takes a comma-separated lista of candidate files, każdy tagged z a descriptor. There są two kinds:

• Width descriptors (w) — you state każdy file’s intrinsic pixel width (puppy-2000.jpg 2000w). The przeglądarka combines że z twój sizes wartość to działać out który file best fits the space i the urządzenie’s pixel density. ten jest the flexible option i co you’ll używać najbardziej of the time.
• Pixel-density descriptors (x) — you state który file jest dla który urządzenie pixel ratio (logo.png 1x, logo@2x.png 2x). używać te dla fixed-size images (an avatar, a logo) gdzie the displayed size nigdy changes; you don’t need sizes z x descriptors.

reguła of thumb: fluid, treść-width images → w descriptors + sizes; fixed-size UI images → x descriptors.

Why sizes matters (i co happens if you skip it)

z w descriptors, sizes isn’t optional cosmetics — it’s how the przeglądarka knows how big the image będzie render so it może choose przed layout. Per web.dev, sizes “tells the przeglądarka co size you expect the image to być displayed at poniżej różny conditions,” as a comma-separated lista of media conditions i widths:

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

Read it as: “if the viewport jest 600px lub narrower, the image będzie być o 480px wide; otherwise, o 1000px.” Omit sizes i the przeglądarka assumes the image fills the pełny viewport width (100vw) — so on a wide screen it może pull twój largest file dla an image że’s actually renderowanie at 400px, quietly defeating the whole point. Missing sizes jest the single najbardziej common srcset mistake.

Don’t guess at tamte width wartości z the layout in twój head — sprawdź image’s rzeczywisty wyrenderowany CSS width in the przeglądarka (DevTools → elementy → the computed width of the <img> box) at każdy breakpoint you care o, i ustawić sizes to match. A sizes wartość że doesn’t match the rzeczywisty wyrenderowany width nadal causes the przeglądarka to select the błędny candidate even though the znaczniki jest syntactically poprawny — syntax walidacja alone won’t catch że; see the currentSrc sprawdzenie below to confirm co actually załadowany.

Worked przykład (my reusable pattern)

ten jest the dokładny pattern z my Ahrefs piece, co jest Cumulative Layout Shift (CLS) & How To poprawić It, expanded z 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" />

każdy piece jest load-bearing: src jest the fallback i the URL Google indexes; srcset listy the candidates z w descriptors; sizes tells the przeglądarka the wyrenderowany width; width/height reserve space (the CLS fix — więcej below); alt stays identical no matter który file loads.

The picture element — art direction i format switching

gdy you actually need it

używać <picture> dla two things srcset może’t robić:

1. Art direction — a różny crop per breakpoint. web.dev’s przykład: on a narrow phone you może serve a tall, tight crop; on a wide komputer stacjonarny, a short, wide one. Same subject, deliberately różny framing.
2. format switching — oferta AVIF/WebP z a JPEG fallback via <source type="…">, letting the przeglądarka take the pierwszy format it obsługuje. ten ties straight back to the format guidance on the Image SEO hub.

The syntax (i the fallback reguła)

The <picture> element wraps one lub więcej <source> elementy i zawsze ends z 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>

że trailing <img src> jest nie optional. Google states it directly: per sekcja 4.8.1 of the HTML standard, “upewnij się że you zapewniać an img element as a fallback z a src atrybut gdy używając the picture element.” It’s the file older przeglądarki i crawlers fall back to — i, again, the one Google indexes.

robi srcset pomagać SEO? bezpośredni vs. indirect

Here’s the framing każdy competing poradnik fumbles, so I’ll być blunt.

Directly: no. Responsive-image znaczniki jest nie a ranking signal the way tekst alternatywny lub filenames są dla image search. Adding srcset doesn’t lift twój positions, i it doesn’t change co appears in Google Images. Google indexes the image referenced in src; the srcset/<picture> warianty są a delivery mechanism, nie osobno indeksowalny assets. zachować twój alt tekst, filename, i dane strukturalne attached to że primary src image.

Indirectly: yes, i it’s one of the biggest levers you mieć. Right-sized images są the najbardziej effective concrete fix dla two Core Web Vitals — LCP i CLS — który feed Google’s strona-experience signals. że’s the whole payoff. It’s the same shape as the WebP/AVIF story on the Image SEO hub: no boost dla the format itself, the win jest speed.

Responsive images i LCP

Oversized images są one of the najbardziej common causes of a slow Largest Contentful Paint, i responsive images są Lighthouse’s recommended fix. The Lighthouse “Properly size images” audit listy “wszystkie images in twój strona że aren’t appropriately sized, along z the potential savings” — anything bigger than it needs to be “just wyniki in wasted bytes i slows down strona load time.” Its fix, verbatim: “z responsive images, you generate multiple versions of każdy image, i then określać który version to używać in twój HTML lub CSS używając media zapytania, viewport dimensions, i so on.”

Two specifics worth knowing:

• The awaria threshold jest 4KiB. Lighthouse tylko flags an image gdy “the wyrenderowany size jest co najmniej 4KiB smaller than the rzeczywisty size.” mały overshoots don’t count; serving a 3000px file do a 400px slot robi.
• A tooling shortcut. Google recommends RespImageLint, “a pomocny bookmarklet dla identifying the optimal srcset i sizes wartości dla twój images.” Run it przed you hand-calculate breakpoints.

Don’t lazy-load the LCP image

ten jest the reguła people break najbardziej. srcset on twój hero jest fine — ale nigdy pair it z lazy ładowanie on the LCP element. The largest above-the-fold image powinien load eagerly z fetchpriority="high", exactly as the Image SEO hub covers. i gdy you build a responsive <picture> hero, zachowaj swap logic native: Google warns że it “won’t load content that requires user interactions” like swiping lub clicking, so a JS scheme że tylko loads the rzeczywisty image po interaction hides it z Google.

Responsive images i CLS

Here’s the trap: srcset alone robi nothing dla layout shift. Resolution switching decides który file loads; it doesn’t reserve space dla it. Left bez dimensions, per web.dev’s Optimize CLS poradnik, “as images load, text shifts down the page to make room for them” — ponieważ the space “może’t być allocated dla it until the przeglądarka starts to download it i może determine jego dimensions.”

The fix jest explicit dimensions, i it composes z responsive znaczniki:

• ustawić width i height atrybuty on the <img>. Modern przeglądarki “ustawić the domyślny aspect ratio of images na podstawie an image’s width i height atrybuty,” so tamte two liczby reserve the right box przed dowolny srcset wariant downloads. (web.dev)
• Pair them z height: auto in CSS dla fluid containers. ten jest the part że looks contradictory ale isn’t: web.dev’s own guidance jest to “używać CSS to resize the image to the width of the container” and “ustawić height: auto; to avoid używając a fixed wartość dla the image height.” The HTML atrybuty ustawić the intrinsic aspect ratio; the CSS lets the image scale fluidly. Together they zapobiegać CLS i stay responsive.
• lub używać CSS aspect-ratio to reserve the space gdy you może’t ustawić atrybuty.

który kills a persistent myth: width/height atrybuty don’t break fluid layouts. atrybuty + height: auto jest the poprawny combo, nie a conflict. I walk przez the pełny layout-shift mechanics in my Ahrefs CLS artykuł; the short version jest “reserve the space so that there’s no shift” i let the image fill it.

mobilny-pierwszy indeksowanie implications

Google indexes primarily the mobilny version of twój strony, so two reguły matter więcej than they używany to gdy you’re serving responsive warianty:

• zachować tekst alternatywny identical w całym breakpoints. Google’s mobilny-pierwszy indeksowanie dobre praktyki say to “upewnij się że the mobilny witryna ma the same tekst alternatywny dla images as the komputer stacjonarny witryna.” An art-directed mobilny crop musi nie drop context Google needs.
• zachować image URLs stable. Don’t używać URLs że change każdy time the strona loads dla images. ten dovetails z Google’s Image SEO guidance to consistently reference the image z the same URL so it może pamięć podręczna i reuse it. Responsive CDNs że mint a fresh URL per żądanie break ten — pin stable URLs dla twój warianty.

Google’s own summary of why to bother jest plain: “designing responsive strony internetowe leads to better doświadczenie użytkownika, since people może access them w całym a plethora of urządzenie types.”

co o Bing?

There’s no Bing-specific guidance on srcset, sizes, lub the <picture> element — Bing’s public documentation doesn’t address responsive-image znaczniki at wszystkie. So don’t justify responsive images z a Bing algorithm hook; the case jest wydajność i UX, który Bing (like Google) treats as strona-experience quality zamiast something you może point at a udokumentowany responsive-images reguła dla.

częste błędy

• Forgetting sizes z w descriptors — the przeglądarka assumes 100vw i może fetch twój biggest file dla a mały slot.
• Dropping the fallback src on <picture> — a spec violation Google explicitly flags, i it’s the URL crawlers index.
• Mismatched width/height ratio vs. the actually-served image — nadal causes shift.
• Lazy-ładowanie the LCP hero — opóźnienia LCP dla no powód; load it eagerly z fetchpriority="high".
• Regenerating image URLs per żądanie — breaks Google’s buforowanie i the mobilny-pierwszy “stable URL” reguła.
• Reaching dla <picture> gdy srcset/sizes by robić — unnecessary complexity; web.dev says najbardziej witryny don’t need it.

gdzie ten sits

ten jest the sizing-i-delivery deep dive poniżej the broader Image SEO hub — the wydajność half of image SEO, parallel to how the tekst alternatywny poradnik handles the image-search half. dla the layout-shift mechanics in pełny, see my Ahrefs CLS artykuł; dla LCP, fetchpriority, i the ładowanie strategy, że’s Core Web Vitals działać wearing an image hat.

AI summary

A condensed take on the Advanced version:

• Two mechanisms, one family. srcset/sizes on <img> = resolution switching (same image, przeglądarka picks best-fit — a suggestion). <picture> = art direction lub format switching (author-dictated crops/formaty — a command). najbardziej witryny tylko need srcset/sizes.
• Descriptors: w (width) descriptors need a sizes atrybut i cover fluid, treść-width images; x (pixel-density) descriptors suit fixed-size UI images i don’t need sizes.
• sizes jest mandatory z w descriptors — omit it i the przeglądarka assumes 100vw, często pobieranie the largest file needlessly. najbardziej common srcset mistake.
• nie a bezpośredni ranking signal. Responsive znaczniki doesn’t change co Google indexes — Google indexes the src URL; warianty są delivery tylko. zachować tekst alternatywny, filenames, i dane strukturalne on the primary src image.
• LCP payoff: oversized images są a top cause of slow LCP; responsive images są Lighthouse’s recommended fix (“Properly size images” audit; fails at a 4KiB gap; RespImageLint pomaga pick srcset/sizes).
• CLS: srcset alone robi nothing dla shift — ustawić width/height atrybuty (lub CSS aspect-ratio), paired z height: auto dla fluid layouts. atrybuty + height: auto jest the poprawny combo, nie a conflict.
• nigdy lazy-load the LCP image; load it eagerly z fetchpriority="high", i zachować responsive swaps native (Google won’t load interaction-triggered treść).
• mobilny-pierwszy indeksowanie: same tekst alternatywny i stable image URLs w całym breakpoints; don’t mint a fresh URL per żądanie.
• Bing: no dedicated responsive-images guidance — justify the działać on wydajność/UX.

Official documentation

Primary-źródło documentation i programista guidance.

Google — Search

• Google Images dobre praktyki — the srcset note, the <picture> fallback-src requirement, same-URL guidance, i the responsive-design rationale.
• mobilny-pierwszy indeksowanie dobre praktyki — same tekst alternatywny i stable image URLs w całym mobilny i komputer stacjonarny; don’t lazy-load primary treść on interaction.

Google — web.dev (programista guidance)

• Learn: Responsive images — srcset complements src; how sizes i media conditions działać.
• Learn: The picture element — gdy you need <picture>, art direction, i “suggestions vs. commands.”
• Optimize Cumulative Layout Shift — width/height atrybuty, aspect ratio, i height: auto dla fluid images.
• Fetch Priority API — fetchpriority="high" dla the LCP image.

Chrome DevTools / Lighthouse

• Properly size images (używa-responsive-images) — the audit, the 4KiB threshold, i the RespImageLint bookmarklet.

MDN

• używając responsive images in HTML — the reference dla srcset, sizes, w/x descriptors, i <picture> syntax.

cytaty z the źródło

On-the-record statements z Google’s documentation i programista guidance. gdzie a strona exposes the tekst, the link jest a deep link że 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 cytat
• “Designing responsive web pages leads to better user experience, since people can access them across a plethora of device types.” źródło
• On keeping image URLs stable: “consistently reference the image with the same URL, so that Google can cache and reuse the image.” Jump to cytat

Google — mobilny-pierwszy indeksowanie docs

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

web.dev — srcset vs. picture

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

Me — on the CLS fix

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

Copy-paste responsive image patterns

Three patterns że cover almost każdy rzeczywisty case. wszystkie of them zachować a fallback src, explicit width/height (the CLS fix), i identical alt tekst.

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 z ten CSS so the image scales fluidly bez 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, no sizes needed

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

3. The LCP hero — eager + wysoki priority, i 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>

reguły baked do te:

• zawsze zachowaj trailing <img src> — it’s the fallback i the URL Google indexes.
• z w descriptors, sizes jest required; bez it the przeglądarka assumes 100vw.
• z x descriptors, omit sizes.
• nigdy dodawać loading="lazy" to the LCP image (pattern 3) — że opóźnienia LCP; używać fetchpriority="high" instead.

To find the right srcset/sizes wartości zamiast guessing, run RespImageLint, the bookmarklet Google recommends, ponad the live strona.

który one robić you actually need: srcset/sizes lub picture?

działać przez the rzeczywisty branch the artykuł draws między resolution switching i art direction / format switching.

najbardziej witryny stop at the pierwszy branch i nigdy leave srcset/sizes — reach dla <picture> tylko gdy the image itself needs to change, nie just jego size.

co nie to robić

Six concrete mistakes the artykuł calls out, każdy z why it’s błędny i the fix.

• Forgetting the sizes atrybut z w-descriptors. Why it’s błędny: bez sizes, the przeglądarka assumes the image fills the pełny viewport width (100vw), so it może fetch twój biggest candidate dla a slot że renders much smaller. robić instead: zawsze pair w-descriptor srcset z a sizes wartość że matches how the image actually renders at każdy breakpoint.
• Dropping the fallback <img src> on <picture>. Why it’s błędny: it’s a spec violation Google explicitly flags, i it’s the URL crawlers i Google Images actually index — no fallback means no indeksowalny image. robić instead: każdy <picture> blok ends z a plain <img src="...">, nigdy just <source> elementy.
• Mismatched width/height ratio versus the actually-served image. Why it’s błędny: the atrybuty ustawić the reserved aspect ratio; if the rzeczywisty image doesn’t match it, the layout nadal shifts once the image loads. robić instead: zachowaj width/height (lub aspect-ratio) ratio identical to the image files you’re actually serving w całym wszystkie srcset/<picture> warianty.
• Lazy-ładowanie the LCP hero image. Why it’s błędny: loading="lazy" opóźnienia the fetch of exactly the image Largest Contentful Paint jest timing, pushing LCP later dla no benefit. robić instead: load the LCP image eagerly z fetchpriority="high", nigdy loading="lazy".
• Regenerating image URLs on każdy żądanie. Why it’s błędny: it breaks Google’s image buforowanie i violates the mobilny-pierwszy indeksowanie reguła wobec URLs że change każdy time the strona loads. robić instead: pin stable, spójny URLs per image wariant so Google może pamięć podręczna i reuse them.
• Reaching dla <picture> gdy srcset/sizes by robić. Why it’s błędny: it’s unneeded complexity — web.dev jest explicit że najbardziej witryny don’t need <picture> at wszystkie. robić instead: domyślny to srcset/sizes resolution switching; tylko dodawać <picture> gdy you genuinely need a różny crop lub format per condition.

Common problemy

Symptom-pierwszy lookup dla the two responsive-image problems czytelnicy actually hit.

Layout nadal shifts (CLS) even though srcset jest ustawić up

• Symptom: Lighthouse lub PageSpeed Insights nadal raporty layout shift on an image, lub you może visually see treść jump as the image loads, despite having a działający srcset/sizes.
• prawdopodobny cause: srcset alone robi nothing dla layout shift — it tylko decides który file loads, nie how much space to reserve. The image ma no width/ height atrybuty (lub CSS aspect-ratio), so the przeglądarka może’t allocate space until the file starts downloading i jego dimensions są znany.
• Fix + confirm: dodawać explicit width i height atrybuty to the <img> (lub ustawić CSS aspect-ratio), i pair them z height: auto in CSS so the image nadal scales fluidly. Confirm by re-running the CLS sprawdzenie (Lighthouse lub a live CrUX sprawdzenie) i watching dla the shift to disappear — the reserved box powinien now hold jego size przed the image finishes ładowanie.

Lighthouse flags “Properly size images” / an oversized image jest ładowanie

• Symptom: The Lighthouse “Properly size images” audit listy one lub więcej images z wasted bytes, lub a strona feels slow to reach jego Largest Contentful Paint even though the image itself looks fine.
• prawdopodobny cause: The wyrenderowany size of the image jest co najmniej 4KiB smaller than the rzeczywisty file będąc served — commonly ponieważ there’s no srcset at wszystkie, lub sizes jest missing so the przeglądarka defaulted to 100vw i pulled the largest candidate dla a mały slot.
• Fix + confirm: dodawać (lub poprawny) srcset z appropriately sized candidates i a sizes wartość matching the rzeczywisty wyrenderowany width; run RespImageLint to sprawdź wartości zamiast guessing. Confirm by re-running the Lighthouse “Properly size images” audit i checking the flagged image no longer appears (lub jego potential savings drop below the 4KiB threshold).

Cheat sheet: descriptors, picture vs. srcset, i the CLS/LCP reguły

walidacja tests

Pass/fail sprawdzenia że confirm a responsive-image change actually took effect.

Properly-sized images ship correctly

Test to run: Run the Lighthouse “Properly size images” audit (Chrome DevTools > Lighthouse > wydajność, lub PageSpeed Insights) on the strona you just updated. Expected wynik: The image you fixed no longer appears in the audit’s flagged lista, lub jego potential savings drop below the 4KiB gap threshold. awaria interpretation: If it’s nadal flagged, either srcset candidates są nadal too duży dla the wyrenderowany size, lub sizes jest missing/błędny i the przeglądarka jest nadal defaulting to 100vw. monitorowanie window: Immediate — re-run right po deploying the change. Rollback trigger: The audit nadal flags the same image z unchanged potential savings po confirming sizes matches the rzeczywisty wyrenderowany width.

srcset/sizes wartości są actually optimal

Test to run: Run RespImageLint (the bookmarklet Google recommends) wobec the live strona. Expected wynik: No ostrzeżenia o oversized candidates lub a missing/niepoprawny sizes wartość. awaria interpretation: A ostrzeżenie means either a candidate jest unnecessarily duży dla jego breakpoint lub sizes doesn’t match the container’s rzeczywisty wyrenderowany width. monitorowanie window: Immediate, on the live URL po deploy. Rollback trigger: RespImageLint zachowuje flagging the same image po you’ve corrected the sizes wartość.

The przeglądarka actually wybrany the candidate you expected

Test to run: Passing the Lighthouse/RespImageLint sprawdzenia confirms twój znaczniki jest prawidłowy — it doesn’t confirm the przeglądarka picked the file you intended at a given viewport. Load the strona at the breakpoint you care o, otwarty DevTools, select the <img>, i sprawdzenie jego currentSrc właściwość in the console ($0.currentSrc in Chrome/Firefox DevTools) — MDN’s own przykład robi exactly ten: comparing currentSrc wobec the expected filename to confirm który candidate załadowany. Cross-sprawdzenie wobec the Network tab to see który file był actually requested. Repeat at twój narrow i wide breakpoints, i at 1x i 2x urządzenie pixel ratio if you emulate it. Expected wynik: currentSrc matches the candidate file you’d expect dla że viewport width i pixel density, i the Network tab pokazuje tylko że file był fetched. awaria interpretation: If currentSrc zwroty a candidate bigger lub smaller than expected, either the sizes wartość doesn’t match the image’s rzeczywisty wyrenderowany CSS width (see “Why sizes matters” in the Advanced tab) lub a srcset descriptor jest błędny. Note że przeglądarka selection jest implementacja-defined — the HTML standard leaves the dokładny choice among prawidłowy candidates to the przeglądarka (density, zoom, i network conditions może wszystkie factor in), so don’t expect byte-identical behavior w całym przeglądarki; sprawdzenie dla “reasonable candidate,” nie one fixed answer. monitorowanie window: Immediate — sprawdzenie per breakpoint right po deploying. Rollback trigger: currentSrc zachowuje returning an oversized candidate at a narrow viewport po you’ve corrected sizes to match the rzeczywisty wyrenderowany width.

No layout shift z the image

Test to run: sprawdzenie Cumulative Layout Shift dla the strona — Lighthouse’s CLS score, lub a live CrUX/PageSpeed Insights pole-data sprawdzenie dla the URL. Expected wynik: CLS attributable to the image drops to (near) zero once width/height (lub aspect-ratio) są ustawić. awaria interpretation: Persistent shift zwykle means the width/height ratio doesn’t match the rzeczywisty image będąc served, lub the atrybuty są missing entirely. monitorowanie window: Lab data jest immediate; pole data (CrUX) needs o 28 days to accumulate a trustworthy trend. Rollback trigger: CLS in pole data doesn’t poprawić po 28 days despite the lab sprawdzenie passing — revisit whether the served image ratio actually matches the reserved box.

Test yourself: Responsive images

Five quick questions on srcset, sizes, <picture>, i how responsive images affect SEO. Pick an answer dla każdy, then sprawdzenie.

Dziennik zmian