レスポンシブサイトなどで、スマートフォンの場合とPCの場合で表示する画像変更したいことがあります。
CSSのclassなどで制御することも可能ですが
pictureタグを使ってHTMLの記述だけで画像の切り替えを指定することができます。
pictureタグを使った画像切り替えの設定方法を紹介します。
基本的な使い方
pictureタグでは子要素に sourceタグ を使い画像を指定します。
sourceタグは今回紹介するpictureタグの他に、audioタグ・videoタグの子要素として設定することができます。
sourceタグには以下の属性を設定することができます。
- srcset（必須）
条件に一致したときに表示する画像のパスを指定 - media
ブラウザ幅（min-width, max-width）の値を指定 - type
jpg, png, svg, webpなど、画像形式を指定 - sizes
ソースが表す画像が最終的に表示される幅を指定
sizes は srcset でピクセル倍率ではなく幅指定子が指定された場合の効果があります。 - width
画像の横幅を指定 - height
画像の高さを指定
<picture>
<source srcset="画像のパス">
<img src="画像のパス" alt="代替テキスト">
</picture>
シンプルな書き方ではこのように書くことができます。
表示画面幅ごとに画像を変える記述
pictureタグでは、表示するブラウザの環境などに合わせて呼び出すファイルを変更するように条件を指定することができます。
<picture>
<!-- ブラウザ幅最大～1024pxまでsample3の画像が表示 -->
<source srcset="images-3.jpg" media="(min-width: 1024px)" type="image/jpg">
<!-- ブラウザ幅1023～768pxまでsampleの画像が表示 -->
<source srcset="images-2.png" media="(min-width: 768px)" type="image/png">
<!-- ブラウザ幅767px～から最小幅までsample2の画像が表示 -->
<img src="images.png" alt="代替テキスト">
</picture>
上記の例ではsourceタグの属性でmedia属性を使い、画面サイズごとに表示する画像を変更することができます。
読み込まれるファイルの優先度は先に書かれたものが優先され、img タグで書かれたものが一番優先度が低くなります。
対応していない形式のブラウザにも対応できるように記述
また、上記の例のようにtype属性でファイルの拡張子を指定して、呼び出される画像ごとに異なる拡張子を利用することもできます。
最近では透過画像を比較的軽い要領で持てる「webp」形式での画像も多くなってきました。
主要ブラウザのほとんどはwebpが表示できるようになっていますが、IEなどの一部のブラウザでは利用できない場合があります。
そんな状況が予想される場合は以下のように設定しておくことができます。
<picture>
<!-- webp対応ブラウザではwebp画像を表示 -->
<source srcset="images.webp" type="image/webp" />
<!-- webp非対応ブラウザではpngの画像を表示 -->
<img src="images.png" />
<picture>
このようにHTMLで設定しておくだけでwebpに対応しているブラウザ、非対応のブラウザごとに画像の呼び出しを変更することができます。
CSSやJavaScriptを記述する必要がないため手軽に利用できます。
