HTMLのpicture要素でレスポンシブに対応した画像を読み込む
レスポンシブデザインで画面幅に応じた画像を読み込みたいときに使う
pictureタグの使い方ついてまとめておきます📌
<img>と<picture>の違い
レスポンシブデザインでコーディングする場合に、
PCとスマホで違う画像を使用したい場合がたくさんあります。
例えば・・・
単に、サイズが違う写真
内容は一緒だけど、レイアウトが違う図
トリミングが違う写真
その他いろんなパターンがあります📷
このうち、単にサイズが違う場合は<img>タグ、
レイアウトやトリミングが異なる画像の場合には
<picture>タグを使えばOKです🙆♀️
<picture>の使い方
picture要素の中にはsource要素、img要素を入れて書きます。
結局<img>は使います🙄そして必須です！
picture要素の基本はこんな感じ👇
<picture>
<source
srcset="img-A.jpg"
media="(max-width:500px)">
<img src="img-B.jpg" alt="">
</picture>上記の例だと、画面の幅が500px以下の場合には、img-A.jpgを表示して、
それ以外の場合は、img-B.jpgを表示します💻
picture要素は、単に画像の入れ物という感じです。
source要素で、読み込みたい画像や読み込みたい場面（デバイスの幅や画像の形式など）の設定を行います。
img要素は、source要素で適合するものがない場合に適用されます。
source要素
- srcset属性
- 表示したい画像のパス（例）img.jpg
- media属性
- 表示したい画面幅の条件（例）(max-width:500px)
source要素ではsrcset属性で画像を設定して、media属性で表示したい画面幅を設定します。
基本の使い方がわかったところで、実際に使いそうな場面を想定して考えてみます🙋♀️
PCの時とスマホの時でレイアウトの違う図を表示する方法
棒グラフの図を配置する場合を想定してみます🙋♀️
PCの時は横型の棒グラフ、スマホ（画面幅500px以下）の時は縦型の棒グラフを表示するようにします。
<picture>
<source
srcset="graph-tate.jpg"
media="(max-width:500px)">
<img src="graph-yoko.jpg" alt="棒グラフ">
</picture>この場合は、単純に画面幅が500px以下かどうか、だけを判定して、縦型か横型か読み込む画像を判断します。
画面のデバイスピクセル比も加味して設定する場合は、srcset属性に画像のパスと密度記述子（x）または幅記述子（w）と一緒に設定していきます💡
- srcset属性
- 表示したい画像のパスと記述子（カンマ区切りで複数もOK）
（例）srcset=”img.jpg 2x, img.jpg”
（例）srcset=”img-100.jpg 100w, img-200.jpg 200w”
<picture>
<source
srcset="
graph-tate-350w.jpg,
graph-tate-700w.jpg 2x"
media="(max-width:500px)">
<source
srcset="
graph-yoko-500w.jpg,
graph-yoko-1000w.jpg 2x"
media="(min-width:501px)">
<img src="graph-yoko.jpg" alt="棒グラフ">
</picture>上記の例だと、読み込まれる画像を4つの条件で設定しています
①画面幅が500px以下でデバイスピクセル比が1の場合
→ 縦型グラフの350px幅の画像（graph-tate-350w.jpg）を読み込む
②画面幅が500px以下でデバイスピクセル比が2の場合
→ 縦型グラフの700px幅の画像（graph-tate-700w.jpg）を読み込む
③画面幅が501px以上でデバイスピクセル比が1の場合
→ 横型グラフの500px幅の画像（graph-yoko-500w.jpg）を読み込む
④画面幅が501px以上でデバイスピクセル比が2の場合
→ 縦型グラフの1000px幅の画像（graph-yoko-1000w.jpg）を読み込む
同じ内容の画像で、サイズだけが違うものを読み込みたいような場合には、
基本的には<img>を使って設定すると良いです。
img要素で画面の幅に応じて読み込む画像を切り替えるには、
srcsetとsizes属性を使います。
詳しくは ・・・
👉 imgのsrcsetでレスポンシブで最適な画像を設定する方法