![MARKLEAPS[マークリープス]](https://markleaps.com/blog/wp-content/themes/mkl/images/00_logo.png){kind=logo}
[HTML] pictureタグで画像をレスポンシブに切り替える方法
MARKLEAPS
<picture>タグを使用すると、HTMLだけで画像をレスポンシブに切り替えることができます。
<picture>タグとは
<picture>タグは、画面幅や画像形式に応じて画像を切り替えるためのHTMLタグです。
<picture>タグを使用すると、以下のようなことが可能になります。
・画面幅に応じて、適切な画像を表示する
・ブラウザが対応していない画像形式の場合、別の画像を表示する
基本的な使い方
<picture>タグの中に、<source>タグと<img>タグを記述します。
|
1 2 3 4 5 |
<picture> <source srcset="画像URL①" 条件> <source srcset="画像URL②" 条件> <img src="画像URL③" alt="画像の説明"> </picture> |
記述ルール
- <source>タグは複数指定できるが、<img>タグは1つだけ使用する
- <img>タグは<source>タグの後に記述する
画像の読み込み順
1．<source>タグを上から順に読み込む
2．各<source>の属性をチェックし、条件に一致するか確認する
3．一致する <source> が見つかれば、その画像を表示する
4．どの <source> にも一致しない場合は、<img> タグの画像を表示する
|
1 2 3 4 5 |
<picture> <source srcset="画像URL①" 条件><!-- 優先順位1 --> <source srcset="画像URL②" 条件><!-- 優先順位2 --> <img src="画像URL③" alt="画像の説明"><!-- 優先順位3 --> </picture> |
<source>タグの属性
<source>タグの属性を使用すると、「どの条件で、どの画像を表示するか」を指定できます。
・srcset 属性：表示する画像のURLを指定
・media 属性 ：メディアクエリを指定（画面幅による画像の切り替え）
・type 属性 ：画像の形式を指定
media 属性：画面幅による画像の切り替え
<source>タグに media 属性を追加すると、画面幅に応じて表示する画像を切り替えられます。
ポイント
- min-width は 大きい順 に記述
- max-width は 小さい順 に記述
例：
|
1 2 3 4 5 |
<picture> <source srcset="main_s.jpg" media="(max-width: 767px)"><!-- 幅767px以下で表示 --> <source srcset="main_m.jpg" media="(max-width: 1023px)"><!-- 幅1023px以下で表示 --> <img src="main_l.jpg" alt="メイン画像L"><!-- それ以外で表示 --> </picture> |
type 属性：画像の形式による切り替え
type 属性では、画像の形式を MIMEタイプ で指定します。
例 ：type=”image/webp”
JPEG・PNG・GIFはすべてのブラウザで対応しているため、通常は type 属性を指定する必要はありません。
しかし、WebP など未対応のブラウザがある形式を使用する場合に type 属性を指定すると、代替画像を用意できます。
例：
|
1 2 3 4 |
<picture> <source srcset="main.webp" type="image/webp"/> <img src="main.png" alt="画像の説明" /><!-- WebP未対応のブラウザで表示 --> </picture> |
<picture>タグのメリット
<picture>タグを使わずにCSSで画像を切り替える方法もありますが、すべての画像が読み込まれてしまう という問題があります。
CSSで切り替える方法
・html
|
1 2 3 4 |
<div class="main"> <img class="pc" src="main_pc.jpg"> <img class="sp" src="main_sp.jpg"> </div> |
・css
|
1 2 3 4 5 6 7 |
.pc {display: block;} .sp {display: none;} @media screen and (max-width: 767px) { .pc {display: none;} .sp {display: block;} } |
この方法では、display: none; で非表示にしても、HTMLに記述された画像はすべて読み込まれる ため、ページの読み込み速度が遅くなる可能性があります。
pictureタグを使えば、必要な画像のみが読み込まれるため、Webページの表示速度を向上することができます。
まとめ
・<picture>タグを使うと、画面幅や画像形式に応じて最適な画像を表示できる
・<source>タグで media や type を指定して切り替えられる
・<picture>を使えば、不要な画像の読み込みを防ぎ、サイトのパフォーマンスを向上できる
