画像レスポンシブの表示方法について｜picture・srcset・image-setの違い

スマートフォンとPCでは、画面サイズも通信環境も大きく異なります。
それにもかかわらず、同じ画像をそのまま配信してしまうと、表示速度や通信量に影響が出ます。

この問題を解決するために使われるのが「画像レスポンシブ」の仕組みです。

現在のWebでは主に次の3つの方法が使われます。

• srcset
• picture
• image-set

いずれも画像の最適化に関わる技術ですが、役割は同じではありません。
まずはそれぞれの位置付けを整理します。

画像レスポンシブが必要な理由

従来のHTMLでは、画像は次のように1つのファイルを指定するだけでした。

<img src="image.jpg" alt="">

この方法では、PCでもスマートフォンでも同じ画像が読み込まれます。

しかし実際の閲覧環境は大きく異なります。

• スマートフォンは通信速度が不安定
• 画面サイズが小さい
• 端末性能もPCより低い

この状態でPC用の大きな画像を読み込めば、表示速度が低下します。

そのため、画面サイズや環境に応じて適切な画像を配信する仕組みが必要になります。

3つの技術の役割

現在の画像レスポンシブは、次の3つの技術で構成されています。

srcset

同じ画像のサイズ違いを用意し、ブラウザに最適な画像を選択させる仕組みです。

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

ブラウザは画面サイズを判断し、最適な画像を自動的に読み込みます。

picture

画像フォーマットや画像内容を切り替える仕組みです。

<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="">
</picture>

例えば、「WebP」「AVIF」「JPEG」など、ブラウザ対応に応じた画像を配信できます。また、画面サイズによってトリミングした画像を切り替える（アートディレクション）といった使い方も可能です。

image-set

CSSの背景画像でレスポンシブ画像を扱う仕組みです。

background-image: image-set(
url(image.jpg) 1x,
url(image@2x.jpg) 2x
);

主に次の用途で使われます。

• background-image
• 高解像度ディスプレイ対応
• CSS背景の最適化

3つは役割が違う

この3つは似ているようで、役割ははっきり分かれています。

つまり、「imgタグのレスポンシブ → srcset / picture」「背景画像のレスポンシブ → image-set」という整理になります。

すべてを使う必要はない

画像レスポンシブというと複雑に見えますが、実際のWeb制作では用途はある程度整理されています。

例えば、以下のような形です。

• コンテンツ画像 → img + srcset
• フォーマット切替 → picture
• 装飾背景 → image-set

重要なのは、「どの技術を使うか」ではなく、画像の役割に合わせて適切な方法を選ぶことです。

画像レスポンシブは「役割」で使い分ける

画像レスポンシブには、以下3つの方法があります。

• srcset
• picture
• image-set

それぞれ役割が異なるため、まずは全体の構造を理解することが重要です。