【HTML】レスポンシブや動画で有効なpictureタグとsourceタグ

レスポンシブの時の置き換えは、CSSを利用してメディアクエリでdisplay:noneで非表示にし、 display:block（或いはdisplay:inline）で表示していますが、sourceタグを利用すればHTMLだけで切り替える事もできます。

sourceタグは代替ファイルを指定するタグ（親要素が必要）

HTML5より、sourceタグの利用ができるようになりました。sourceタグは候補があった場合のみ利用される代替ファイルを指定するという機能をもった特殊なタグです。
普通のHTMLタグと仕様が異なり、親要素が必要です。
利用できる親要素は、pictureタグかvideoタグまたは、audioタグです。

利用できる親要素

• pictureタグ
• videoタグ
• audioタグ

sourceタグで利用できる属性

sourceタグは親要素のタグによって使用できる属性が変わります。

pictureタグの場合

• srcset（画像のURL）
• sizes（画像の条件とサイズ）
• type（画像の種類）
• media（画像の使用条件）

videoタグまたはaudioタグの場合

• src（動画またはオーディオのURL）
• type（動画またはオーディオの種類）

メディアクエリを利用して画像を置き換える

画像を置き換えるにはpictureタグを利用します。複数枚の候補の画像のsourceタグと、それ以外候補の画像をimgタグをpictureタグ囲みます。sourceタグの画像のURLの指定は必ず「srcset」で読み込む必要があります。

<picture> <source srcset="1つ目の候補の画像" 属性="値"> <source srcset="2つ目の候補の画像" 属性="値"> <img src="それ以外候補の画像"> </picture>

上の内容で例を紹介します。

HTML

<picture> <source srcset="./img/pc.jpg" media="(min-width: 1080px)"> <source srcset="./img/tb.jpg" media="(min-width: 768px)"> <img src="./img/sp.jpg"> </picture>

ウィンドウサイズを変更してみてください。1080px以下の時は犬の画像、768px以下の時はインコの画像になり、それ以外（1080pxより上）では猫の画像に切り替わります（スマホでは検証できません）。

pictureタグの中でsourceタグを上から1つずつ順番に読み込み、条件に当てはまれば、その画像を表示します。どれにも条件が当てはまらなない場合は最終的にimgタグが利用されます。

動画が再生できない場合に画像を表示

以下は、環境に応じて、動画が再生できない場合に画像を表示させる方法を紹介します。

<video poster="画像URL" autoplay loop muted playsinline> <source src="動画URL"> <img src="画像URL" alt=""> </video>

動画が再生できる場合は候補1の動画を再生し、動画が再生できない環境ではimgタグの画像を表示させます。