srcset・sizesの正しい使い方｜ブラウザはどう画像を選ぶのか

レスポンシブ画像の基本は srcset です。
現在のWeb制作では、ほとんどの画像レスポンシブがこの仕組みで実装されています。

しかし、実務では次の疑問を持つことも少なくありません。

• ブラウザはどうやって画像を選んでいるのか
• sizesは本当に必要なのか
• どのサイズを用意すればよいのか

今回は、srcsetとsizesの仕組みを整理します。

srcsetとは何か

srcsetは、画像のサイズ違いをブラウザに提示する仕組みです。

<img
src="image.jpg"
srcset="
image-480.jpg 480w,
image-800.jpg 800w,
image-1200.jpg 1200w
"
alt="">

この場合、ブラウザには次の情報が伝わります。

• 480pxの画像
• 800pxの画像
• 1200pxの画像

そしてブラウザは、表示サイズに適した画像を自動で選択します。

ブラウザが画像を選ぶ仕組み

ブラウザは次の要素を見て画像を決定します。

主に次の3つです。

• 画面サイズ
• 表示される画像の幅
• デバイスピクセル比（DPR）

つまりブラウザは、「表示サイズ × デバイスピクセル比」を基準に画像を選びます。

sizesが必要な理由

ここで重要になるのが sizes です。

srcsetだけでは、ブラウザは「この画像がページ内でどの幅で表示されるか」を正確に判断できません。

そのため、次のように指定します。

<img
src="image.jpg"
srcset="
image-480.jpg 480w,
image-800.jpg 800w,
image-1200.jpg 1200w
"
sizes="(max-width: 768px) 100vw, 800px"
alt="">

この指定の意味は次の通りです。

• 画面幅768px以下 → 画面幅いっぱい
• それ以上 → 800pxで表示

ブラウザはこの情報をもとに、必要な画像サイズを計算します。

sizesがない場合どうなるか

sizesを指定しない場合、ブラウザは「画像は100vwで表示される」と判断します。
つまり、「画面幅いっぱいの画像」と解釈されます。

その結果、次のような問題が起きます。

• 不必要に大きな画像を選ぶ
• 通信量が増える
• LCPが悪化する

srcsetのよくある誤解

実務で多い誤解がいくつかあります。

誤解1：srcsetを書けば最適化される

実際には、sizesがないと正しく機能しません。

誤解2：スマホ用画像とPC画像を分ける仕組み

srcsetは、画面サイズではなく表示幅を基準に画像を選びます。

誤解3：ブラウザは必ず最小画像を選ぶ

ブラウザは、通信環境やDPRも含めて総合的に判断します。

実務の使い方

実務では次のような構成が多く使われます。

<img
src="image-800.jpg"
srcset="
image-480.jpg 480w,
image-800.jpg 800w,
image-1200.jpg 1200w
"
sizes="(max-width: 768px) 100vw, 800px"
alt="">

この構成にすることで、以下の画像が選択されます。

• スマホ → 480〜800px
• PC → 800〜1200px

srcsetの本質

srcsetの役割は単純で「ブラウザに選ばせること」です。
開発者が環境ごとに画像を切り替えるのではなく、「ブラウザが最適な画像を判断する」という設計になっています。

srcsetは、レスポンシブ画像の基本となる仕組みです。

重要なのは次の3点です。

• srcsetは画像候補を提示する仕組み
• sizesは表示サイズを伝える情報
• ブラウザが最適な画像を選択する

画像レスポンシブでは、この 「ブラウザが選ぶ仕組み」 を理解することが重要です。