PCとスマホでは縦長か横長といったアスペクト比、画面サイズなど、表示される環境が異なります。そのためディスプレイに合わせた最適な画像を表示させたい場合に、表示画像を切り替えるケースがしばしばあります。そんな時にHTMLだけで完結できるpicture要素を使った方法についてまとめていきたいと思います。   通常、画像はimg要素を使って表示させますが、HTML5で追加されたpicture要素を使った場合にはこのような形になります。

<picture>
 <source media=" MEDIA_QUERY " srcset=" IMAGE_FILE_PATH ">
 <img src="../img/default.jpg" alt="Image">
</picture>

  なにやら見慣れないタグや属性がありますが、主な要素や属性を下記にまとめています。

picture要素	画像要素を示すタグで内部にはsource要素とimg要素を内包します
source要素	画像や動画ファイルなどのリソースが複数存在する場合に個別で指定するための要素
media属性	メディアクエリの指定を値で行う、CSSで扱うメディアクエリが使える
srcset属性	画像や動画ファイルなどのソースを複数設定できる

  このように画像リソースをより詳細に指定する場合にpicture要素が用いられ、これによって画像リソースを切り替えることが可能になります。picture要素内では上から順に、条件に対応しているsource要素を判別し、どの条件にもマッチしない場合には最後のimg要素が選択される形になりますので、記述する順番も重要になってきます。  

モバイル用に表示画像を切り替える

いわゆる「レスポンシブイメージ」というもので、ディスプレイ幅によって表示画像を切り替える方法になります。画像をトリミングせずに全て表示させる前提で、表示画像を切り替え最適化するこの手法はアートディレクションとも呼ばれます。 【HTML】※一部抜粋

<picture>
 <source media="(min-width: 769px)" srcset="../img/desktop.jpg">
 <source media="(min-width: 481px)" srcset="../img/tablet.jpg">
 <img src="../img/mobile.jpg" alt="Image">
</picture>

  上記では、画面幅が769pxまではPC用の画像が表示され、768pxからはタブレット用の画像が表示され、480pxになるとスマホ用の画像が表示されるというものです。source要素では、リソースファイルの指定をsrcset属性で行うので注意します。img要素のsrc属性の時と同じような感じでファイルパスを指定します。   最後にフォールバック用として表示させるimg要素を忘れずに入れておきます。実際に上記のコードで切り替わるサンプルを下記に用意しています。    

WebP形式の画像表示対応をする

次世代の画像フォーマットとして注目されている「WebP形式」の画像ですが、ブラウザによってはまだ対応していないものもあります。そんな時の表示切り替えにもpictureタグは有効です。 【HTML】※一部抜粋

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

  今回は画面幅によって切り替える必要はないのでメディアクエリは不要ですが、代わりにtype属性を使ってMIMEタイプを指定しておきます。あとは先ほどと同じくフォールバック用の画像をimg要素で用意してあげることで、WebP形式に対応しているブラウザではWebP形式の画像が表示されるようになります。    

高解像度ディスプレイ用に表示画像を切り替える

最近では高解像用のディスプレイが増えてきていますが、まだ通常の解像度であるディスプレイも存在しています。そんな時に画像リソースを高解像用のディスプレイに合わせてしまうと不用意に画像サイズが大きくなり、読み込みが遅くなる可能性があるという問題が発生してきます。 【HTML】※一部抜粋

<img 
 srcset="
  ../img/sample@1.5x.jpg 1.5x,
  ../img/sample@2x.jpg 2x,
  ../img/sample@3x.jpg 3x
 " 
 src="../img/sample.jpg"
 alt="Image"
>

  実は単純に解像度別に画像を切り分けたい場合には、上記のようにimg要素単独で、srcset属性によってそれぞれの解像度別に表示させる画像のファイルパスを指定すれば実現できます。ただし、その際には「ピクセル密度記述子」と呼ばれる記法が必要となります。   ピクセル密度記述子は、画像ファイル名の後に半角スペースを挟んで、1x、2xなどといった形で解像度の倍率を指定します。合わせて画像ファイルには@2xといった表記にしておくとわかりやすいですね。これらをカンマ区切りで並べていきます。一応、今回はpicture要素を使った切り替えがテーマですので、高解像度用の切り替えと画面幅での切り替えの両方が必要となった場合には下記のように組み合わせて実装する形になります。 【HTML】※一部抜粋

<picture>
 <source 
  media="(max-width: 768px)" 
  srcset="
   ../img/mobile.jpg 1x,
   ../img/mobile.jpg@2x 2x
  "
 >
 <img 
  srcset="../img/desktop@2x.jpg 2x" 
  src="../img/desktop.jpg" 
  alt="Image"
 >
</picture>

  下記に解像度別で画像が表示切り返されるような形にしてありますので、表示中にディスプレイで試してみてください。    

IE11では対応していないので注意

今回まとめているpictureタグですが、IE11には対応していないので注意が必要です。IE11に対応させるには下記のように別途ライブラリを使うなどJavaScriptで対応するようにしましょう。 【Picturefill】 http://scottjehl.github.io/picturefill/ （過去記事） サイトの画像をjQueryでRetinaディスプレイ対応にする  

---

  今回はpicture要素を使って画像表示の切り替えをする方法についてまとめてみました。このようにHTML5以降はいろんな機能が拡張してきているので、これらを使いこなすことでかなり効率的なコーディングができるのではないでしょうか。これまでメディアクエリを使ってCSSの表示非表示で実装していた方は是非試してみてはいかがでしょうか。