picture要素でwebpフォーマットを手軽に使おう

JPGE 2000という画像フォーマットをご存知でしょうか。jpegの代替を目指してこの世に生まれました。safariが対応しています。

JPEG XRという画像フォーマットをご存知でしょうか。これもjpegの代替を目指してこの世に生まれました。IE9+で対応しています。

WebPという画像フォーマットをご存知でしょうか。これも勿論jpegの代替を目指してこの世に生まれました。Google ChromeやOperaが対応しています。

そして2015年、現在の勝者はJPEGです。理由は簡単。全てのブラウザがサポートしているのがJPEGだからです。大人の事情溢れるなんとも不毛な話です。歴史を振り返ると、この後もすぐに統一的な規格が現れるとは思えませんね。

だけど、2015年はWebP飛躍の年になるのではないかと考えています。

pictureエレメントでwrap

今まではjpeg代替フォーマットを使う場合、ブラウザがサポートしていない場合に備えてサーバーでブラウザに合った画像を選択して返す必要がありました。サーバーの設定を弄れない場合もあるし、なにより面倒くさいNE!

しかし、Chrome 38+で対応しているpicture要素を使うと<source>をマークアップしていればブラウザがフォーマットの差を吸収してくれて、勝手に複数の画像から適切なものを選んでくれるので楽チンです。

例えばこんな感じ！

ご覧のようにpictureエレメントがブラウザ毎にサポートしている画像フォーマットが異なるという問題を吸収しているのが分かります。そして将来的に別の新しい画像フォーマットが生まれたとしても<source>を一番上に追加するだけで対応できるのです！

<picture>は他にもmedia queryを使ったレスポンシブな画像や、アートディレクションなど複雑難解な機能があるのですが、このように基本的な使い方だけでも十分パワフルです。JPEGが死ぬことはありませんが、新しいフォーマットが使いやすくなるのは確かですね。