picture要素はRWDの救世主となりうるのか？

Written by Sato Daisuke

RWDにおける画像の扱い

ケースバイケースではありますが、レスポンシブで画像を扱う且つスマホ用にretina対応するとなると注意が必要です。

background-imageであれば、メディアクエリを使って、サイズに合わせて適切な画像を出し分けできますが、

imageタグの場合、そう簡単にいきません。

サクッとJSでコントロールしても良いですが、できれば、もっと簡単にやりたいところ。

picture要素だとそこら辺を上手くやってくれるみたいなので、

polyfillが実現できるPicturefillと合わせて、ちょこっと紹介します。

picture要素とは

まず、picture要素の説明をすると

HTML5 ExtensionSpecifications つまりHTML5の拡張仕様として策定されている新しい要素です。
http://www.w3.org/html/wg/wiki/ExtensionSpecifications

 This specification provides developers with a means to declare multiple versions of an image at different resolutions,
 and, through [MEDIAQ] (CSS Media Queries), a means to create specialized presentations of an image and control when they
 are presented to a user.

引用：http://picture.responsiveimages.org/

とあるように、要は異なる解像度やデバイスに対して適切な画像を開発者が提供できるようになる仕様のようです。

Picturefillとは

Picturefillはpicture要素を現状対応できていないブラウザに対しても擬似的に実現してくれてるjsライブラリです。
https://github.com/scottjehl/picturefill

この現状対応できていないブラウザというのが、微妙な所で対応できていないブラウザがあるというより、

ほとんど対応できてないのでは？という素朴な疑問が…笑

一応、開発段階にあるブラウザに関しては実装され始めたみたいです。
http://news.mynavi.jp/news/2014/04/23/276/

使い方

→今回はこの2つを使って、書いてみます。

導入手順

  1. まずは下記からダウンロード

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

  2. 読み込ませて

    <script src="picturefill.js"></script>

  3. 後は記述するだけ

    <picture>
    <source media="(max-width: 640px)" srcset="logo_sp_medium.png, logo_sp_large.png 2x"/>
    <source srcset="logo_pc.png" />
    <img src="logo_pc.png" alt="ロゴ" />
</picture>

簡単ですね。

備考

  • media属性にブレイクポイント
  • srcset属性には対応する画像ファイルのパス

といったところでしょうか。

JSの動きを見ても、mediaによって、該当しているsrcsetのパスを抜き取って

imgのsrcを差し替えてるみたいです。

本当にpolyfillされているのかどうか？クロスブラウザで確認したとろ、

IE9には、少々対応が必要のこと

<picture>
    <picture>
        <!--[if IE 9]><video style="display: none;"><![endif]-->
        <source media="(max-width: 640px)" srcset="logo_sp_medium.png, logo_sp_large.png 2x"/>
        <source srcset="logo_pc.png" />
        <!--[if IE 9]></video><![endif]-->
        <img src="logo_pc.png" alt="ロゴ" />
    </picture>
</picture>

検証してみると

Picturefill使用

IE11 IE10 IE9 IE8 IE7
○ ○ ○ × ×
chrome(mac) fire fox(mac) safari(mac)
○ ○ ○
chrome(win) fire fox(win)
○ ○

※IE8, IE7などは最低限imgの画像は表示されます。

まとめ

ちなみに、現時点のPicturefillなしでのサポートですと、
canary chromeですら実装されていないので、これからだとは思いますが、
Picturefillを使用すれば、IE9まで対応できるので積極的に使っていきたいですね。

ありがとうございます。