HTMLで画像を使用する際に役立つタグに、<picture>と<figure>があります。
どちらも画像に関連したタグですが、用途や意味合いが異なるため、適切に使い分けることが大切です。
今回はそれぞれのタグの特徴と、正しい使い分け方について解説します！
pictureタグとは
<picture>タグは、複数の画像ソースを条件に応じて切り替えるためのタグです。
きちんと設定を行うことで、デバイスや表示環境に応じ最適な画像を表示させることができます。
詳しくは下記の記事で解説しています！
pictureタグの使い方
<picture>タグは、<source>タグと<img>タグを組み合わせて使用します。<source>タグで異なる画像ソースを指定し、条件に応じてどの画像を表示するかを設定します。
画面の幅や解像度に応じて画像を切り替えたい場合や、WEBP形式とJPEG形式など異なるフォーマットを選択したい場合に必要な項目を設定します。
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.jpg" type="image/jpeg">
<img src="image.jpg" alt="Sample Image">
</picture>figureタグとは
<figure>タグは画像やイラスト、図表など、メインコンテンツに関連するメディア要素を示すために使用します。
設定した画像に対するキャプションを入れる場合は<figcaption>タグを<figure>タグ内に記述します。
figureタグの使い方
<figure>タグは<img>タグを囲む形で使用します。
キャプションを入れる場合のみ<figcaption>タグを内部に記述し、画像だけで完結する場合には記述する必要はありません。
<figure>タグを用いることで、画像がメインコンテンツと関係が深いことを明示でき、<figcaption>でキャプションを追加できるため、ユーザーが見やすいだけでなく、検索エンジンにとっても画像のコンテンツであると理解しやすくなります。
<figure>
<img src="image.jpg" alt="Sample Image">
<figcaption>この画像はサンプルです。</figcaption>
</figure>どう使い分ければ良いの？
ここまでまとめてきた通り、<picture>タグと<figure>タグはそれぞれ異なる用途があります。
そのため、目的に応じて使い分けることが重要です。
画像の条件分岐を行いたい場合：pictureタグ
複数の解像度やフォーマットで画像を提供する必要がある場合には、<picture>タグが適しています。
例えばSPとPCで画像サイズを変えたいときや、画像形式をWEBP形式とJPEG形式で切り替えたいときなどです。
幅によって画像を切り替えるデザインを実装したい場合には<picture>タグを使用した方がレスポンシブの対応も、コンテンツとしても適切なマークアップをすることができます。
補足説明が必要な画像や図表の場合：figureタグ
図表や説明が必要な画像を使う場合には、<figure>タグの方が適しています。<figcaption>タグでキャプションを追加することで、画像内容を視覚的に理解しやすくなり、SEO効果も期待できます。
特に、記事内で図やグラフを使用する場合やメインコンテンツと密接に関連した情報の画像の場合は<figure>タグでマークアップをした方が効果的だと言われています。
両方を併用することも可能
使用する場面によっては、どちらかに絞りにくいこともあると思います。その場合、<picture>と<figure>を併用することも可能です。
例えば、複数の解像度や形式の画像を提供しつつ、キャプションも必要な場合に両方のタグを組み合わせることで、各タグのメリットを最大限に活かすことができます。
<figure>
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.jpg" type="image/jpeg">
<img src="image.jpg" alt="Sample Image">
</picture>
<figcaption>この画像は解像度別に切り替えられるサンプル画像です。</figcaption>
</figure>まとめ
使用方法が混在されがちな<picture>タグと<figure>タグですが、実は用途が異なっていたり、それぞれ使う場面が明確になっているタグでもあります。
正直、どのタグを書いてもWebサイトを作ることは可能ではありますが、適切なタグを使うことでSEOの面で良い評価を受けることができたり、検索エンジンに正しく認識してもらうことができるなど、良いことも多いです。
ぜひ、使い分けて綺麗なマークアップを目指してみてください！
