【HTML】img・picture・figureを使い分けよう

画像を表示するためのHTMLタグとして、<img><figure><picture>があります。それぞれ目的別に役割が分かれていますので、しっかりと使い分ける必要があります。今回はその使い分け方のメモになります。

<img>と<picture>はsrcsetで制御する

<img>はHTMLにおける基本的な画像を表示するためのタグになります。
HTMLを学習すれば、学習初日に覚える位のメジャーなやつです。
imgは基本的に1種類の画像を表示するために使用するタグになります。
<picture>も同様な動作をしますが、こちらはよりレスポンシブデザインに対応した形を取っています。

imgやpictureには、srcsetと言うレスポンシブに対応する条件分岐が存在します。このsrcsetで指定することにより、画像の横幅や、Retinaディスプレイに対応した画像を選択することが出来るようになります。

<img>のレスポンシブデザイン例

<img 
  src="./img/01.png"
  srcset="./img/01.png 320w,./img/02.png 640w,./img/03.png 1024w"
  alt="サンプル"
>

<picture>のレスポンシブデザイン例

<picture>
  <source media="(min-width: 1024px)" srcset="./img/03.png" />
  <source media="(min-width: 480px)" srcset="./img/02.png" />
  <img src="./img/01.png" />
</picture>

<img>と<picture>の違い

この２つは同じように見えますが、実は画像の表示方法が違います。

左から01.png、02.png、03.png

<img>タグの方は基本的にディスプレイのサイズに合わせた画像を表示します。ブラウザを手動で狭めた時にC→B→Aと画像が変更されるブラウザはFirefoxだけです。その他のブラウザはCしか表示されません。
基本的にはimgは１つの画像を表示させるために用意されたタグと認識されているので、ブラウザが表示させる画像を固定している（適切な表示をしている）事になります。

では<picture>の方はどうかと言いますと、こちらのほうは、指定されたメディアに適応した画像を表示するために作られていますので、ブラウザを狭めたり広げたりしたら自動的にA、B、Cの画像が切り替わってくれます。

ですので、imgでレスポンシブ対応をする場合は、全く同じ比率で解像度だけ違う画像を選択させる場合に使い、pictureを使用させる場合は、ブラウザのサイズに合わせて全く違う画像を表示させる場合に使用する事になります。

<figure>は画像単体で説明できるものを囲む要素

<figure>は要素の中にimgやpictureを入れることで完成するタグになります。厳密に言うとここに並べるタグではないのですが、上２つを説明する場合、一緒に説明したほうが良いかなと思いまして一緒に並べてます。

<figure>
  <img 
    src="./img/01.png"
    srcset="./img/01.png 320w,./img/02.png 640w,./img/03.png 1024w"
    alt="サンプル"
  >
  <figcaption>サンプル画像</figcaption>
</figure>

<figure>は基本的に文章中に参照される図表に使われるタグになります。Wordpressの投稿などで、投稿中に設置した画像にはこのタグが埋め込まれているのが分かると思います。このタグは、単体でも図表として分かるものに使われます。

また、このタグの子要素として<figcaption>でキャプションを設置できることが出来ます。このようにしておくことで、画像の説明文としてgoogle等に認識させることが出来ます。

最後に

このように、画像を表示させるだけでもレスポンシブデザインが絡むと複雑になってきていますので、しっかりと基本も見直しておくと良いと思います。

もしも、ホームページ制作でお困りでしたらパタパタワークスがあなたの力になれるかもしれません。ちょっとしたことでもお気軽にお問い合わせください。それではまた！