srcset・sizesの使い方とpicture要素との違い｜レスポンシブ画像をやさしく解説

パソコンの大きな画面用の画像を、スマホにもそのまま送るのはもったいないですよね。
スマホの小さな画面には小さな画像で十分なのに、大きな画像を読み込むぶん、表示が遅くなってしまいます。

そこで使うのが srcset・sizes・picture の3つです。
ただ、名前が似ていて「どれをいつ使うの？」となりがち。わたしもずっとあやふやでした😅

この記事では、まず早見表で使い分けをつかんでから、ひとつずつ見ていきます。

🕓 更新日：2026年10月20日

まずは早見表：どれを使えばいい？

やりたいこと	使うもの	画像を選ぶのは
表示サイズは固定。高画質な画面（Retinaなど）でもくっきり見せたい	`srcset`（x）	ブラウザ
画面の幅に合わせて、画像の大きさが変わる	`srcset`（w）＋ `sizes`	ブラウザ
スマホとPCで、切り抜き（見た目）そのものを変えたい	`picture`	作る人
対応ブラウザにだけ、AVIFやWebPを出したい	`picture`（type）	作る人

ポイントは「画像を選ぶのは誰か」です。

srcset・sizes：候補を渡して「あとはお任せ」。ブラウザが選ぶ
picture：「この条件ならこの画像」と作る人が決める

洋服屋さんでたとえると

srcset ＝お店にある在庫のサイズ表（S・M・L）
sizes ＝お客さんの体の大きさ（どれくらいの幅で着るか）
ブラウザ ＝サイズ表と体の大きさを見て、ぴったりを選ぶ店員さん
picture ＝「冬はコート、夏はTシャツ」と、服そのものを変える指定

srcsetとsizesは「同じ服のサイズ違い」、pictureは「違う服」と覚えるとわかりやすいです。

デスクトップで表示（横長の画像）

同じ画像をスマホで表示すると小さい → サイズ違いで足りるなら srcset・sizes

スマホ用に切り抜いた別の画像を使う → picture

1. srcset（x）：表示サイズが固定のとき

表示する幅が決まっているなら、srcsetだけでOKです。

<img
  src="sample-400.jpg"
  srcset="sample-400.jpg 1x,
          sample-800.jpg 2x"
  width="400" height="300"
  alt="サンプル画像">

1x：ふつうの画面用
2x：画素が2倍細かい画面（Retinaなど）用

数字の決め方
400pxで表示する場所に、800pxの画像を使うなら「800 ÷ 400 ＝ 2x」です。

src は、srcsetに対応していない環境向けの予備の画像です。省略せずに書いておきましょう。

2. srcset（w）＋ sizes：幅が変わるとき

画面の幅に合わせて画像の大きさが変わるなら、w（画像の実際の横幅）とsizesを使います。

<img
  src="photo-1280.jpg"
  srcset="photo-640.jpg 640w,
          photo-1280.jpg 1280w,
          photo-1920.jpg 1920w"
  sizes="(min-width: 800px) 50vw, 100vw"
  width="1280" height="853"
  alt="サンプル写真">

srcset の w

640w は「この画像は実際に横640pxですよ」という意味です。
表示したい幅ではなく、画像ファイルそのものの横幅を書きます。

sizes

「この画像をどれくらいの幅で表示するか」をブラウザに教えます。

sizes="(min-width: 800px) 50vw, 100vw"

画面幅が800px以上 → 画面の半分（50vw）で表示
それ以外 → 画面いっぱい（100vw）で表示

条件は前から順番にチェックされ、最初に当てはまったものが使われます。最後の条件なしの値は「どれにも当てはまらないとき」用です。

ほかの書き方の例

書き方	意味
`sizes="100vw"`	いつも画面いっぱい
`sizes="(max-width: 1280px) 100vw, 1280px"`	1280pxまでは画面いっぱい、それより広い画面では1280pxで固定
`sizes="calc(100vw - 300px)"`	画面幅からサイドバー300pxを引いた幅

% は使えないので、割合は vw（画面幅に対する割合）で書きます。

ブラウザはこうやって選んでいる

横幅390px・画素が3倍細かいスマホで、上のコードを開いた場合です。

sizesを見る → 800px未満なので 100vw ＝ 390px
画素の細かさをかける → 390 × 3 ＝ 1170px あればきれい
srcsetの中から、1170px以上でいちばん近い 1280w を選ぶ

