HTMLのpictureタグで画像のレスポンシブ切り替えする方法

レスポンシブで画像を切り替えってどうやるの？

パソコンデザインだと横長の画像、スマホデザインだと縦長の画像などファーストビューでよくあると思います。

これにはレスポンシブで画像を切り替える必要がありますが、今回はpictureタグを使った方法を解説していきます。

pictureタグを使えばCSSやJavaScriptを使わずに画像の切り替えが可能です。

IEでは使えませんでしたが、IEのサポートが終了した今では気兼ねなく使えるようになりました。

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

30日間でWeb制作を学べる
完全無料
現役エンジニアへの質問無制限
オンラインの動画学習なので時間場所を問わず勉強可能
最大4回の学習サポート面談
受付は1日25名までの先着制

無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

＼完全無料／

ZeroPlus Gate公式サイト

先着1日25名まで！

pictureタグの書き方と使い方

それではpictureタグの書き方と使い方を解説していきます。

pictureタグは子要素にsourceタグとimgタグを書く

pictureタグの書き方はこちらです。

<picture>
  <source srcset="画像パス1" 属性 />
  <img src="画像パス2" alt="代替テキスト" />
</picture>

pictureタグは子要素にsourceタグとimgタグをセットで書きます。

プログラミングの基本ルール通り上から読み込むので、sourceタグ → imgタグの順番で読みます。

2つの意味はこちらです。

sourceタグが表示条件を満たせば、sourceタグの画像を表示
sourceタグが表示条件を満たさない、またはpictureタグ非対応ブラウザの場合はimgタグの画像を表示

imgタグは1つ、sourceタグは複数書ける

imgタグは1つですが、sourceタグは複数書けます。

複数書く場合は上から優先順位の高い順に書きます。

<picture>
  <!-- ↓優先順位1↓ -->
  <source srcset="画像パス1" 属性 />
  <!-- ↓優先順位2↓ -->
  <source srcset="画像パス2" 属性 />
  <!-- ↓優先順位3↓ -->
  <source srcset="画像パス3" 属性 />
  <!-- ↓優先順位最下位(上記全て表示条件に当てはまらない場合に表示)↓ -->
  <img src="画像パス4" alt="代替テキスト">
</picture>

いくつも画像を書いていますが、順番に読み込んで『表示条件を満たせばその画像を表示する』だけなので、表示されるのは1つだけです。

そしてimgタグは『どれにも当てはまらない場合に表示する画像』なので、一番下に1つだけ書きます。

sourceタグの属性

ここまで表示条件と書いてきましたが、その条件はsourceタグの属性に書きます。

属性は3つあります。

srcset属性：画像パスを書く ※必須
media属性：メディアクエリを指定（画面幅によって表示する画像を切り替える）
type属性：画像の形式を指定（未対応ブラウザがある画像のみ）

srcset属性は必須ですが、imgタグと同じように画像パスを書くだけなので解説は割愛します。

media属性

media属性はメディアクエリとなり、『画面幅が○○px以上なら画像を表示する』といったレスポンシブに画像を切り替える条件を指定できます。

書き方はこのようになります。

<picture>
  <!-- ↓幅1280px以上で表示↓ -->
  <source srcset="画像パス1" media="(min-width: 1280px)" />
  <!-- ↓幅768px以上で表示↓ -->
  <source srcset="画像パス2" media="(min-width: 768px)" />
  <!-- ↓幅390px以上で表示↓ -->
  <source srcset="画像パス3" media="(min-width: 390px)" />
  <!-- ↓上記全て表示条件に当てはまらない場合に表示↓ -->
  <img src="画像パス4" alt="代替テキスト">
</picture>

先ほども書いた通り、表示されるのは1つだけになります。

type属性

type属性は画像の形式をMIMEタイプで指定します。

これはjpg、png、gifなど、全てのブラウザで対応している画像形式は書く必要はありません。

書く必要があるのはWebPなど未対応ブラウザがある画像形式のみになります。

<picture>
  <!-- ↓WebP対応ブラウザで開いた場合に表示↓ -->
  <source srcset="画像パス1" type="image/webp" />
  <!-- ↓WebP未対応ブラウザで開いた場合に表示↓ -->
  <img src="画像パス2" alt="代替テキスト">
</picture>

この場合、sourceタグにはWebP画像、imgタグにはjpgやpngなどWebP以外の画像パスを書きましょう。

pictureタグを使ったレスポンシブで画像切り替えのサンプル

ここでpictureタグを使ったサンプルをご紹介します。

コードはこちらです。

<picture>
  <!-- ↓幅800px以上で表示↓ -->
  <source srcset="画像パス1" media="(min-width: 800px)" />
  <!-- ↓幅690px以上で表示↓ -->
  <source srcset="画像パス2" media="(min-width: 690px)" />
  <!-- ↓上記全て表示条件に当てはまらない場合に表示↓ -->
  <img src="画像パス3" alt="代替テキスト">
</picture>

パソコンで見た場合ですが、デフォルトでは画面幅が692.8pxなので2番目の画像が表示されます。

右上のHTML・CSSをクリックすると画面幅が狭くなるので、3番目の画像が表示されます。

左上の『EDIT ON CODEPEN』をクリックすると別タブの全画面で表示されるので、画面幅が800px以上あれば1番目の画像が表示されます。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

CSSの『display: none;』でPCとSPの画像切り替えするデメリット

pictureタグを使わない場合、以下のようにCSSでdisplay: none;を使う方法があります。

例えばHTMLではPCで表示させたい画像と、スマホ(SP)で表示させたい画像を書きます。

<div class="sample">
  <!-- ↓PCで表示させたい画像↓ -->
  <img
    src="img/sample-pc.jpg"
    alt="代替テキスト"
    class="pc-only"
    height="1200"
    width="2000"
  />
  <!-- ↓SPで表示させたい画像↓ -->
  <img
    src="img/sample-sp.jpg"
    alt="代替テキスト"
    class="sp-only"
    height="1400"
    width="1000"
  />
</div>

そしてCSSはこちらです。

@media only screen and (min-width: 768px) {
  /* 画面幅768px以上でPC画像を表示 */
  .pc-only {
    display: block;
  }
  /* 画面幅768px以上でSP画像を非表示 */
  .sp-only {
    display: none;
  }
}

CSSのメディアクエリでPC・SPを出し分けていますが、PCとSPどちらの場合でも画像を両方読み込んでしまい、これはパフォーマンスに影響します。

pictureタグの場合は複数書いても読み込む画像は1つだけなので、余分な画像は読み込みません。

さらにこの場合はCSSも必要なので、コード量も増えてしまいます。

なのでレスポンシブの画像切り替えならpictureタグを使った方がいいですが、画像の出し分け以外にも使う機会があると思うので、この書き方自体は覚えておいて損はないと思います。