Guide : Responsive Images (srcset)

TL;DR — Responsive images let a navigateur charger a right-sized version de a picture au lieu de un giant fichier — a petit un on a phone, a big un on a desktop. Vous faire il avec le srcset et sizes attributs on votre <img> balise (liste le sizes vous ont; le navigateur picks). Ce ne fait pas directement boost votre rankings, mais il rend pages faster et arrête les depuis “jumping” as images charger, et speed est quelque chose Google mesure.

Ce que responsive images are

A “responsive” image adapts à le device looking à il. Au lieu de sending le même huge photo à a phone et a desktop, vous donner le navigateur a quelques versions à différent sizes et let il grab le 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> — le courant un. Même picture, différent sizes. Vous liste ce que vous ont et le navigateur chooses. Ce est appelé resolution switching.
• Le <picture> element — pour quand vous vouloir a genuinely différent image à différent sizes (dire, a wide crop on desktop et a tall, tight crop on mobile), or a modern fichier format avec a fallback. Ce est appelé art direction, et la plupart sites ne pas besoin il.

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 est votre normal, toujours-là fallback. Garder il.
• srcset listes le versions vous ont et comment wide chaque un est (1000w = 1000 pixels wide).
• sizes indique le navigateur comment big le image va en réalité apparaître donc il peut pick le correct fichier avant il charge n’importe quoi.
• width et height reserve space donc lune page ne fait pas jump autour pendant que le image charge.
• alt est le même description vous’d toujours écrire. Garder il identical à travers chaque version.

Pourquoi bother (the honest réponse)

Responsive images ne pas earn vous a classement “boost.” Ce que ils faire est faire pages charger faster et arrêter le layout depuis shifting — et ceux sont choses Google mesure as partie de page experience. Si a speed outil (Lighthouse, PageSpeed Insights) est nagging vous à “correctement size images,” srcset/sizes est le corriger c’est asking pour.

Un plus chose: ce ne fait pas modifier ce que montre up dans Google Images. Google indexes le image dans votre src attribut — le responsive variants sont simplement delivery. Donc garder votre alt texte, filename, et le principal image URL le même aucun matter qui version le navigateur charge.

Vouloir le precise version — w vs x descriptors, quand vous en réalité besoin <picture>, le LCP et layout-shift mechanics, et le mobile-indexation règles — switch à le Avancé tab.

TL;DR — Deux jobs, un syntax family. srcset/sizes on <img> = resolution switching (même image, navigateur picks meilleur-fit — a suggestion); <picture> = art direction or format switching (author-dictated crops/formats — a command). La plupart sites seulement besoin le premier. Responsive images sont pas a direct classement signal et ne pas modifier ce que Google indexes — Google indexes le src URL, donc garder alt texte, filenames, et image URLs stable à travers breakpoints (indexation mobile-premier). Le réel payoff est Core Web Vitals: right-sizing images est le corriger behind Lighthouse’s “Properly size images” audit (fails à a 4KiB gap), et width/height (or aspect-ratio) — pas srcset — est ce que empêche CLS. ne pas lazy-charger le LCP image. Je reuse le exact srcset + width/height modèle depuis mon Ahrefs CLS piece.

Two différent jobs, un syntax family

Tout dans ce topic collapses dans deux mechanisms, et half le confusion out là comes depuis mixing les up:

1. Resolution switching — le même image à différent sizes or pixel densities. Vous donner le navigateur a menu avec srcset et sizes on le <img>, et le navigateur decides qui fichier à récupérer fondé on le viewport et screen density. Ce est le 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 le choice avec le <picture> element.

Le web.dev Apprendre: Responsive images course frames le difference exactly correct: avec srcset le navigateur obtient suggestions, whereas “le picture element donne commands.” Et le scope-paramètre line worth tattooing on le wall, aussi depuis web.dev: “Vous probably ne va pas besoin à utiliser le picture element pour la plupart de votre responsive images — le srcset et sizes attributs on le img element cover a lot de utiliser cas.” Reach pour <picture> seulement quand vous en réalité besoin a différent image, pas a différent size de le même un.