つまり、「表示する幅」×「画面の細かさ」に近い画像を選んでいます。
ただし、通信状況などを見てブラウザが別の画像を選ぶこともあります。最終判断はブラウザにお任せ、です。

sizesを書き忘れると？

w を使っているのに sizes がないと、ブラウザは「画面いっぱい（100vw）で表示する」とみなします。
実際は小さく表示する画像でも大きなファイルが選ばれてしまうので、w を使うときは sizes もセットで書きましょう。

3. picture：見た目そのものを変えるとき

スマホでは縦長に切り抜いた画像、PCでは横長の画像…のように、画像そのものを変えたいときに使います（アートディレクションと呼ばれます）。

<picture>
  <source
    media="(min-width: 768px)"
    srcset="hero-wide.jpg 1x, hero-wide@2x.jpg 2x">
  <img
    src="hero-tall.jpg"
    srcset="hero-tall.jpg 1x, hero-tall@2x.jpg 2x"
    width="400" height="600"
    alt="お店の外観">
</picture>

画面幅768px以上 → source の横長画像
それ以外 → img の縦長画像

決まりごと

source は上から順番にチェックされ、最初に当てはまったものが使われる
img は必ず最後に1つ書く（どれにも当てはまらないとき・pictureに対応していないとき用）
alt や loading は img に書く

画像の形式で出し分ける

type を使うと、対応しているブラウザにだけ新しい形式の画像を出せます。

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" width="800" height="533" alt="料理の写真">
</picture>

AVIFに対応していればAVIF、だめならWebP、それもだめならJPGが表示されます。

よくあるつまずき

① width と height を書いていない
書いておくと、画像を読み込む前に場所を確保してくれるので、表示中にレイアウトがガタッとずれるのを防げます。数字は画像の縦横比が合っていればOKです。

② ファーストビューの画像に loading=”lazy”
loading="lazy" は「見えるところまで来たら読み込む」指定です。最初に見える画像に付けると、かえって表示が遅くなります。下の方の画像だけに付けましょう。

③ 確認したのに、大きい画像が選ばれたまま
ブラウザは、一度読み込んだ大きい画像を使い回すことがあります。動作を確かめるときは、シークレットウィンドウや開発者ツールのキャッシュ無効化を使うと確実です。

WordPressなら自動でやってくれる

WordPressの本文に入れた画像には、srcsetとsizesが自動で付きます。アップロード時にサイズ違いの画像も自動で作ってくれます。

自分で書く必要があるのは、

テーマのテンプレートに直接書く画像
WordPressを使わない静的なホームページ

などの場合です。

画像を何枚も用意するのが大変なときは

srcsetやpictureを使うと、サイズ違いの画像を何枚も用意することになります。正直、けっこう大変です😅

プロが作るサイトでは、画像CDNというサービスを使って、この手間をなくしていることがよくあります。

画像CDNのしくみ

たとえるなら「注文を受けてから作るお弁当屋さん」です。

倉庫（保存場所）に、高画質な元画像を1枚だけ置く
ページ側で、URLに「幅640pxで」と注文を書く（例：photo.jpg?w=640）
画像CDNが元画像から640pxの画像を作り、WebPなどの軽い形式にして届ける
一度作った画像は保管しておくので、次からはすぐ届く

そのため、srcsetの候補もURLの数字を変えるだけで書けます。

<img
  src="https://example.imgix.net/photo.jpg?w=1280"
  srcset="https://example.imgix.net/photo.jpg?w=640 640w,
          https://example.imgix.net/photo.jpg?w=1280 1280w,
          https://example.imgix.net/photo.jpg?w=1920 1920w"
  sizes="(min-width: 800px) 50vw, 100vw"
  width="1280" height="853"
  alt="サンプル写真">

代表的なサービスは、imgix・Cloudinary・Cloudflare Imagesなどです。

まとめ

srcset（x）：表示サイズが固定。高画質な画面用の画像を渡す
srcset（w）＋ sizes：幅が変わる。候補と表示幅を渡して、ブラウザに選んでもらう
picture：見た目や形式を変える。作る人が決める

迷ったら「同じ服のサイズ違いならsrcset・sizes、違う服ならpicture」と思い出してくださいね😊

WordPressや画像CDN、AIに任せれば、今は自分で書かなくても済む場面が増えました。それでも仕組みを知っておくと、「何をしてくれているのか」がわかって安心です。