こんにちは。エキサイトでデザイナーをしている齋藤です。
エキサイトホールディングス Advent Calendar 2024 シリーズ1の2日目を担当します。
今回は、HTMLのsourceタグとpictureタグを使用してレスポンシブに表示する画像を切替える方法をご紹介します。
はじめに
冒頭、sourceタグとpictureタグについてざっくり整理します。
sourceタグとは
sourceタグは画像や動画などのメディアファイルを格納する要素です。
srcset属性にファイルを指定します。
media属性を使用するとCSSのようにメディアクエリーを指定できます。
<source srcset="..." media="(max-width: 480px)" />
※終了タグは記述しません
pictureタグとは
pictureタグは画像要素の一つで、子要素にはimgタグ（必須）とsourceタグ（任意）を持ちます。
ページが読み込まれた際に、子要素のsourceタグを検証してメディアクエリーなどの条件に合致する画像を表示します。
どのsourceタグの条件に合致しない場合は、imgタグの内容が使用されます。
どうやって実装するか
例えば、スクリーンサイズが480px以下の場合はmobile.pngを、それ以外の場合はdesktop.pngを表示したいとします。
その場合は以下のようになります。
<picture> <source srcset="mobile.png" media="(max-width: 480px)" /> <img src="desktop.png" alt="hello world" /> </picture>
sourceタグには、「スクリーンサイズが480px以下の場合」という条件となるメディアクエリーをmedia属性に、条件に合致した場合に表示させたいmobile.pngをsrcset属性に指定します。
「スクリーンサイズが480px以下の場合」以外はdesktop.pngを表示させたいため、imgタグにはdesktop.pngを指定します。
これで完成です。
注意点
sourceタグとpictureタグを用いる場合はいくつか注意すべきことがあります。
sourceタグはimgタグより前に置く
WHATWGが発行しているsourceタグの仕様書を見ると以下のような記述があります。
As a child of a picture element, before the img element.
これは、ブラウザがHTMLを上から順に解読するため、条件を持つsourceタグを先に検証して、どれにも合致しない場合はimgタグの内容を用いる仕組みのためです。
sourceタグに指定した画像のaltはimgタグの内容になる
sourceタグに指定したmobile.pngの代替テキスト（alt）は、desktop.pngのalt属性の内容が用いられます。
<picture> <!-- mobile.pngのaltは「hello world」になる --> <source srcset="mobile.png" media="(max-width: 480px)" /> <img src="desktop.png" alt="hello world" /> </picture>
さいごに
今回は、HTMLのsourceタグとpictureタグを使用してレスポンシブに表示する画像を切替える方法をご紹介しました。
画像周りのレスポンシブ対応をされる方の一助となれば幸いです。
ご精読ありがとうございました。
