03-6416-3903

平日10:00〜18:00

CONTACT

最新情報 & コラム

レスポンシブに画像を切り替えるならpictureタグを使おう

ALLWEB

pictureタグを使用すると、CSSやJavaScriptを使用せずに、HTMLだけで簡単にPC用の画像とスマホ用の画像を切り替えることができます。

よくレスポンシブ対応をする時に、CSSのdisplayを使って表示・非表示を切り替える方法があります。

しかし、この方法だと画像幅に関係なくPC用とスマホ用の画像が読み込まれてしまい、サイトの速度が遅くなってしまいます。

pictureタグだと条件に応じて必要な画像のみを読み込んでくれるので、サイトのパフォーマンスに影響を与えることはなくなります。

今回はこのpictureタグを使って、画面幅に応じて表示する画像を変更する方法をご紹介します。

pictureタグの使い方

pictureタグを使用する時の書き方です。

下記の書き方は画面幅に応じて画像を切り替える場合のコードです。

<picture>
  <source srcset="画像URL" media="(max-width:768px)">
  <source srcset="画像URL" media="(min-width:769px)">
  <img src="画像URL" alt="~">
</picture>

解説

pictureタグの中身には<source>と<img>を入れます。

ブラウザは上のコードから読み込み、条件に該当すれば画像を表示し、該当しなければ下のコードを読み取りに行きます。最終的に該当するものがなければ<img>の画像が表示されるという仕組みです。

条件とは?

<source>の中には画像URLの他に「属性」を入力することができ、その属性の指定で画像を表示する条件を作ることができます。

画面幅で変更する場合

属性にmedia="メディアクエリ"を記述することで画面幅に応じて表示画像を変更することができます。

<picture>
  <source srcset="画像URL" media="(max-width:768px)">
  <source srcset="画像URL" media="(min-width:769px)">
  <img src="画像URL" alt="~">
</picture>

画面形式で変更する場合

type属性を使うことで画像形式で表示・非表示を切り替えます。例えば、Googleが開発している軽くてきれいなWebPという画像形式ですが、safariとIEでは対応していません。(safariはサポート予定)

その未対応のブラウザのためにWebPを使わないのはもったいないのでpictureタグで対応しているブラウザのみ、WebP形式の画像を読み込ませるということもできます。

使用するのはtype属性。中には画像形式を記述します。

webPが使えるブラウザは<source>の画像が表示され、対応していない場合<img>の画像が表示されます。

<picture>
  <source srcset="画像URL" type="image/webp">
  <img src="画像URL" alt="~">
</picture>

IEに対応させる

pictureタグはIEに対応していないので、ポリフィルを読み込んで対応させます。

下記のURLから「picturefill.min.js」をダウンロードし、読み込ませることでIEでもpictureタグが使用できるようになります。

http://scottjehl.github.io/picturefill/