[HTML] pictureタグで画像をレスポンシブに切り替える方法

<picture>タグを使用すると、HTMLだけで画像をレスポンシブに切り替えることができます。

<picture>タグとは

<picture>タグは、画面幅や画像形式に応じて画像を切り替えるためのHTMLタグです。

<picture>タグを使用すると、以下のようなことが可能になります。
・画面幅に応じて、適切な画像を表示する
・ブラウザが対応していない画像形式の場合、別の画像を表示する

基本的な使い方

<picture>タグの中に、<source>タグと<img>タグを記述します。

画像の読み込み順

1．<source>タグを上から順に読み込む
2．各<source>の属性をチェックし、条件に一致するか確認する
3．一致する <source> が見つかれば、その画像を表示する
4．どの <source> にも一致しない場合は、<img> タグの画像を表示する
 

<source>タグの属性

<source>タグの属性を使用すると、「どの条件で、どの画像を表示するか」を指定できます。

・srcset 属性：表示する画像のURLを指定
・media 属性 ：メディアクエリを指定（画面幅による画像の切り替え）
・type 属性 ：画像の形式を指定

media 属性：画面幅による画像の切り替え

<source>タグに media 属性を追加すると、画面幅に応じて表示する画像を切り替えられます。

例：

 
画面幅による画像の切り替えDEMO

type 属性：画像の形式による切り替え

type 属性では、画像の形式を MIMEタイプ で指定します。
例 ：type=”image/webp”

JPEG・PNG・GIFはすべてのブラウザで対応しているため、通常は type 属性を指定する必要はありません。
しかし、WebP など未対応のブラウザがある形式を使用する場合に type 属性を指定すると、代替画像を用意できます。

例：

<picture>タグのメリット

<picture>タグを使わずにCSSで画像を切り替える方法もありますが、すべての画像が読み込まれてしまう という問題があります。

CSSで切り替える方法
・html

 
・css

 
この方法では、display: none; で非表示にしても、HTMLに記述された画像はすべて読み込まれる ため、ページの読み込み速度が遅くなる可能性があります。
pictureタグを使えば、必要な画像のみが読み込まれるため、Webページの表示速度を向上することができます。

まとめ

・<picture>タグを使うと、画面幅や画像形式に応じて最適な画像を表示できる
・<source>タグで media や type を指定して切り替えられる
・<picture>を使えば、不要な画像の読み込みを防ぎ、サイトのパフォーマンスを向上できる