言語

Responsive 画像 (srcset)

暫定日本語訳：どのように へ serve responsive 画像 とともに srcset と sizes attributes と picture element, いつ へ 使用 各, と どのように responsive 画像 fix LCP と CLS なしで being direct ランキング signal.

初回公開：2026年7月2日 · 最終更新：2026年8月4日 · Advanced
言語
AI執筆者：AI v2

暫定日本語訳：Responsive 画像 let ブラウザー (via srcset + sizes) または author (via <picture>) serve right-sized 画像 per device. srcset/sizes is resolution switching (同じ 画像, ブラウザー picks — suggestion); <picture> is art direction または format switching (author-dictated crops/formats — command). 大半の サイト だけ need srcset/sizes. この is ない direct ランキング signal と it doesn't change 何 Google indexes — Google indexes src URL — ただし it's concrete fix Lighthouse recommends 向けに oversized 画像 (its "Properly size images" audit fails at 4KiB gap) と, paired とともに explicit width/height, it's どのように あなた 防ぐ CLS. 保つ alt text identical と 画像 URLs stable 全体で breakpoints 向けに mobile-最初 インデックス登録. I reuse exact srcset + width/height pattern から my Ahrefs CLS 記事. Nests 下で 画像 SEO hub.

暫定日本語案: TL;DR — Two jobs, one syntax family. srcset/sizes on <img> = resolution 暫定日本語案: switching (同じ 画像, ブラウザー picks best-fit — suggestion); <picture> = art 暫定日本語案: direction または format switching (author-dictated crops/formats — command). 大半の 暫定日本語案: サイト だけ need 最初. Responsive 画像 are ない direct ランキング signal と 暫定日本語案: don’t change 何 Google indexes — Google indexes src URL, so 保つ alt text, 暫定日本語案: filenames, と 画像 URLs stable 全体で breakpoints (mobile-最初 インデックス登録). real 暫定日本語案: payoff is Core Web Vitals: right-sizing 画像 is fix behind Lighthouse’s 暫定日本語案: “Properly size images” audit (fails at 4KiB gap), と width/height (または 暫定日本語案: aspect-ratio) — ない srcset — is 何 防ぐ CLS. Don’t lazy-load LCP 暫定日本語案: 画像. I reuse exact srcset + width/height pattern から my Ahrefs CLS piece. 暫定日本語案: Evidence for this claim The HTML responsive-image features srcset, sizes, and picture let browsers select an appropriate image candidate. Scope: Current HTML responsive image behavior. Confidence: high · Verified: WHATWG HTML: Responsive images Evidence for this claim Google can process responsive images and recommends src as a fallback while using srcset or picture for responsive delivery. Scope: Current Google Images responsive-image guidance. Confidence: high · Verified: Google Search Central: Responsive images

Two 異なる jobs, one syntax family

暫定日本語案: Everything in この topic collapses へ two mechanisms, と half confusion out 暫定日本語案: there comes から mixing them up:

  1. 暫定日本語案: Resolution switching — 同じ 画像 at 異なる sizes または pixel densities. 暫定日本語案: あなた give ブラウザー menu とともに srcset と sizes on <img>, と * 暫定日本語案: ブラウザー* decides which file へ fetch based on viewport と screen density. 暫定日本語案: この is 一般的な ケース.
  2. 暫定日本語案: Art direction — genuinely 異なる 画像 per condition: wide crop on 暫定日本語案: desktop, tight vertical crop on mobile, または 異なる file format entirely. Here 暫定日本語案: あなた dictate choice とともに <picture> element.

暫定日本語案: web.dev Learn: Responsive 画像 暫定日本語案: course frames difference exactly right: とともに srcset ブラウザー gets 暫定日本語案: suggestions, whereas “the picture element gives commands.” 暫定日本語案: と scope-設定 line worth tattooing on wall, また から web.dev: “You probably won’t need to use the picture element for most of your responsive images — the srcset and sizes attributes on the img element cover a lot of use cases.” 暫定日本語案: Reach 向けに <picture> だけ いつ あなた actually need 異なる 画像, ない 異なる 暫定日本語案: size of 同じ one.

