WordPress 4.4ではsrcsetを利用したレスポンシブイメージがネイティブサポートされた。特にテーマやプラグインをアップデートすることなくデバイス毎に最適な画像が表示されるようになる。
レスポンシブ画像にはsrcsetとsizesが必要になるが、WordPressはどのようにこれを実現したか。
WordPressとレスポンシブ画像
WordPressに画像をアップロードした場合、アップロードした画像のオリジナルだけではなく、様々なサイズの画像の縮小コピーも自動生成される。ダッシュボードの設定->メディアに設定欄があるが、デフォルトだと大サイズは縦横1024ピクセル、中サイズが縦横300ピクセルだったと思う。つまり、2048ピクセル×1024ピクセルの横長オリジナル画像をアップロードすると、1024ピクセル×512ピクセル、300ピクセル×150ピクセルの縮小コピーも保存される。また、テーマがカスタム画像サイズを登録すると、そのサイズの画像コピーも生成される。
WordPressのレスポンシブ画像ではこれらの画像がsrcset属性に設定される。つまり上記の例だと<img>にsrcset=”http://example.com/wp-content/uploads/gazou.jpg 2048w, http://example.com/wp-content/uploads/gazou-1024×512.jpg 1024w,…以下略”みたいなのがセットされる。
そして、sizesだが、これがポイントだ。デフォルトではWordPressはsizes=”(max-width: 画像のオリジナル横幅px) 100vw, 画像のオリジナル横幅px”のようにセットされる。上記の例だと、sizes=”(max-width: 2048px) 100vw, 2048px”だ。
この属性値は、画像のオリジナル横幅以下の狭い画面で見ている場合は画面の横幅以上で最も小さな横幅の画像を選択せよ、画像のオリジナル横幅より大きな画面で見ている場合は、オリジナルの画像を表示せよ、という意味だ。(Retinaディスプレイなど、高精細な画面の場合はブラウザによって、自動的に最適な画像に読み替えられる）
これはほとんどの場合で上手く動く。例えば、ブラウザ幅が1000ピクセルなら、横幅1024ピクセルの大サイズ画像が表示され、Device pixel ratioが3のiPhone 6 Plusなら414*3つまり1242ピクセルなので、オリジナル画像が表示されるはず。レスポンシブ画像に求める期待通りの動作だろう。
マルチカラムなデザイン？
ただ、デフォルトの設定ではマルチカラムデザインのテーマや、画像にmarginやpaddingなどを設定している場合不都合が出る。例えばデザイン上、実際には横幅300pxで表示される画像でも、ブラウザ幅が1000pxなら大サイズ(1024px)の画像がダウンロードされる。本来なら中サイズの画像(300px)でいいはずだ。
すなわち、WordPressのデフォルトのsizes属性はスマートフォンで表示されるようなワンカラムで画面いっぱいに表示されるような閲覧を前提にしている。レスポンシブ画像の目的の多くはスマートフォン画面の対応なので、しょうがないのだが。
よりテーマ毎の最適なsizes属性をセットするには、wp_calculate_image_sizesフィルタなどを使う。
自作テーマを公開・利用している人は是非テーマ固有のsizesを設定するといいだろう。また、これから記事を書く際に画像をアップロードするときは、より大きな画像をオリジナルとしてアップロードするといいだろう。世の中のブラウザが全てsrcsetに対応すれば、画像解像度が大きすぎる・小さすぎるという問題はなくなるはずだから。
一応、非対応ブラウザ向けにポリフィルとして、Picturefillやrespimageもある。