HOME
picture要素を使った画像の表示について備忘録としてまとめます。
picture要素とは？
HTMLのpicture要素は、様々な画面サイズやブラウザに合わせて、適切な画像を表示させる要素です。
画像の表示と言えばimg要素が真っ先に思い浮かびますが、picture要素はレスポンシブ化や読み込むファイルの切り替えをCSSやJavaScriptを使わずに処理してくれるので、img要素の進化版とも言えます。
source要素とは？
HTMLのsource要素は、picture要素の子要素として複数のメディアソースを指定したいときに使う要素です。
picture要素が「画像を表示する」という枠組みを用意するのに対し、source要素は、その枠の中で「どの画像ファイルを読み込むか」を指定する役割を担っています。
従来のimg要素ではなく、pictureとsourceを用いることで、以下のようなケースに対応することができます。
- レスポンシブデザインへの対応
- 様々な画像フォーマットへの対応
レスポンシブデザインへの対応
pictureとsourceを使えば、特定の画面サイズに一致した場合にのみ、そのファイルが使用されるように指定できます。
PC用の大きな画像ファイルをスマートフォンでも表示させようとするとページの読み込みの遅延につながります。
画面サイズごとに適切なサイズのファイルを読み込むようにすれば、あらゆるデバイスでスムーズな閲覧が可能になります。
CSSのメディアクエリを用いてPC用画像とスマートフォン用画像の表示非表示を切り替える方法では、両方のファイルを読み込んでしまうのでページ速度の低下を招きます。
様々な画像フォーマットへの対応
各ブラウザがサポートしている画像のファイル形式は異なります。
一つのフォーマットのファイルしか用意していなければ、そのフォーマットをサポートしていないブラウザを使ったユーザーには画像が表示されないということになります。
近年ではファイルサイズが軽量で表示速度の改善が期待できる「次世代画像フォーマット（WebPなど）」の使用が推奨されていますが、すべてのブラウザがサポートできていないというのが現状です。
pictureとsource要素を使えば、複数の形式の画像ファイル（jpg、png、WebPなど）を候補として用意することができるので、次世代画像フォーマットに対応しているブラウザと対応していないブラウザで表示する画像ファイルを切り替えることが可能です。
source要素とその属性
picture要素はあくまでも画像を表示するという定義を行うだけなので、ファイルパスは子要素に設置するsourceタグのsrcset属性に記述します。
sourceタグにはそれ以外にもmedia属性・type属性を設定でき、それらを使うことで条件ごとに読み込むファイルを切り替えることができます。
source要素のsrcset属性
表示させたいメディアファイルのパスを指定する属性です。
img要素における「src属性」と同じようにファイルパスを設定します。
source要素のmedia属性
どのデバイスや画面サイズでsource要素が適用されるかを指定する属性です。
media属性で指定されたウィンドウサイズの状態でのみ、そのファイルの表示を試みます。
主に、レスポンシブデザインで異なる画面サイズに合わせて画像を切り替えたい時に使用されます。
source要素のtype属性
画像ファイルのMIMEタイプ（ファイルの種類を特定するための識別子）を指定する属性です。
ブラウザがどの画像フォーマットをサポートしているのかを判断する際に利用され、type属性で指定されたMIMEタイプに対応している場合にのみ、そのファイルの表示を試みます。
picture要素の使い方
picture要素を使う時は必ずセットでsourceタグを子要素に設置します。
条件によって分岐させて読み込ませたいファイルの数分sourceタグを設置していきます（タグごとに条件とファイルを指定）。
なおsourceタグには閉じタグは不要です。
source要素が読み込まれる順番
source要素を記述するとブラウザは上に記述したsource要素から順に読み込みを試みます。
この時、media属性・type属性に指定した条件を満たしていれば、そのsrc属性に指定したファイルを読み込み、条件が当てはまらなければ次のsource要素の読み込みを試すという処理を繰り返します。
条件を満たしてファイルの読み込んだ場合、それより下のsource要素は無視されます。
末尾には該当しなかった場合やpicture要素に非対応のブラウザの場合の為にimg要素を設置し、ファイルパスを指定しておきます。
下記が実際の記述例です。
HTML
<picture>
<source media="(min-width:900px)" srcset="sample1.jpg">
<source media="(min-width:600px)" srcset="sample1-tab.jpg">
<source srcset="sample1-sp.jpg">
<img src="sample1.jpg">
</picture>
2行目画面の横幅が900px以上の場合は、PCを想定した「sample1.jpg」を読み込みます。
3行目画面の横幅が900px以下で600px以上の場合は、タブレットを想定した「sample1-tab.jpg」を読み込みます。
4行目画面の横幅がそれ以外（600px以下）の場合は、スマートフォンを想定した「sample1-sp.jpg」を読み込みます。
5行目末尾には該当しなかった場合やpicture要素に非対応のブラウザの場合に表示する画像をimgタグを使って記述しておきます。
読み込み後の画面サイズの可変にも対応
CSSのメディアクエリと同じように、ページ読み込み完了後に画面サイズが動的に変更（PCでブラウザのウィンドウのサイズを狭める等）された時にも、ソースが切り替わります。
ブラウザの対応フォーマットによって表示を切り替える
続いてはpicture要素のtype属性を使って、ブラウザが画像の次世代フォーマットWebPに対応しているかどうかで読み込むファイルを切り替えるようにします。
img要素のみでWebPを扱うと、非対応ブラウザでは画像が表示されないという事態になりかねませんが、picture要素を利用すればそのような状況を回避することができます。
HTML
<picture>
<source type="image/webp" srcset="sample1.webp">
<img src="sample1.jpg">
</picture>
2行目ブラウザがWebPに対応している場合はsample1.webpを読み込みます。
3行目ブラウザがWebPに対応していない場合はsample1.jpgを読み込みます。
まとめ
以上が、HTMLのpicture要素の使い方です。
video要素の子要素にsourceを使う方法については、こちらのページにまとめています。
