「レスポンシブ・イメージ」は、レスポンシブWebデザインの画像の扱いの課題をHTMLとCSSのみで解決するものです。具体的な内容は下記の２つです。
- 画像解像度の変更
- 違う画像を表示 (アートディレクション)
レスポンシブ・イメージ
レスポンシブ・イメージ実装の際に推奨されるHTMLの記述方法は下記のとおりです。
| HTMLの記述方法 | 各ブラウザの対応状況 | |
|---|---|---|
| 画像解像度の変更 | img要素のsrcset属性 | Can I use (対応が進んでいる) |
| アートディレクション | picture要素 | Can I use (あまり対応が進んでいない) |
詳しくは、下記のサイトで説明がありますので、ご覧ください。
http://parashuto.com/rriver/responsive-web/picture-srcset-use-case
https://dev.opera.com/articles/ja/native-responsive-images/
http://www.html5rocks.com/ja/tutorials/responsive/picture-element/
http://parashuto.com/rriver/responsive-web/responsive-images-and-picturefill-2
これらはあくまでピンポイントの課題を解決するものであって、何でもかんでも画像に適用するものではないと思います。
わたしの場合は、レスポンシブWebデザインの中で、横長のバナー等を使わなけければならない状況の際に、PC等では問題ないのですが、スマホの縦表示などでその画像がものすごく縮小されてしまい困っていたので、レスポンシブ・イメージ実装の「アートディレクション」に着目してみました。
ポリフィル
まずは、最新ブラウザ（モダンブラウザ）の仕様・機能を基準としつつ、古いブラウザ（レガシーブラウザ）にもjavascriptや拡張機能を駆使して、同様の表現、機能を提供する「ポリフィル」 について調べてみました。
Picturefill
有名なもの・王道としては、この「Picturefill」だと思うのですが、あまりにも高機能すぎて「アートディレクション」だけを考えた場合、ちょっとここまではと思います。高機能なだけにバグが怖い・・・
jQuery Picture
２年前からメンテが止まっていますが軽量・シンプルな「jQuery Picture」。しかし、FirefoxやChromeなどpictureに対応しているモダンブラウザとちょっと違う動きをしてしまいます。しかしながら、軽量・シンプルなので、これをforkしてFirefoxやChromeと同じような動きに改良できそうな気がします。時間があったらして作ってみたいと思います。
HTMLの記述方法
いろいろな記述形式はありますが、下記のような記述がよさ気です。
<picture> <source media="(max-width: 479px)" srcset="/small-800x800.png"> <img alt="test image" src="/big-1200x300.png"> </picture>
解説
- picture要素の子にimg要素を入れてないと、Firefox40 / Chrome44でアートディレクションの動きをしてくれなかった。
- source要素では、src属性ではなく、srcset属性で指定してあげないとFirefox40 / Chrome44でアートディレクションの動きをしてくれなかった。
- Firefox40では画面のリロード時のみアートディレクションが動作し、Chrome44では、リロード・リサイズともにアートディレクションが動作した。
- pitcure要素の動きをしてくれないブラウザでは、img要素で指定された画像が表示される。
- 他の記事ではsouce要素のmediaをmin-widthにしたサンプルが多かったのですが、souce要素のmediaをmin-widthにしてしまうと、pitcure要素の動きをしてくれないブラウザでimg要素の画像(上記の例のsmall-800×800.pngにあたる画像)を読み込んでしまう。
- IE8向けには、picture要素が対応の html5shiv のバージョンを読み込んでおかないと、DOMで認識されないのでjQueryで操作できなくなってしまう。ちなみに、低いバージョンの html5shiv ではpicture要素が対応されてなかった。 ver 3.7.3ではOKだった。
- IE9は、source要素がDOMで認識されず、jQueryで操作できなかった。IE9でsource要素を読み込ませjQueryで操作するには、ダミーのvideo要素で囲んであげる必要があるようです。これはIE9の仕様らしいです。以下「IE9でsource要素を対応させる力ずくな方法」をご覧ください。
- ポリフィルを入れないと、iOS Safari でアートディレクションされない (これが１番困る)。
- そもそも、HTML規格的にも、各ブラウザもまだまだだし、ここまでやんなくても、おとなしくdata属性とjQueryの組み合わせで独自にやったほうが事故がなさそうｗ
<picture> <!--[if IE 9]><video style="display: none;"><![endif]--> <source media="(max-width: 479px)" srcset="/small-800x800.png"> <!--[if IE 9]></video><![endif]--> <img alt="test image" src="/big-1200x300.png"> </picture>
以上、まだまだ「レスポンシブ・イメージ」はこれからの感じですが、画像解像度の変更(img要素のsrcset属性)の方は各モダンブラウザ(Edgeも含めてｗ)で対応が進んできているので目が離せません。