srcset et sizes — resolution switching

«### w-descriptors vs. x-descriptors » (Traduction) (Résumé en français de la section vingt-quatre, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«srcset takes a comma-separated list of candidate files, each tagged with a descriptor. There are two kinds: » (Traduction) (Résumé en français de la section vingt-cinq, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«- Width descriptors (w) — you state each file’s intrinsic pixel width (puppy-2000.jpg 2000w). The browser combines that with your sizes value to work out which file best fits the space and the device’s pixel density. This is the flexible option and what you’ll use most of the time. » (Traduction) (Résumé en français de la section vingt-six, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- Pixel-density descriptors (x) — you state which file is for which device pixel ratio (logo.png 1x, logo@2x.png 2x). Use these for fixed-size images (an avatar, a logo) where the displayed size never changes; you don’t need sizes with x descriptors. » (Traduction) (Résumé en français de la section vingt-six, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.)

«Rule of thumb: fluid, content-width images → w descriptors + sizes; fixed-size UI images → x descriptors. » (Traduction) (Résumé en français de la section vingt-sept, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

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

Avec w descriptors, sizes n’est pas optional cosmetics — c’est comment le navigateur knows comment big le image va rendre donc il peut choisir avant layout. Per web.dev, sizes “indique le navigateur ce que size vous expect le image à être affiché à sous différent conditions,” as a comma-separated liste de media conditions et widths:

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

Lire il as: “si le viewport est 600px or narrower, le image va être à propos de 480px wide; sinon, à propos de 1000px.” Omit sizes et le navigateur assumes le image fills le complet viewport width (100vw) — donc on a wide screen il peut pull votre largest fichier pour an image c’est en réalité rendu à 400px, quietly defeating le entier point. Manquant sizes est le unique la plupart courant srcset mistake.

ne pas guess à ceux width valeurs depuis le layout dans votre head — vérifier le image’s réel rendu CSS width dans le navigateur (DevTools → Elements → le computed width de le <img> box) à chaque breakpoint vous care à propos de, et définir sizes à match. A sizes valeur que ne fait pas match le réel rendu width encore causes le navigateur à sélectionner le incorrect candidate même though le markup est syntactically correct — syntax validation alone ne va pas catch que; voir le currentSrc vérifier ci-dessous à confirmer ce que en réalité chargé.

Worked exemple (my reusable pattern)

Ce est le exact modèle depuis mon Ahrefs piece, Ce que Est Décalage cumulatif de mise en page (CLS) & Comment Améliorer Il, expanded avec 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" />

Chaque piece est charger-bearing: src est le fallback et l’URL Google indexes; srcset listes le candidates avec w descriptors; sizes indique le navigateur le rendu width; width/height reserve space (le CLS corriger — plus ci-dessous); alt stays identical aucun matter qui fichier charge.

Le picture element — art direction et 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 servir a tall, tight crop; on a wide desktop, a court, wide un. Même subject, deliberately différent framing.
2. Format switching — offer AVIF/WebP avec a JPEG fallback via <source type="…">, letting le navigateur prendre le premier format il prend en charge. Ce ties straight back à le format guidance on le Image SEO hub.

Le syntax (et le fallback règle)

Le <picture> element wraps un or plus <source> elements et toujours ends avec 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>

«That trailing <img src> is not optional. Google states it directly: per section 4.8.1 of the HTML Standard, “make sure that you provide an img element as a fallback with a src attribute when using the picture element.” It’s the file older browsers and crawlers fall back to — and, again, the one Google indexes. » (Traduction) (Résumé en français de la section quarante-quatre, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

Fait srcset aider SEO? Direct vs. indirect

Ici’s le framing chaque competing guide fumbles, donc je vais être blunt.

«Directly: no. Responsive-image markup is not a ranking signal the way alt text or filenames are for image search. Adding srcset doesn’t lift your positions, and it doesn’t change what appears in Google Images. Google indexes the image referenced in src; the srcset/<picture> variants are a delivery mechanism, not separately indexable assets. Keep your alt text, filename, and structured data attached to that primary src image. » (Traduction) (Résumé en français de la section quarante-sept, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«Indirectly: yes, and it’s one of the biggest levers you have. Right-sized images are the most effective concrete fix for two Core Web Vitals — LCP and CLS — which feed Google’s page-experience signals. That’s the whole payoff. It’s the same shape as the WebP/AVIF story on the Image SEO hub: no boost for the format itself, the win is speed. » (Traduction) (Résumé en français de la section quarante-huit, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«## Responsive images and LCP » (Traduction) (Résumé en français de la section quarante-neuf, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«Oversized images are one of the most common causes of a slow Largest Contentful Paint, and responsive images are Lighthouse’s recommended fix. The Lighthouse “Properly size images” audit lists “all images in your page that aren’t appropriately sized, along with the potential savings” — anything bigger than it needs to be “just results in wasted bytes and slows down page load time.” Its fix, verbatim: “With responsive images, you generate multiple versions of each image, and then specify which version to use in your HTML or CSS using media queries, viewport dimensions, and so on.” » (Traduction) (Résumé en français de la section cinquante, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«Two specifics worth knowing: » (Traduction) (Résumé en français de la section cinquante et un, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«- The failure threshold is 4KiB. Lighthouse only flags an image when “the rendered size is at least 4KiB smaller than the actual size.” Small overshoots don’t count; serving a 3000px file into a 400px slot does. » (Traduction) (Résumé en français de la section cinquante-deux, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- A tooling shortcut. Google recommends RespImageLint, “a helpful bookmarklet for identifying the optimal srcset and sizes values for your images.” Run it before you hand-calculate breakpoints. » (Traduction) (Résumé en français de la section cinquante-deux, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.)

«### Don’t lazy-load the LCP image » (Traduction) (Résumé en français de la section cinquante-trois, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«This is the rule people break most. srcset on your hero is fine — but never pair it with lazy loading on the LCP element. The largest above-the-fold image should load eagerly with fetchpriority="high", exactly as the Image SEO hub covers. And when you build a responsive <picture> hero, keep the swap logic native: Google warns that it “won’t load content that requires user interactions” like swiping or clicking, so a JS scheme that only loads the real image after interaction hides it from Google. » (Traduction) (Résumé en français de la section cinquante-quatre, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«## Responsive images and CLS » (Traduction) (Résumé en français de la section cinquante-cinq, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«Here’s the trap: srcset alone does nothing for layout shift. Resolution switching decides which file loads; it doesn’t reserve space for it. Left without dimensions, per web.dev’s Optimize CLS guide, “as images load, text shifts down the page to make room for them” — because the space “can’t be allocated for it until the browser starts to download it and can determine its dimensions.” » (Traduction) (Résumé en français de la section cinquante-six, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

Le corriger est explicit dimensions, et il composes avec responsive markup:

• Définir width et height attributs on le <img>. Modern navigateurs “définir le par défaut aspect ratio de images fondé on an image’s width et height attributs,” donc ceux deux numbers reserve le correct box avant quelconque srcset variant downloads. (web.dev)
• Pair les avec height: auto dans CSS pour fluid containers. Ce est le partie que semble contradictory mais n’est pas: web.dev’s propre guidance est à “utiliser CSS à resize le image à le width de le container” et “définir height: auto; à éviter en utilisant a fixed valeur pour le image height.” Le HTML attributs définir le intrinsic aspect ratio; le CSS lets le image scale fluidly. Ensemble ils empêcher CLS et stay responsive.
• Or utiliser CSS aspect-ratio à reserve le space quand vous pouvez’t définir attributs.

«Which kills a persistent myth: width/height attributes don’t break fluid layouts. Attributes + height: auto is the correct combo, not a conflict. I walk through the full layout-shift mechanics in my Ahrefs CLS article; the short version is “reserve the space so that there’s no shift” and let the image fill it. » (Traduction) (Résumé en français de la section cinquante-neuf, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

Indexation mobile-first implications

Google indexes primarily le mobile version de votre pages, donc deux règles matter plus que ils utilisé à quand vous êtes diffusion responsive variants:

«- Keep alt text identical across breakpoints. Google’s mobile-first indexing best practices say to “make sure that the mobile site has the same alt text for images as the desktop site.” An art-directed mobile crop must not drop context Google needs. » (Traduction) (Résumé en français de la section soixante-deux, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- Keep image URLs stable. Don’t use URLs that change every time the page loads for images. This dovetails with Google’s Image SEO guidance to consistently reference the image with the same URL so it can cache and reuse it. Responsive CDNs that mint a fresh URL per request break this — pin stable URLs for your variants. » (Traduction) (Résumé en français de la section soixante-deux, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.)

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?

il y a aucun Bing-spécifique guidance on srcset, sizes, or le <picture> element — Bing’s public documentation ne fait pas adresse responsive-image markup à tout. Donc ne pas justify responsive images avec a Bing algorithm hook; le cas est performances et UX, qui Bing (comme Google) treats as page-experience qualité plutôt que quelque chose vous peut point à a documented responsive-images règle pour.

Erreurs fréquentes

• Forgetting sizes avec w descriptors — le navigateur assumes 100vw et peut récupérer votre biggest fichier pour a petit slot.
• Dropping le fallback src on <picture> — a spec violation Google explicitly flags, et c’est l’URL robots d’exploration indexer.
• Mismatched width/height ratio vs. le actually-servi image — encore causes shift.
• Lazy-loading le LCP hero — delays LCP pour aucun raison; charger il eagerly avec fetchpriority="high".
• Regenerating image URLs per requête — breaks Google’s mise en cache et le mobile-premier “stable URL” règle.
• Reaching pour <picture> quand srcset/sizes voudrait faire — unnecessary complexity; web.dev dit la plupart sites ne pas besoin il.

Où ce sits

Ce est le sizing-et-delivery deep dive sous le broader Image SEO hub — le performances half de image SEO, parallel à comment le texte alternatif guide handles le image-recherche half. Pour le layout-shift mechanics dans complet, voir mon Ahrefs CLS article; pour LCP, fetchpriority, et le chargement stratégie, c’est Core Web Vitals fonctionner wearing an image hat.

AI summary

A condensed prendre on the Avancé version:

• Deux mechanisms, un family. srcset/sizes on <img> = resolution switching (même image, navigateur picks meilleur-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 attribut et cover fluid, contenu-width images; x (pixel-density) descriptors suit fixed-size UI images et ne pas besoin sizes.
• sizes est mandatory avec w descriptors — omit il et le navigateur assumes 100vw, souvent fetching le largest fichier needlessly. La plupart courant srcset mistake.
• Pas a direct classement signal. Responsive markup ne fait pas modifier ce que Google indexes — Google indexes le src URL; variants sont delivery seulement. Garder texte alternatif, filenames, et données structurées on le principal src image.
• LCP payoff: oversized images sont a top causer de lent LCP; responsive images sont Lighthouse’s recommended corriger (“Properly size images” audit; fails à a 4KiB gap; RespImageLint aide pick srcset/sizes).
• CLS: srcset alone ne fait pashing pour shift — définir width/height attributs (or CSS aspect-ratio), paired avec height: auto pour fluid layouts. Attributs + height: auto est le correct combo, pas a conflict.
• Jamais lazy-charger le LCP image; charger il eagerly avec fetchpriority="high", et garder responsive swaps native (Google ne va pas charger interaction-triggered contenu).
• Indexation mobile-premier: même texte alternatif et stable image URLs à travers breakpoints; ne pas mint a fresh URL per requête.
• Bing: aucun dedicated responsive-images guidance — justify le fonctionner on performances/UX.

«## Official documentation » (Traduction) (Résumé en français de la section soixante-dix-sept, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«Primary-source documentation and developer guidance. » (Traduction) (Résumé en français de la section soixante-dix-huit, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«Google — Search » (Traduction) (Résumé en français de la section soixante-dix-neuf, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- Google Images best practices — the srcset note, the <picture> fallback-src requirement, same-URL guidance, and the responsive-design rationale. » (Traduction) (Résumé en français de la section soixante-dix-neuf, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- Mobile-first indexing best practices — same alt text and stable image URLs across mobile and desktop; don’t lazy-load primary content on interaction. » (Traduction) (Résumé en français de la section soixante-dix-neuf, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.)

«Google — web.dev (developer guidance) » (Traduction) (Résumé en français de la section quatre-vingts, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- Learn: Responsive images — srcset complements src; how sizes and media conditions work. » (Traduction) (Résumé en français de la section quatre-vingts, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- Learn: The picture element — when you need <picture>, art direction, and “suggestions vs. commands.” » (Traduction) (Résumé en français de la section quatre-vingts, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.) «- Optimize Cumulative Layout Shift — width/height attributes, aspect ratio, and height: auto for fluid images. » (Traduction) (Résumé en français de la section quatre-vingts, sous-partie quatre : le texte source est conservé pour vérification lors de la relecture francophone.) «- Fetch Priority API — fetchpriority="high" for the LCP image. » (Traduction) (Résumé en français de la section quatre-vingts, sous-partie cinq : le texte source est conservé pour vérification lors de la relecture francophone.)

«Chrome DevTools / Lighthouse » (Traduction) (Résumé en français de la section quatre-vingt-un, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- Properly size images (uses-responsive-images) — the audit, the 4KiB threshold, and the RespImageLint bookmarklet. » (Traduction) (Résumé en français de la section quatre-vingt-un, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.)

«MDN » (Traduction) (Résumé en français de la section quatre-vingt-deux, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- Using responsive images in HTML — the reference for srcset, sizes, w/x descriptors, and <picture> syntax. » (Traduction) (Résumé en français de la section quatre-vingt-deux, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.)

«## Quotes from the source » (Traduction) (Résumé en français de la section quatre-vingt-cinq, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

On-le-record statements depuis Google’s documentation et developer guidance. Où a page exposes le texte, le lien est a deep lien que jumps à le 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 » (Traduction) (Résumé en français de la section quatre-vingt-huit, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- “Designing responsive web pages leads to better user experience, since people can access them across a plethora of device types.” Source » (Traduction) (Résumé en français de la section quatre-vingt-huit, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- 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 » (Traduction) (Résumé en français de la section quatre-vingt-huit, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.)

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 » (Traduction) (Résumé en français de la section quatre-vingt-dix, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- “Don’t use URLs that change every time the page loads for images.” Jump to quote » (Traduction) (Résumé en français de la section quatre-vingt-dix, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.)

«web.dev — srcset vs. picture » (Traduction) (Résumé en français de la section quatre-vingt-onze, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«- “Where the srcset attribute gives suggestions to the browser, the picture element gives commands.” Jump to quote » (Traduction) (Résumé en français de la section quatre-vingt-douze, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

Me — on le CLS corriger

• “Reserve the space so that there’s no shift” et le image simplement fills il. Jump à citation

Copy-paste responsive image patterns

Three patterns que cover presque chaque réel cas. Tout de les garder a fallback src, explicit width/height (le CLS corriger), et identical alt texte.

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. Le LCP hero — eager + élevé priority, et 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>

Règles baked dans ces:

• Toujours garder le trailing <img src> — c’est le fallback et l’URL Google indexes.
• Avec w descriptors, sizes est requis; sans il le navigateur assumes 100vw.
• Avec x descriptors, omit sizes.
• Jamais ajouter loading="lazy" à le LCP image (modèle 3) — que delays LCP; utiliser fetchpriority="high" à la place.

À trouver le correct srcset/sizes valeurs au lieu de guessing, exécuter RespImageLint, le bookmarklet Google recommends, over le actif page.

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

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

La plupart sites arrêter à le premier branch et jamais laisser srcset/sizes — reach pour <picture> seulement quand le image itself nécessite à modifier, pas simplement son size.

Ce que pas to do

Six concrete mistakes le article calls out, chaque avec pourquoi c’est incorrect et le corriger.

• Forgetting le sizes attribut avec w-descriptors. Pourquoi c’est incorrect: sans sizes, le navigateur assumes le image fills le complet viewport width (100vw), donc il peut récupérer votre biggest candidate pour a slot que renders beaucoup plus petit. Faire à la place: toujours pair w-descriptor srcset avec a sizes valeur que matches comment le image en réalité renders à chaque breakpoint.
• Dropping le fallback <img src> on <picture>. Pourquoi c’est incorrect: c’est a spec violation Google explicitly flags, et c’est l’URL robots d’exploration et Google Images en réalité indexer — aucun fallback signifie aucun indexable image. Faire à la place: chaque <picture> bloquer ends avec a plain <img src="...">, jamais simplement <source> elements.
• Mismatched width/height ratio versus le actually-servi image. Pourquoi c’est incorrect: le attributs définir le reserved aspect ratio; si le réel image ne fait pas match il, le layout encore shifts une fois le image charge. Faire à la place: garder le width/height (or aspect-ratio) ratio identical à le image fichiers vous êtes en réalité diffusion à travers tout srcset/<picture> variants.
• Lazy-loading le LCP hero image. Pourquoi c’est incorrect: loading="lazy" delays le récupérer de exactly le image Plus grand affichage de contenu est timing, pushing LCP plus tard pour aucun avantage. Faire à la place: charger le LCP image eagerly avec fetchpriority="high", jamais loading="lazy".
• Regenerating image URLs on chaque requête. Pourquoi c’est incorrect: il breaks Google’s image mise en cache et violates le indexation mobile-premier règle contre URLs que modifier chaque temps lune page charge. Faire à la place: pin stable, consistent URLs per image variant donc Google peut cache et reuse les.
• Reaching pour <picture> quand srcset/sizes voudrait faire. Pourquoi c’est incorrect: c’est unneeded complexity — web.dev est explicit que la plupart sites ne pas besoin <picture> à tout. Faire à la place: par défaut à srcset/sizes resolution switching; seulement ajouter <picture> quand vous genuinely besoin a différent crop or format per condition.

Courant problèmes

Symptom-premier lookup pour le deux responsive-image problèmes lecteurs en réalité hit.

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

• Symptom: Lighthouse or PageSpeed Insights encore rapports layout shift on an image, or vous pouvez visually voir contenu jump as le image charge, despite having a fonctionnement srcset/sizes.
• Probable causer: srcset alone ne fait pashing pour layout shift — il seulement decides qui fichier charge, pas comment beaucoup space à reserve. Le image a aucun width/ height attributs (or CSS aspect-ratio), donc le navigateur ne peut pas allocate space jusqu’à le fichier commence downloading et son dimensions sont connu.
• Corriger + confirmer: Ajouter explicit width et height attributs à le <img> (or définir CSS aspect-ratio), et pair les avec height: auto dans CSS donc le image encore scales fluidly. Confirmer par re-running le CLS vérifier (Lighthouse or a actif CrUX vérifier) et watching pour le shift à disappear — le reserved box devrait maintenant hold son size avant le image finishes chargement.

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

• Symptom: Le Lighthouse “Properly size images” audit listes un or plus images avec wasted bytes, or une page feels lent à reach son Plus grand affichage de contenu même though le image itself semble fine.
• Probable causer: Le rendu size de le image est au moins 4KiB plus petit que le réel fichier étant servi — commonly parce que il y a aucun srcset à tout, or sizes est manquant donc le navigateur defaulted à 100vw et pulled le largest candidate pour a petit slot.
• Corriger + confirmer: Ajouter (or correct) srcset avec appropriately sized candidates et a sizes valeur matching le réel rendu width; exécuter RespImageLint à vérifier le valeurs au lieu de guessing. Confirmer par re-running le Lighthouse “Properly size images” audit et checking le flagged image ne … plus apparaît (or son potential savings drop ci-dessous le 4KiB threshold).

Cheat sheet: descriptors, picture vs. srcset, et le CLS/LCP règles

Validation tests

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

Properly-sized images ship correctement

Tester à exécuter: Exécuter le Lighthouse “Properly size images” audit (Chrome DevTools > Lighthouse > Performances, or PageSpeed Insights) on lune page vous simplement mis à jour. Attendu résultat: Le image vous fixed ne … plus apparaît dans le audit’s flagged liste, or son potential savings drop ci-dessous le 4KiB gap threshold. Échec interpretation: Si c’est encore flagged, soit srcset candidates sont encore aussi grand pour le rendu size, or sizes est manquant/incorrect et le navigateur est encore defaulting à 100vw. Monitoring window: Immediate — re-exécuter correct après deploying le modifier. Rollback trigger: Le audit encore flags le même image avec unchanged potential savings après confirming sizes matches le réel rendu width.

srcset/sizes valeurs are en réalité optimal

Tester à exécuter: Exécuter RespImageLint (le bookmarklet Google recommends) contre le actif page. Attendu résultat: Aucun warnings à propos de oversized candidates or a manquant/incorrect sizes valeur. Échec interpretation: A warning signifie soit a candidate est unnecessarily grand pour son breakpoint or sizes ne fait pas match le container’s réel rendu width. Monitoring window: Immediate, on le actif URL après deploy. Rollback trigger: RespImageLint garde flagging le même image après vous avez corrected le sizes valeur.

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

Tester à exécuter: Passing le Lighthouse/RespImageLint vérifications confirms votre markup est valide — il ne fait pas confirmer le navigateur picked le fichier vous prévu à a donné viewport. Charger lune page à le breakpoint vous care à propos de, ouvrir DevTools, sélectionner le <img>, et vérifier son currentSrc property dans le console ($0.currentSrc dans Chrome/Firefox DevTools) — MDN’s propre exemple fait exactly ce: comparing currentSrc contre le attendu filename à confirmer qui candidate chargé. Cross-vérifier contre le Network tab à voir qui fichier était en réalité requested. Repeat à votre narrow et wide breakpoints, et à 1x et 2x device pixel ratio si vous emulate il. Attendu résultat: currentSrc matches le candidate fichier vous’d expect pour que viewport width et pixel density, et le Network tab montre seulement que fichier était récupéré. Échec interpretation: Si currentSrc renvoie a candidate bigger or plus petit que attendu, soit le sizes valeur ne fait pas match le image’s réel rendu CSS width (voir “Why sizes matters” dans le Avancé tab) or a srcset descriptor est incorrect. Remarque que navigateur selection est implementation-defined — le HTML Standard laisse le exact choice parmi valide candidates à le navigateur (density, zoom, et network conditions peut tout factor dans), donc ne pas 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 à a narrow viewport après vous avez corrected sizes à match le réel rendu width.

Aucun layout shift depuis le image

Tester à exécuter: Vérifier Décalage cumulatif de mise en page pour lune page — Lighthouse’s CLS score, or a actif CrUX/PageSpeed Insights champ-données vérifier pour l’URL. Attendu résultat: CLS attributable à le image drops à (near) zero une fois width/height (or aspect-ratio) sont définir. Échec interpretation: Persistent shift généralement signifie le width/height ratio ne fait pas match le réel image étant servi, or le attributs sont manquant entirely. Monitoring window: Lab données est immediate; champ données (CrUX) nécessite à propos de 28 days à accumulate a trustworthy trend. Rollback trigger: CLS dans champ données ne fait pas améliorer après 28 days despite le lab vérifier passing — revisit si le servi image ratio en réalité matches le 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