レスポンシブイメージについての勉強メモ（1）肉！

肉！

そもそも。

<img src="big.png" width="50%">

<!-- 個人的な理想：上記はサーバから50%に縮小された画像が転送されてくる -->
<!-- 現実　　　　：100%のデータが転送されて来てからブラウザが50%に縮小してから表示 -->

なんで、こんな風になってるんですかね。

レスポンシブデザインの勉強会でfluid imageを教えてもらったのですが、スマフォ用サイトでPC用のでっかい画像を縮小して使え、はないと思います。

これはアレですよ。

100gの牛肉 が欲しくて注文してるのに、A○azonから 牛1頭届く ようなモンです。

さずがのA○azonさんでもたぶん送料取りますよ?
そのうえ送られて来た牛どーすればいいの！サバくの大変だよ？！というか可愛くてサバけない！

これは絶対変！
と、無知ゆえに勝手に脱線し妄想を膨らませ大いに怒り狂っていたところ、

レスポンシブイメージというのを使えばいいはず。。
最初っから50%に縮小してサーバに置いとけばいい。。

という声が聞こえてきました。

何それ？

というわけで、調べてみることにしました。

レスポンシブイメージって何?

牛 じゃなくて 牛肉 が出荷される方法のようです。

サーバが 牧場から精肉店に変わる んですね。←いや違う

なぜかここまでインターネットで牛画像やら肉画像やら漁ってばかりで一向に先に進む感じがしないので、まじめにレスポンシブイメージの記事を探してみました。

レスポンシブイメージを優しく教えてくれる記事へのリンク

ネットで探してみると、レスポンシブイメージのことを丁寧に噛み砕いて教えてくれる記事がいくつも見つかりました。

公開してくださった方々に感謝しつつ、とにかく読んでみました。

『新しい picture 要素の仕様が公開、レスポンシブ・イメージ最新動向』YOSHIKI KATOさん (2014.1.17)

picture要素の新仕様を解説してくれてます。

『Chrome 34ではimgタグで解像度に応じた複数の画像を出し分けられるよう、レスポンシブイメージ対応に』Junichi Niinoさん (2014.3.5)

Chrome v34でimg要素のsrcset属性がサポートされたようです。

『Webレスポンシブイメージの現状』Dio Synodinos さん / 吉田 英人さん訳 (2013.8.20)

WebKitでimg要素のsrcset属性をサポートされたのは、ずいぶん前のようですね。

『WebKitがsrcsetを実装！レスポンシブイメージの問題が大きく前進』白石俊平さん (2013.8.22)

上と同時期の記事。こちらも参考になります。

『次世代HTMLの新仕様「レスポンシブ・イメージ（仮）」についてまとめてみた』ryo watanabeさん(2012/06/30)

2年ちかく前の記事ですが、解りやすくまとめてくれています。

『Responsive imagesのための-webkit-image-set()』myakuraさん (2012.3.23)

2年も前の記事ですが、CSSのimage-set属性についての記事。

これだけ読むと、さすがに判ってきましたよ！

仕様など

まだ仕様が固まってるわけではないので、仕様の動向も注目ですね。

Responsive Images Community Group

仕様策定を進めているW3CのResponsive Images Community Groupのサイト。

CSS Image Values and Replaced Content Module Level 4

そして、こちらがCSSのimage-setの仕様。

つまり

レスポンシブイメージを使えば、1つのイメージを複数の画面サイズに対応させるために、予め複数のサイズの画像ファイルが指定できるようになるようです。

コレが出来るようになるわけですね。

とりあえず、ブラウザに実装されそうなやり方、に限定すれば、そのやり方は3つになりそう。

1. imgタグの srcset属性
2. pictureタグ
3. CSSのimage-set属性

さわってみる

上記はHTML5.1、CSS4で正式採用を目指しているようです。

まだ動かないブラウザも多そうですが、使えるようになると便利そうです。
ちょっと見てみましょう。

レスポンシブイメージ適用前

とりあえず、下記のような画像が1枚だけの手抜きサイトを作ります。
こちらは、一応、fluid imageで作っています。

単なるfluid imageのサイト

※写真は我が家のネコです。床方面は ありえないレベルで 散らかりまくってるので、目線より上の方しか写してませんw

画像部分のコードは下記のようになっています。

サンプルはmedia queriesを使って縦用と横用で分けていますが、説明をシンプルにするために、ここでは横用をベースに書きます。

