画像を表示する。
要素一覧
| 要素 | 概要 |
|---|---|
<img> |
画像を表示する。 |
<picture> |
レスポンシブに画像を表示する。 |
<source> |
画像ファイルを指定する。 |
<figure> |
図であることを示す。 |
<figcaption> |
図のキャプション。 |
とくにレスポンシブに画像を表示しようとすると一気に複雑化する。
<img>
基本
<img src="画像ファイルURL"></img>
<img src="画像ファイルURL" alt="画像が表示できないとき、代わりに表示するテキスト"></img>
srcset属性
srcset属性値で画面サイズやデバイスピクセル比に応じて表示画像ファイルを変更できる。複数の候補があるときはカンマで区切る。
srcset属性値 |
概要 |
|---|---|
ファイルパス 800w |
ディスプレイの幅が800pxのとき指定したファイルパスを表示する（デバイスピクセル比は等倍としてpx換算する） |
ファイルパス 2x |
デバイスピクセル比が2倍のとき指定したファイルパスを表示する |
<img src="img-320.png" srcset="img-480.png 480w, img-640.png 640w" ></img>
| 条件 | 表示ファイル |
|---|---|
| ディスプレイ幅480px以下 | img480.png |
| ディスプレイ幅640px以下か以上 | img640.png |
srcのファイルは表示されない。じゃあなぜ書くのか。わからん。
sizes属性
<img srcset="img-1280.jpg 1280w, img-720.jpg 720w, img-360.jpg 360w" sizes="(max-width: 360px) 100vw, (max-width: 800px) 75vw, 50vw" src="img.jpg">
- ディスプレイの幅が360px以下ならディスプレイ幅100%で表示する
- ディスプレイの幅が800px以下ならディスプレイ幅75%で表示する
- ディスプレイの幅が801px以上ならディスプレイ幅50%で表示する
<picture>, <source>
<picture>は<img>の後継タグ。より複雑な分岐ができる。とくに特定のファイル形式が対応していない場合のファイル使い分けに用いる。以下のようにAVIF形式が対応していないときはPNGで表示する。
ほかにも<img>と同じことができる。つまりデバイスピクセル比や画面サイズに応じて表示する画像ファイルを切り替えることができる。
type属性
<picture> <source type="image/avif" srcset="img.avif"> <img src="img.png"> </picture>
ファイル種別で使い分ける。これは<img>にはできないことである。
media属性
<picture> <source srcset="img.png" media="(min-width: 600px)"> <img src="img.png" alt="MDN"> </picture>
画面の横幅やデバイスピクセル比だけなら<picture>でも<img>でもできる。だが、メディアクエリを使えばアスペクト比による分岐など、さらに複雑なことができる。詳細はメディアクエリーの使用を参照。
srcset, sizes属性
srcsetは<img>とおなじくwで横幅、xでデバイスピクセル比に対応する。sizesも<img>とおなじで、wのときだけ有効。
じつはsrc属性もあるが、<picture>内で使用するときは無視される。<audio>, <video>タグでの使用を想定した属性らしい。なので<picture>のときファイルはsrcset属性でセットすること。
<figure>, <figcaption>
文書から独立したイラスト、図、写真、コードリスト等に注釈をつけるために使用する。
<p>働いたら負けどころか死ぬ。詳しくは図1を参照されたし。</p> <figure> <figcaption>図1 労働と自殺の相関図</figcaption> <img src="img.png"> </figure>
下図を参照。のように書いてはダメ。図版が下の位置に表示されるかどうかは表示デバイスによって変わりうる。ディスプレイのサイズや、印刷する紙のサイズなどによって画像の表示位置が決まるから。また、付録として別紙にするなどのパターンもありうる。そこでキャプションにより図1のような絶対値参照の表現にすべくキャプションをつける。
<img>と<picture>の使い分け
基本的に<picture>を使えばよい。<picture>は<img>の後継タグで、上位互換である。より複雑な条件分岐ができる。メディアクエリが使えるので画面サイズだけでなくカラースキーム（Light/Darkモード）やプリンタ出力時などに応じて画像ファイルを変えることもできる。
| 要素 | 用途 |
|---|---|
<img> |
画面サイズに応じて画像ファイルを変更する |
<picture> |
ファイル形式やカラースキームなど、より複雑な条件で画像ファイルを変更する |
でも単純なときは<img>のほうが短く書けて助かる。
対象環境
- Raspbierry pi 4 Model B
- Raspberry Pi OS buster 10.0 2020-08-20 ※
- bash 5.0.3(1)-release
$ uname -a Linux raspberrypi 5.10.63-v7l+ #1496 SMP Wed Dec 1 15:58:56 GMT 2021 armv7l GNU/Linux