srcset と sizes — resolution switching

w-descriptors vs. x-descriptors

暫定日本語案: srcset takes comma-separated list of candidate files, 各 tagged とともに 暫定日本語案: descriptor. There are two kinds:

  • 暫定日本語案: Width descriptors (w) — あなた state 各 file’s intrinsic pixel width 暫定日本語案: (puppy-2000.jpg 2000w). ブラウザー combines その とともに あなた sizes value へ 暫定日本語案: 機能 out which file best fits space と device’s pixel density. この is 暫定日本語案: flexible option と 何 あなた’ll 使用 大半の of time.
  • 暫定日本語案: Pixel-density descriptors (x) — あなた state which file is 向けに which device 暫定日本語案: pixel ratio (logo.png 1x, logo@2x.png 2x). 使用 これらの 向けに fixed-size 画像 ( 暫定日本語案: avatar, logo) どこ displayed size 決して changes; あなた don’t need sizes とともに 暫定日本語案: x descriptors.

暫定日本語案: Rule of thumb: fluid, コンテンツ-width 画像 → w descriptors + sizes; fixed-size UI 暫定日本語案: 画像 → x descriptors.

なぜ sizes matters (と 何 happens if あなた skip it)

暫定日本語案: とともに w descriptors, sizes isn’t optional cosmetics — it’s どのように ブラウザー knows 暫定日本語案: どのように big 画像 する render so it できる choose 前に layout. Per 暫定日本語案: web.dev, sizes “tells the browser what size you expect the image to be displayed at under different conditions,” as 暫定日本語案: comma-separated list of media conditions と widths:

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

暫定日本語案: Read it as: “if the viewport is 600px or narrower, the image will be about 480px wide; otherwise, about 1000px.” Omit sizes と ブラウザー assumes 画像 fills 暫定日本語案: full viewport width (100vw) — so on wide screen it 可能性がある pull あなた largest file 暫定日本語案: 向けに 画像 その’s actually rendering at 400px, quietly defeating whole point. 暫定日本語案: 不足している sizes is single 大半の 一般的な srcset mistake.

暫定日本語案: Don’t guess at それらの width values から layout in あなた head — 確認 画像’s 暫定日本語案: actual rendered CSS width in ブラウザー (DevTools → Elements → computed 暫定日本語案: width of <img> box) at 各 breakpoint あなた care について, と 設定 sizes へ 暫定日本語案: match. sizes value その doesn’t match real rendered width still causes 暫定日本語案: ブラウザー へ select 誤った candidate even though markup is syntactically 暫定日本語案: 正しい — syntax validation alone won’t catch その; see currentSrc 確認 暫定日本語案: below へ confirm 何 actually loaded.

機能 例 (my reusable pattern)

暫定日本語案: この is exact pattern から my Ahrefs piece, 暫定日本語案: 何 Is Cumulative Layout Shift (CLS) & どのように へ Improve It, 暫定日本語案: expanded とともに 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" />

暫定日本語案: すべての piece is load-bearing: src is fallback と URL Google indexes; 暫定日本語案: srcset lists candidates とともに w descriptors; sizes tells ブラウザー 暫定日本語案: rendered width; width/height reserve space ( CLS fix — more below); alt stays 暫定日本語案: identical no matter which file loads.

picture element — art direction と format switching

いつ あなた actually need it

暫定日本語案: 使用 <picture> 向けに two things srcset できる’t do:

  1. 暫定日本語案: Art direction — 異なる crop per breakpoint. web.dev’s 例: on 暫定日本語案: narrow phone あなた might serve tall, tight crop; on wide desktop, short, wide 暫定日本語案: one. 同じ subject, deliberately 異なる framing.
  2. 暫定日本語案: Format switching — オファー AVIF/WebP とともに JPEG fallback via <source type="…">, letting ブラウザー take 最初 format it supports. この ties 暫定日本語案: straight back へ format guidance on 画像 SEO hub.

