HTML

pictureタグで画像の出し分け・レスポンシブ対応する方法【HTML】

最終更新日：2024-10-04

公開日：2024-10-04

記事内に広告が含まれています。

PCやスマホで画像を切り替える際、それぞれのimg要素を用意し、クラスを付けて出し分けているという方も多いと思います。今回解説するpicture要素を使えば、CSSやJSを使わず、簡単にデバイスごとに画像の出し分けが出来て、レスポンシブ対応が可能となります。

picture要素とは
pictureタグの基本的な使い方
対応している画像の形式で出し分けをする
画面サイズで画像を出し分け(切り替え)する
width、height、alt属性について
pictureタグでクラスは使用できない
さいごに

picture要素とは

picture要素を使う事で、CSSやJSを使わず、簡単にデバイスごとに画像の出し分け(切り替え)が出来る便利な要素です。このpicture要素では主に以下のような事が可能になります。

画面幅によって表示する画像を切り替える
ブラウザが対応していない画像の場合は、他の形式の画像を表示する

例えば、画面幅がPCサイズならpcimg.jpg、スマホサイズならspimg.jpgを表示や、WebP形式の画像に対応していない場合はjpg画像を表示するといった出し分けが可能となります。

pictureタグの基本的な使い方

picture要素の基本的な使い方として、pictureタグの中に0個以上のsourceタグと、1個のimgタグが必要となります。まずは以下をご覧ください。

<picture>
    <source srcset="優先度1の画像のURL">
    <source srcset="優先度2の画像のURL">
    <img src="優先度3の画像のURL" alt="代替テキスト">
</picture>

sourceタグはimgタグと同じく閉じタグが無いタグとなり、srcset属性に画像のURLを記述します。
imgタグは1個だけですが、sourceタグはいくつあっても大丈夫です。

このように記述する事で、上から順番に読み込まれ、条件に合わない場合は次の画像、最終的に条件が合わなければimgタグで指定している画像が表示されます。imgタグはどの条件にも該当しない場合となりますので、必ず最後に記述してください。

対応している画像の形式で出し分けをする

次に、対応している画像形式で画像を出し分けする方法を解説していきます。
現在主要ブラウザは大体の画像形式には対応していますが、IEや少し前のブラウザではWebP形式に対応していません。主にこのWebP形式に対しての出し分けとなります。

<picture>
    <source srcset="img/sample.webp" type="image/webp">
    <img src="img/sample.jpg">
</picture>

上記の記述でWebP形式の画像に対応している場合sample.webpを表示、対応していなければsample.jpgを表示します。

type属性について

type属性には、画像の形式をMIMEタイプで指定します。
WebP形式以外はほぼ全てのブラウザが対応している為、WebP形式の時以外は記述しなくても大丈夫です。

画面サイズで画像を出し分け(切り替え)する

picture要素で画面サイズごとでの画像の出し分け(切り替え)をするには、source要素に対してメディアクエリ(media属性)を使用します。まずは以下のコードをご覧ください。

<picture>
    <source srcset="img/sample1.jpg" media="(min-width: 1024px)">
    <source srcset="img/sample2.jpg" media="(min-width: 768px)">
    <img src="img/sample3.jpg">
</picture>

CSSのメディアクエリと同じ形式でsourceタグのmedia属性に記述します。
上記の例は以下のような画像の出し分けとなっています。

画面サイズが1024px以上はsample1.jpgを表示
画面サイズが1023px～768pxはsample2.jpgを表示
画面サイズが767px以下はsample3.jpgを表示

このように、画面サイズで画像の出し分けが可能となっていますので、ブレイクポイントやデバイスの画面サイズによって簡単に画像を切り替えられます。

width、height、alt属性について

先ほどまでのコードでは、分かりやすくするようにwidth属性やheight属性は省いていましたが、imgタグだけではなく、sourceタグにも必ず記述するようにしてください。
記述しない場合、画面の読み込み時や画像切り替え時にレイアウトが大幅にずれてしまう「レイアウトシフト」が発生してしまう可能性があるからです。

また、alt属性に関してですが、sourceタグのsrcsetに記述した画像のURLは、随時imgタグのsrc属性に置換される為、imgタグのみに記述してください。

<picture>
    <source srcset="img/sample1.jpg" media="(min-width: 1024px)" width="300" height="200">
    <source srcset="img/sample2.jpg" media="(min-width: 768px)" width="300" height="200">
    <img src="img/sample3.jpg" width="300" height="200" alt="代替テキスト">
</picture>