【pictureタグ徹底解説】画面幅やデバイスによって表示するimg画像を切り替える方法

レスポンシブ対応のWEBサイトを作っているときに、デバイスなどの画面幅によって表示する画像を切り替えたいことがあります。

そんな時にとても便利なのがpictureタグです。

ここでは、pictureタグの使い方解説しています。

pictureタグで画像を出し分ける方法

pictureタグを使って画面サイズによって画像を出し分けるにはsourceタグとimageタグを使います。

その中でもsourceタグの属性を使う際に次の２種類の方法で画像を出し分けることができます。

２つもあるとややこしいですが、どちらで設定しても同じことができます。

media属性とsrcset属性のどちらを使うべきか？

media属性とsrcset属性のどちらを使っても画像を出し分けることができます。それぞれでメリット・デメリットがあります。

個人的には少し書き方にクセがあるsrcsetよりも、直感的にわかりやすいmedia属性の方がおすすめです。

media属性で出し分ける

media属性の使い方

CSSでメディアクエリ（@media）を使っている人はsourceタグのmedia属性を使った方が直感的に記述しやすいかと思います。

media属性で出し分ける場合はsourceタグの中に、media属性をつかって「min-width」や「max-width」で画面幅を指定します。

<picture>
  <source srcset="画像パス１" media="(min-width: 画面幅px)">
  <source srcset="画像パス２" media="(min-width: 画面幅px) and (max-width: 画面幅px)">
  <source srcset="画像パス３" media="(max-width: 画面幅px)">
  <img src="image.jpg" alt="">
</picture>

実例：media属性による画像の出し分け

<picture>
  <source srcset="image-large.jpg" media="(min-width: 1080px)">
  <source srcset="image-medium.jpg" media="(min-width: 787px) and (max-width: 1079px)">
  <source srcset="image-small.jpg" media="(min-width: 380px) and (max-width: 786px)">
  <source srcset="image-tiny.jpg" media="(max-width: 379px)">
  <img src="image.jpg" alt="">
</picture>

画面幅と表示する画像の関係

• 1080px以上： image-large.jpg
• 787~1089px：image-medium.jpg
• 380~768px: image-small.jpg
• ～379px:　　 image-tiny.jpg　
• どれにも該当しない場合： image.jpg

▼実際の画像

<picture>
  <source media="(min-width: 1080px)" srcset="https://prograshi.com/wp-content/uploads/2024/06/cat_1280.jpg">
  <source media="(min-width: 787px) and (max-width: 1079px)" srcset="https://prograshi.com/wp-content/uploads/2024/06/sunset_1000p-e1719555974867.jpg">
  <img src="https://prograshi.com/wp-content/uploads/2024/06/small_bird_800p-e1719555952425.jpg" alt="">
</picture>

srcset属性で画像を出し分ける

srcset属性の使い方

srcset属性を使って画像を出し分ける場合はsrc属性の値に、「画像のパス 画像の幅w」を繰り返し記述していきます。

srcset="画像のパス1 画面幅1w, 画像のパス2 画面幅2w, 画像のパス3 画面幅3w,,,,"

画像の幅の単位は「w」でピクセルの数値を指定します。画面幅は指定した値を含みます。

なお、高さで指定する場合は「h」、rentinaディスプレイなど解像度で指定する場合は「x」も使うことができます。

もし、1280px以上でlarge-img.jpgを表示したい場合は以下のようにします。

<picture>
  <source srcset="large-img.jpg 1280w">
  <img src="" alt="">
</picture>

実例：srcset属性で画像を出し分ける方法

例えば、①1280px以上、②1279px～768px以上、③767px～320px以上の３つで画像を出し分けたい場合は以下のようにします。

<picture>
  <source srcset="image-large.jpg 1280w, image-medium.jpg 768w, image-small.jpg 320w">
  <img src="" alt="">
</picture>

画面幅と表示する画像の関係は以下のようになります。

①1280px以上： image-large.jpg
②1279px～768px以上： image-medium.jpg
③767px～320px以上： image-small.jpg
④319px以下：該当なし

上記の書き方では、319px以下の場合に対象の画像がなくなってしまいます。

▼実例

<picture>
  <source srcset="https://prograshi.com/wp-content/uploads/2024/06/cat_1280.jpg 1280w,
                  https://prograshi.com/wp-content/uploads/2024/06/sunset_1000p-e1719555974867.jpg 768w,
                  https://prograshi.com/wp-content/uploads/2024/06/small_bird_800p-e1719555952425.jpg 320w">
  <img src="" alt="">
</picture>

どの画面幅にも該当しない場合

例えば、①1280px以上、②1279px～768px以上で画像を出し分けるように設定して、767px以下の場合は～以上という制限をつけずに「image-small.jpg」を表示したい場合は以下のように記述します。

<picture>
  <source srcset="image-large.jpg 1280w, image-medium.jpg 768w">
  <img src="image-small.jpg">
</picture>

画面幅と表示する画像の関係は以下のようになります。

①1280px以上： image-large.jpg
②1279px～768px以上： image-medium.jpg
③767px以下： image-small.jpg

srcset属性のまとめ

srcset属性を使って、拡張子の異なる画像を表示する方法

最近はwebpのように軽量で画質のいい画像フォーマットが登場してきました。しかし、ブラウザによっては未だ対応しておらず、webpのみの画像を指定している場合は画像が表示されないリスクがあります。

そんな時は、pictureタグの中のsourceタグでsrcset属性を使ってwebpの画像とjpegの画像を出し分けることができます。

<picture>
  <source srcset="example.webp" type="image/webp">
  <source srcset="example1.jpg" type="image/jpeg">
  <img src="example2.jpg" alt="Sample Image">
</picture>

ブラウザがwebpに対応している場合は「example.webp」を表示し、対応していない場合は「example1.jpg」を表示します。

また、ブラウザがpictureタグに対応していない場合はimgタグの「example2.jpg」を表示します。（※実際の使用では、上記のexample1.jpgとexample2.jpgは同じ画像を指定します）