syntax (と fallback rule)

暫定日本語案: <picture> element wraps one または more <source> elements と 常に ends とともに 暫定日本語案: 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>

暫定日本語案: その trailing <img src> is ない optional. Google states it directly: per 暫定日本語案: section 4.8.1 of HTML Standard, 暫定日本語案: “make sure that you provide an img element as a fallback with a src attribute when using the picture element.” It’s file older ブラウザー と crawlers fall back へ — 暫定日本語案: と, again, one Google indexes.

Does srcset 役立つ SEO? Direct vs. indirect

暫定日本語案: Here’s framing すべての competing guide fumbles, so I’ll be blunt.

暫定日本語案: Directly: no. Responsive-画像 markup is ない ランキング signal way alt text または 暫定日本語案: filenames are 向けに 画像 検索. Adding srcset doesn’t lift あなた positions, と it 暫定日本語案: doesn’t change 何 表示される in Google 画像. Google indexes 画像 referenced in 暫定日本語案: src; srcset/<picture> variants are delivery mechanism, ない separately 暫定日本語案: indexable assets. 保つ あなた alt text, filename, と structured データ attached へ 暫定日本語案: その 主要 src 画像.

暫定日本語案: Indirectly: yes, と it’s one of biggest levers あなた have. Right-sized 画像 暫定日本語案: are 大半の effective concrete fix 向けに two Core Web Vitals — LCP と CLS — which フィード 暫定日本語案: Google’s ページ-experience signals. その’s whole payoff. It’s 同じ shape as 暫定日本語案: WebP/AVIF story on 画像 SEO hub: no boost 向けに format itself, win is 暫定日本語案: speed.

Responsive 画像 と LCP

暫定日本語案: Oversized 画像 are one of 大半の 一般的な causes of slow Largest Contentful 暫定日本語案: Paint, と responsive 画像 are Lighthouse’s recommended fix. 暫定日本語案: 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 へ 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.”

暫定日本語案: Two specifics worth knowing:

  • 暫定日本語案: ** failure threshold is 4KiB.** Lighthouse だけ flags 画像 いつ “the rendered size is at least 4KiB smaller than the actual size.” Small overshoots don’t count; 暫定日本語案: serving 3000px file へ 400px slot does.
  • 暫定日本語案: ** tooling shortcut.** Google recommends 暫定日本語案: RespImageLint, 暫定日本語案: “a helpful bookmarklet for identifying the optimal srcset and sizes values for your images.” Run it 前に あなた hand-calculate breakpoints.

Don’t lazy-load LCP 画像

暫定日本語案: この is rule 人々 break 大半の. srcset on あなた hero is fine — ただし 決して pair it 暫定日本語案: とともに lazy loading on LCP element. largest above—fold 画像 すべき load 暫定日本語案: eagerly とともに fetchpriority="high", exactly as 画像 SEO hub covers. と いつ あなた 暫定日本語案: 構築 responsive <picture> hero, 保つ swap logic native: Google warns その it 暫定日本語案: “won’t load content that requires user interactions” 暫定日本語案: like swiping または クリック, so JS scheme その だけ loads real 画像 後に 暫定日本語案: interaction hides it から Google.

Responsive 画像 と CLS

暫定日本語案: Here’s trap: srcset alone does nothing 向けに layout shift. Resolution 暫定日本語案: switching decides which file loads; it doesn’t reserve space 向けに it. Left なしで 暫定日本語案: dimensions, per web.dev’s Optimize CLS guide, 暫定日本語案: “as images load, text shifts down the page to make room for them” — because space “can’t be allocated for it until the browser starts to download it and can determine its dimensions.”

