コラム ／ 制作会社・広告会社向け
レスポンシブ画像のsrcset・sizes実装と表示幅の検証
支給画像をPC・スマートフォンへ実装するときは、候補ファイルと実際の表示幅を揃えて指定します。コードとブラウザーの選択結果から、sizesの不一致の直し方を解説します。
レスポンシブ画像は、候補ファイルの実幅と、ページ上の表示幅を揃えて指定します。srcsetには画像の候補、sizesには表示枠の幅を書き、最後にブラウザーが選んだファイルを照合します。制作会社が支給画像を実装する場面を、コードと実測で説明します。
支給画像から先に決めること
商品紹介ページへ同じ構図の画像を載せる例です。受領時に、元画像の寸法、使用許諾、主役を切ってよい範囲を確認し、原本は別に保管します。今回は生成イラストを架空素材として使い、同じ絵を幅400・800・1200・1600pxのWebPへ書き出しました。いずれも縦横比は40対21です。
表示枠は最大600px、狭い画面では左右20pxずつ余白を取ります。画像の書き出し幅と、CSSで見せる幅は別の値です。スマートフォン用に人物だけを拡大するなど、構図を変えたい場合は、切り抜き案とpicture要素等の別設計が必要です。sizesだけでは構図は変わりません。
表示枠とsizesを合わせる実装
次のHTMLは、候補画像と同じ場所に置く想定です。ページのheadにはviewport指定を入れ、CSSではbodyの余白を0にします。width・height属性は縦横比の手掛かりとなり、実際の表示幅はCSSで指定します。
<meta name="viewport"
content="width=device-width,initial-scale=1">
<div class="frame">
<img src="vase-800.webp"
srcset="vase-400.webp 400w,
vase-800.webp 800w,
vase-1200.webp 1200w,
vase-1600.webp 1600w"
sizes="(max-width: 640px)
calc(100vw - 40px), 600px"
width="1600" height="840"
alt="植物を挿した花瓶を描いた絵">
</div>
<style>
body { margin: 0; }
.frame {
width: min(calc(100vw - 40px), 600px);
margin: 20px auto;
}
.frame img {
display: block;
width: 100%;
height: auto;
}
</style>400wは「幅400pxのファイル」という意味です。ファイル名だけ変えて中身を同じ幅にせず、実際の寸法と一致させます。sizesの条件は先頭から評価され、この例では画面幅640px以下なら画面幅から40pxを引き、それ以外は600pxを表示幅の目安として渡します。
失敗例と修正後を実際に比較
問題になる例は、同じCSSのままsizesだけを100vwにすることです。PCの表示枠が600pxでも、画像選択には画面いっぱいの幅を伝えてしまいます。2026年10月30日、ローカルの単独HTMLをCodex内蔵Chromium 156ブラウザーで検証しました。幅を模擬し、画素密度は1倍、各条件を別URL・キャッシュ保存なしで再読込しています。
| 条件 | 画面／表示枠 | 選択画像の幅 |
|---|---|---|
| 修正前PC | 1280／600px | 1600px |
| 修正後PC | 1280／600px | 800px |
| 修正前SP | 390／350px | 400px |
| 修正後SP | 390／350px | 400px |
選択先はimgのcurrentSrcを読み取り、実ファイルの寸法と照合しました。この素材の1600px版は128,530バイト、800px版は40,658バイトです。これはファイル容量の比較で、通信時間やLCP、CLSの測定値ではありません。4条件とも画像の読込完了と横方向のはみ出しがないことを確認しました。
最初の3候補・画素密度2倍のPCでは前後とも1600px版でした。そこで1200px候補を加え、比較条件として1倍も設定しました。ブラウザーは画素密度や利用環境等も考慮し、4候補・2倍の追加試験では600px枠に1200px版が選ばれました。画面を縮めただけでは大きな候補が再利用されることもあるため、毎回同じファイルが選ばれると保証する検査にはしません。
検収で残す値と担当の引継ぎ
- 候補画像の実寸とsrcsetのw値を照合する。
- PC・スマートフォン幅で表示枠とsizesの計算を照合する。
- 開発者ツールで対象imgのcurrentSrcを読み、選択ファイル、画面幅、画素密度を記録する。
- 主役の見え方、縦横比、代替テキスト、公開URLの画像応答を確認する。
WordPressでは出力HTMLがテーマや画像設定の影響を受けるため、管理画面の指定だけで完了にせず、公開側のimgで再確認します。制作側は構図・使用許諾・デザイン上の表示枠を、実装側はHTML/CSS・選択結果を引き継ぎ、候補画像の書き出し担当は案件ごとに決めると、画像差替え時にも確認箇所が残ります。
GreenCodingへの実装相談では、元画像、表示位置と最大幅、スマートフォンの構図、WordPressでの更新担当を共有してください。対応範囲は制作会社向けコーディング・WordPress実装で確認できます。
仕様の確認先：HTML Standardの画像仕様、MDNのレスポンシブ画像解説、Googleの画像SEOガイド。最終確認日：2026年10月30日。画像候補の適切な指定だけで検索順位・AI引用の改善を保証するものではありません。
公式参照情報
Web案件の進め方が未確定でも、
ご相談いただけます。
支給資料と現在決まっている範囲を確認し、必要な工程、役割分担、実装・検証範囲を整理します。
制作パートナー向けサービスを見る