<style>
#wall > img {
  position:absolute;
  width:100%;
  height:auto;
  z-index:-100;
}
</style>
:
<div id="wall"><img src="img/cat.jpg"></div>
:

これをもとに、レスポンシブイメージに対応させてみます。

img srcsetに対応させてみる

それでは、一番簡単そうなimg srcsetに対応させてみます。

<img src="img/cat.jpg" srcset="img/cat.jpg 1x, img/cat1136.jpg 2x">

iPhone 5c (iOS Version 7.1)が手元にありますので、dpx比が2の時用の画像を作って指定してみました。
imgタグにsrcset属性を足して、対応画像を追加しただけです。
これなら簡単ですね。

テスト結果

あれれ。
上記キャプチャーはcat1136.jpgじゃない方が表示されてる。つまりdpx比2の時じゃない方の画像。

<img src="img/cat.jpg" srcset="img/cat1136.jpg 2x">

でも結果は変わりません。

img srcsetは効いてないようです。

同じコードでMacbook Air（OS 10.8.5）のGoogle Chrome 34βでは動きました。

iPhoneでうまく動いてくれないので、下記のようにサイズ指定でもやってみました。

<img src="img/cat.jpg" srcset="img/cat.jpg 1x, img/cat1136.jpg 568w">

画面のwidthが568px以下ならcat1136.jpgが読み込まれる設定です。

結果、これでもiPhoneは動いてくれませんでした。
今度は、MacのChromeでも動かなくなりました。

img srcsetの対応状況

なんだか、残念な状況なので、もう一度インターネットを調べてみると下記のような情報を見つけました。

stackoverflowに情報がありました。

以下、一部引用します。(Mikeさんよりの回答部分です)

No. 5

Updated Feb 2014
There are various aspects to srcset, including pixel density and viewport width. At the time of writing:

• viewport width isn't supported by the current versions Safari, Chrome or Firefox
• pixel density is supported by Chrome

I've put some test files and results on a Github repo which I'll try to keep current.
edited Feb 27 at 21:50

うーん、確かに今回の結果と一致してますね。
来週会社に行ったら、念のためMarvericksのMacbook Airでも試してみます。

picture要素はどう?

こちらは、対応してそうなブラウザがまだありません。
が、タグの書き方は違うものの、やれることはimgタグのsrcsetとあまり変わらないような気がします。

試してみるには、pictureタグをspanで代用して実装するpolyfillのPicturefillを使えばよさそうですが、今回は面倒なので飛ばします。

CSS image-setに対応させてみる

こちらはiPhone 4と同時に登場し、Ratina対応のためのTipsで多く使われています。
下記のように修正してみました。

<style>
#wall{
  position:absolute;
  width:100%;
  height:100%;
  top:0px;
  right:0px;
  background-image:-webkit-image-set(url(img/cat.jpg) 1x, url(img/cat1136.jpg) 2x);
  background-position:right top;
  background-repeat: no-repeat;
  background-size:cover;
  z-index:-100;
}
</style>
:
<div id="wall"></div>
:

今回のような使い方（縦・横の長い方でフィットさせたい）の場合、background-size:coverが使えるぶん、img srcsetを使うより簡単ですね。
media queriesと併用する必要がなくなりました。

CSS image-set()のサンプル

テスト結果

Macbook AirのChrome、iPhone5CのMobile Safariの両方で動作しました。
他の機種ではまだテストしてません。

まとめ

はじめてレスポンシブイメージを触ってみました。さらりと。
画面サイズに応じて最適な画像を作る、というところまでは行けていない。
今回の感触、得られたことは、

• img srcsetはまだあまり動かない　ということがわかった。
• pictureタグも動かないけどpolyfillがある。けど面倒そう、ということがわかった。
• CSS のbackground-image:image-set()はiPhoneとMacのChromeで動く。-webkit- prefixでの対応なので他でも動くかも。

というわけで、しばらくはCSS image-set()を使う感じでしょうか。

引き続き、学習してみようと思いますので、判ったらまた牛・肉画像検索しますw

• 当初のテーマである画面サイズに合わせて画像をどう用意するか、のノウハウの部分
• AndroidやIEなどではどうすれば良いか。動作検証ふくめ状況を確認
• サーバー側ソリューションや、image-set()のヘルパーライブラリなども

それでは、おやすみなさい～