ウェブサイトをパソコンで閲覧する人もいればスマホやタブレットで見る人もいますよね。そこで問題になるのが画像のサイズです。画像の大きさはサイト表示スピードに関係するので、大きな画面で見る人も小さな画面で見る人にも同じ画像を使うというのは都合が悪いのです。
もちろん多様化するデバイスにHTMLやブラウザは対応しつつあります。例えば画像<img>にはsrcset属性とsizes属性というのが追加されつつあります。(残念ながら現在のところchromeとoperaのみのサポートですが)
これは画像のサイズと表示されうるサイズを指定して、ブラウザにデバイス毎の適切な画像を選択してもらうという発想です。Google Developersやsrcset と sizes(の翻訳)がわかりやすく役に立ちそうなので、興味が湧いた人は是非覗いて見てくださいね。
Amazonの画像は大きさを自由に指定出来る
前述したようにsrcset属性は大変便利な機能です。そしてフォールバックもあるので今日から使うことができます。ただ、いろんな大きさの画像を用意するのは面倒くさいですよね。もちろんサーバの管理者なら画像編集ソフトで一括処理しても良いですが、次はストレージサイズが気になるところです。
ところでネット広告の１つであるamazonアフィリエイト(アソシエイト)はいろんな画像をブログなんかで利用できて、小遣い稼ぎもできる便利な奴です。そしてamazonアソシエイトの画像はオプションを指定すると様々な加工を行うことが可能で、リサイズもできることは割と有名な話です。そう、簡単にリサイズできるamazonの画像と今日から使えるsrcset、良い組み合わせだと思いませんか？
簡単なデモ
srcsetによるレスポンシブな画像を確かめるために簡単なデモを用意しました。このデモでは幅が1602px(オリジナル), 1200px, 970px, 640px, 320pxの画像を指定してあります。サイズは適当ですが、よく使われそうなサイズを出来るだけ選んでみました。
chromeでデモページを開いてみてください。簡単にsizes=”100vw”と指定してあるので、windowサイズによって適切な大きさの画像が読み込まれているのがわかります。（Retinaとかだと、結果が異なります。たぶん。)
ちなみにsrcsetに対応していないブラウザでみるとデフォルトの幅110pxの画像が表示されるように設定してあります。
具体的な例 – Bootstrap
srcsetがどんな働きをするのか見えてきたところで、次は少し具体的なデモを見てみましょう。当然ですが、srcsetはBootstrapのようなレスポンシブなcssフレームワークと相性が良いです。
Bootstrapも怪しいのに慣れないsrcsetとsizes使ってみたので、変な所があるかもしれませんが、とりあえず期待した動作をしています。なおsrcsetは最初のデモと同じものです。また、フォールバックは既に確認したのでこのデモにはpicture要素やsrcsetのpolyfillであるPicturefillを読み込んでいます。ですからchrome以外のブラウザでも確認することができます（img.srcがリクエストされるのであまり旨味はないですが）。
さて、このデモの内容ですが、srcsetが最初のデモと同じなので、sizesに注目してください。Bootstrapのgridシステムではカラムの幅がfixed-width(.container)かfull-width(.container-fluid)によって違うので、sizesも異なる指定になります。
fixed-widthの場合、カラムの幅の最大値がわかっているので、ブレイクポイント毎に最大値とカラム数を掛ければ画像の表示最大幅が分かるはずです。全ての最大幅を指定しておけば、縮小されることはあっても拡大されることはなさそうですね。
full-widthの場合、カラムの幅の最大値は可変なので、ブレークポイント毎に、ビューポートに対する相対値で指定すると良さそうです。絶対的なcss最大幅は全てのcssがパースされるまでわからないですからね。（画像のリクエストはpreload-scannerによってもっと早い段階で出るらしい）
flickrやpicasaもリサイズしてくれる
amazonのように自由に指定は出来ませんが、flickrやpicasa web albumもリサイズしたファイルを用意してくれています。恐らくほかの有名なオンラインウェブアルバムサービスも似た機能があるでしょう。クラウドサービスを利用して楽にレスポンシブイメージを使っていきたいですね。
注意事項
繰り返しになりますが、私はsrcsetの全てを理解出来てるわけじゃないので、勘違いや間違いがあるかもしれません。あとamazonアソシエイトの規約を読んだわけではないので、画像のオプションを利用して良いものかどうかも知りません。お金が絡むことなんで自己責任でね！