暫定日本語案: fix is explicit dimensions, と it composes とともに responsive markup:

  • 暫定日本語案: 設定 width と height attributes on <img>. Modern ブラウザー “set the default aspect ratio of images based on an image’s width and height attributes,” 暫定日本語案: so それらの two numbers reserve right box 前に any srcset variant downloads. 暫定日本語案: (web.dev)
  • 暫定日本語案: Pair them とともに height: auto in CSS 向けに fluid containers. この is part その 暫定日本語案: looks contradictory ただし isn’t: web.dev’s own guidance is へ “use CSS to resize the image to the width of the container” と “set height: auto; to avoid using a fixed value for the image height.” HTML attributes 設定 intrinsic aspect ratio; 暫定日本語案: CSS lets 画像 scale fluidly. Together それら 防ぐ CLS と stay 暫定日本語案: responsive.
  • 暫定日本語案: または 使用 CSS aspect-ratio へ reserve space いつ あなた できる’t 設定 attributes.

暫定日本語案: Which kills persistent myth: width/height attributes don’t break fluid layouts. 暫定日本語案: Attributes + height: auto is 正しい combo, ない conflict. I walk 通じて 暫定日本語案: full layout-shift mechanics in my Ahrefs CLS 記事; short version is 暫定日本語案: “reserve the space so that there’s no shift” 暫定日本語案: と let 画像 fill it.

Mobile-最初 インデックス登録 implications

暫定日本語案: Google indexes primarily mobile version of あなた ページ, so two rules matter more 暫定日本語案: than それら 使用 へ いつ あなた’re serving responsive variants:

暫定日本語案: Google’s own summary of なぜ へ bother is plain: 暫定日本語案: “designing responsive web pages leads to better user experience, since people can access them across a plethora of device types.”

何 について Bing

暫定日本語案: There’s no Bing-specific guidance on srcset, sizes, または <picture> element — 暫定日本語案: Bing’s public ドキュメント doesn’t address responsive-画像 markup at all. So don’t 暫定日本語案: justify responsive 画像 とともに Bing アルゴリズム hook; ケース is パフォーマンス と UX, 暫定日本語案: which Bing (like Google) treats as ページ-experience quality rather than something あなた 暫定日本語案: できる point at documented responsive-画像 rule 向けに.

よくある間違い

  • 暫定日本語案: Forgetting sizes とともに w descriptors — ブラウザー assumes 100vw と 可能性がある 暫定日本語案: fetch あなた biggest file 向けに small slot.
  • 暫定日本語案: Dropping fallback src on <picture> — spec violation Google explicitly 暫定日本語案: flags, と it’s URL crawlers インデックス登録.
  • 暫定日本語案: Mismatched width/height ratio vs. actually-served 画像 — still causes 暫定日本語案: shift.
  • 暫定日本語案: Lazy-loading LCP hero — delays LCP 向けに no 理由; load it eagerly とともに 暫定日本語案: fetchpriority="high".
  • 暫定日本語案: Regenerating 画像 URLs per リクエスト — breaks Google’s caching と 暫定日本語案: mobile-最初 “stable URL” rule.
  • 暫定日本語案: Reaching 向けに <picture> いつ srcset/sizes する do — unnecessary 暫定日本語案: complexity; web.dev says 大半の サイト don’t need it.

どこ この sits

暫定日本語案: この is sizing-と-delivery deep dive 下で broader 画像 SEO hub — 暫定日本語案: パフォーマンス half of 画像 SEO, parallel へ どのように alt text guide handles 暫定日本語案: 画像-検索 half. 向けに layout-shift mechanics in full, see my Ahrefs CLS 記事; 暫定日本語案: 向けに LCP, fetchpriority, と loading strategy, その’s Core Web Vitals 機能 暫定日本語案: wearing 画像 hat.

Add an expert note

Pin an expert quote

New person? Create their unclaimed profile at /admin/experts/ → Pin a quote first.