HTML5のsrcset属性でRetina対応の画像を切り替え表示させる

プログラムでデバイスを判定してRetina用の画像をシコシコと切り替えている皆さん、こんにちは。

CSS3とMediaQueryを駆使してレスポンシブデザインでサイトを作ったものの、iPhoneを筆頭とする高精細ディスプレイ搭載での画像表示がボケてしまう問題があります。よく言われる「スマホサイトの画像は2倍サイズで作れ」というもの。

デバイスに最適な画像を表示させる方法として、いくつかの仕様策定が進んでいましたが結局はブラウザの実装待ちということで、今までは主にプログラムで判別して最適な画像を出し分ける方法が主流でした。

現在はブラウザのHTML5対応が進み、srcset属性の使用が増えそうなのでその解説です。

<picture>要素やpolyfillなどのレスポンシブイメージ、というよりはもっとシンプルに<img>タグでiPhoneやRetina MacBookでも画像を簡単な方法で綺麗に表示するという内容です。

srcset属性で何ができる?

srcset (source set)とは、複数のイメージソースを指定することが可能な属性。

<img src="sample1.jpg" srcset="sample1.jpg 1x, sample2.jpg 2x">

srcsetはカンマで区切ることで複数のソースを設定することができます。

読み込みの条件は画像パスの後ろにある「1x」と「2x」、通常であれば1x、Retinaディスプレイなら2x、4Kディスプレイなら4x、とデバイスのDPIの大きさに合わせて自動的に読み込む画像を切り替えてくれます。

条件にはウィンドウサイズを指定することもできます。

<img src="sample1.jpg" srcset="sample1.jpg 320vw, sample2.jpg 640vw">

画面サイズ(viewport width)が320px以下の時はsample1.jpgを表示し、それを超えるとsample2.jpgが表示されます。DPIの計算も自動でおこなってくれるため、Retinaの場合は横幅320pxの端末で見ても「320 * 2 = 640px」として扱われ、sample2.jpgを表示してくれます。

もちろん全ての画像を読み込むわけではなく必要な画像だけを読み込みます。

これとsizes属性を組み合わせれば、かなり柔軟に設定できます。sizesと合わせて使うと少し複雑になるのでそれはまた別の機会に。

WordPressがsrcsetをサポート

2015年12月にリリースされたWordPress4.4でsrcset属性が正式にサポートされました。
投稿に画像を挿入すると自動的に適切なsrcsetが挿入されます(投稿編集画面では通常のタグ、表示時に置換して置き換えてくれる)。

全世界のウェブサイトの1/4はWordPressで作られていると言われているので、その基幹となるシステムが対応したということは利用者するユーザーも一気に増えたということです。現時点では世界的な流れとしてsrcsetを利用していくのではないでしょうか。今後変わる可能性もありますが。