HTMLのpictureタグとは？使い方と使う時の注意事項

HTML5から追加された<picture>タグ。
<picture>タグは、異なるデバイスや画面サイズに応じて最適な画像を表示するために使用する、画像をグルーピングするためのタグです。

このタグをちゃんと使うことで、ブラウザの条件に合わせて適切な画像が表示されるので、レスポンシブ用にcssを書いたり専用のclassを準備したり…ということがいらなくなります！

今回はそんな<picture>タグについて、深ぼって解説していきます！

pictureタグの役割

<picture>タグでできることは大きく分けて2つあります。

画面幅によって、表示する画像を切り替えること
ブラウザが対応していない形式の画像を使っている場合、別の画像を表示すること

各ブラウザの画像形式の対応が進んできたここ最近では画面幅で表示する画像を切り替える、レスポンシブ対応時に使用することが多いのではないでしょうか？

画像は必要になったときに読み込まれるため、複数読み込みの記述を書いてもパフォーマンスに影響を与えることはありません。

pictureタグの役割

使い方と例
1. 使い方の例
使う時の注意事項
1. ブラウザ対応
2. type属性の指定
まとめ

使い方と例

<picture>タグの使い方は、まず異なる画像ソースを<source>タグで指定し、デフォルト画像を<img>タグで記述します。
そうすることで、ブラウザ幅に合わせた画像が表示される仕様になっています。

使い方の例

<picture>
  <source srcset="image-large.jpg" media="(max-width: 1200px)">
  <source srcset="image-medium.jpg" media="(max-width: 600px)">
  <img src="image-small.jpg" alt="お試し画像">
</picture>

srcset/srcに画像のパスを記述し、mediaでブレークポイント、altで代替えテキストの指定をすることができます。
基本的には上から下に適応されていくため、思うように反映されない時は順番を見直してみると良いです！

また、mediaはmax-widthでもmin-widthでも良いので、切り替えたいタイミングを設定しましょう。

使う時の注意事項

<picture>タグを使用する際には、いくつかの注意事項があります。
特に、以下のポイントには気をつけましょう！

ブラウザ対応

<picture>タグは多くのモダンブラウザでサポートされていますが、古いブラウザでは対応していない場合があります。
そのため、デフォルト画像にする<img>タグは必ず設定する必要があります。

きちんと見せたい画像に使用する時は、各ブラウザで期待通りの動作を確認することも大切です。

type属性の指定

type属性を指定することで、読み込んでいる画像ファイルの形式を指定することが可能です。

<picture>
  <source srcset="image-large.jpg" media="(max-width: 1200px)" type="image/jpg">
  <source srcset="image-medium.webp" media="(max-width: 600px)" type="image/webp">
  <img src="image-small.jpg" alt="お試し画像">
</picture>

しかし、ここの値が画像と形式が合っていない場合、safariなどのブラウザでは画像自体が表示されなくなってしまうことがあります。
もし、上手く表示がされない場合はtypeが合っているかを確認しましょう。
（基本的なjpg/png/gifといった形式は指定しなくても問題ないため、特殊な画像形式を使用しない場合はtype自体を記述しない方がいいかもしれません）