なんでもかんでも<picture>要素を使えばいいわけじゃない！レスポンシブ・イメージ実装の際の注意点
レスポンシブWebデザイン | 2014/10/06
画像表示のマルチデバイス対応をHTMLとCSSのみで実現できる「レスポンシブ・イメージ」ですが、効果的な使い方をするには、いくつか注意点があります。プロダクション・サイトで使えるようになるまでにはもう少し時間がかかりそうですが、基礎と注意点くらいは今から覚えておいても良さそうです。
Cloud Fourというアメリカの制作会社のブログ で、<picture>要素の使い方について注意を促していて、とても重要な情報だと思ったのでこちらでもシェアします。先日書いたレスポンシブ・イメージとPicturefill 2のまとめとあわせて、近い将来、レスポンシブ・イメージ実装の参考になれば幸いです。
まずは推奨の記述方法から
レスポンシブ・イメージ実装の際に推奨されるHTMLの記述方法は以下のとおりです：
- サイズ変更のみの場合は
imgにsrcset属性を使う - アートディレクションを入れる場合のみ
pictureを使う
とりあえず、これだけ覚えておけば、細かいところはこの記事をはてブ しておいて、使う時にもう一度見なおしてもらえればいいと思います（笑）。
ということで、報告は以上です。
以下、「詳しく知っておきたい」という方のためのまとめです。
目次
レスポンシブ・イメージの2つの使い道
頻繁に使われると想定されるレスポンシブ・イメージの使い道は、大きく2つに分けることができます。Cloud Four Blogの記事 では、それらすべてに<picture>要素を使うのではなく、上述したようにpictureまたはimg + srcsetを使い分けるべきだと書いています。
「なんでもかんでも<picture>要素を使えばいいわけじゃない！」とおっしゃっているわけですね。
僕もたしかにその通りだと思うわけですが、その理由を順序立てて説明していきます。
まずはレスポンシブ・イメージの2つの使い道からおさらいです。
1. 同じ内容で画像サイズのみを変更する（解像度の変更）
一つは、スクリーンサイズや解像度にあわせて同じ画像の内容で画像サイズ（寸法）だけを変更する場合。スクリーンの幅とそれにあった画像を指定する使い方です。
レスポンシブ・イメージについてのまとめで検証したように、400pxでは17KB、1200pxでは100KBといったように、画像の寸法でファイルサイズには大きく差が出ます。400pxの画像で十分なのに1200pxの画像を表示している場合、ダウンロードサイズが大きくなるだけでなく、ブラウザに不必要なレンダリングをさせることになります。
ちなみに、Cloud Fourの記事ではこの使い道を「解像度の変更（resolution switching）」と呼んでいて、僕が書いた以前の記事では別扱いにしていたRetina対応のための解像度の変更もここに含まれています。
2. 違う内容の画像を表示する（アートディレクション）
もう一つの使い道は、スクリーンサイズによって違う内容の画像を表示する（アートディレクションを入れて画像を変更する）場合です。たとえば、小さいスクリーン向けに違った写真の切り抜き方をする場合に使います。
以下のように横長の画像をデスクトップ向けに表示する場合、
そのまま縮小して表示させると写真がすごく小さくなってしまいます。
以下のように写真を切り抜いてあげると、より効果的に見せることができます。
2つの記述方法
HTML Living Standard やDev.Opera 、Cloud Four Blogの記事 で推奨しているレスポンシブ・イメージのHTMLの記述方法は以下のとおりです。
1. 解像度の変更
imgでsrcsetとsizes属性を使った記述方法です。
<img srcset="img/400w.png 400w, img/800w.png 800w, img/1200w.png 1200w" alt="幅に合わせた寸法での表示の例">
srcsetとsizesの両方を使った記述方法やデモなど、より詳しくはこちらをご覧ください。
2. アートディレクション
pictureを使った記述方法です。
<picture> <source media="(min-width:800px)" srcset="large.jpg"> <source media="(min-width:400px)" srcset="medium.jpg"> <img src="small.jpg" alt="ALTテキストはちゃんと記述しましょう"> </picture>
より詳しい説明とデモはこちらをご覧ください。※ちょっとややこしいですが、こちらのデモではpictureとsrcsetの両方を使った記述方法を紹介しています。
話しが少し脇にそれてしまいましたが、なぜ上述したHTMLの記述方法が推奨されるのでしょうか？
その理由は、pictureとsrcsetの画像指定によるブラウザの挙動の差にあります。
pictureとsrcsetの違い
レスポンシブ・イメージの2つの記述方法の違いは、srcsetではブラウザに対して状況に応じた選択の余地を与えているのに対し、pictureではブラウザに判断の余地がないところにあります。
srcsetの場合はブラウザに選択の余地がある
上のサンプルコードの場合、srcsetで400w、800w、1200wの幅で使ってほしい画像をブラウザに対して提案しているにすぎず、最終的にはブラウザの判断でユーザの閲覧環境に応じて画像を表示する仕組みになっています。そのため、iPhone 5のようにスクリーン幅が320pxでもピクセル比が2の場合は、ブラウザが自動的に800wに指定した画像を選んでくれます。
たとえば、将来的に「3G回線では高解像度の画像をダウンロードしない」といった機能がブラウザに追加された場合でも、srcsetを使った記述方法であれば対応できることになります。
pictureの場合は限定的な指定になる
反対に、pictureを使った記述方法では、上のサンプルコードの場合、400pxより小さいサイズではsmall.jpg、400px以上ではmedium.jpg、800px以上ではlarge.jpgが表示されるように限定した指定になります。メディアクエリで指定したものにブラウザの判断する余地はないため、必ず指定された画像が表示されます。
pictureを解像度の変更の用途で使う場合、iPhone 5ではsmall.jpgが表示されます。
このため、解像度の変更のみが目的の場合は、pictureではなく、srcsetが使われるべきだということです。
pictureとsrcsetの組み合わせも可能
ちなみに、以前の記事のデモのように、アートディレクションを入れた画像で解像度の変更にも対応したい場合、pictureとsrcsetを組み合わせた書き方もできます。
まとめ
レスポンシブ・イメージはレスポンシブ・サイトでなくてもRetina対応などに活用できるものです。もうすぐChromeの正式版でサポートが開始されますし、Picturefillなどのポリフィルを使えば今から実装できなくもありません。メリット・デメリット、問題・課題、またターゲットとするユーザの閲覧環境を考慮してうまく活用すれば、ユーザにより良い体験を提供できるのではないでしょうか？
以前の記事にも書きましたが、これから課題となるのは複数の画像制作の効率化だと思います。冒頭で紹介したCloud Four Blogの記事の著者であるGrisby氏もそれを認識していて、すでに画像加工の自動化ツールの一覧 をブログで紹介しています。自動化が可能なところは機械にまかせて、手間をかけずに、より効率的に、より良いユーザ体験が提供できたら嬉しいですね。
こちらの記事もあわせてどうぞ
使用した画像について
ありがとうございました！