WordPress 4.4からデフォルトで実装されたレスポンシブイメージってどうなのよ？

このブログでもレスポンシブイメージについて何度か紹介していますが（ココとかココで）、2015年の暮れにリリースされたWordPress 4.4 Clifford からsrcsetとsizesを使ったレスポンシブイメージがWordPressのCoreに実装されました。サーバにインストールして使うWordPress.org版だけでなく、WordPress.comにも実装されたとのことで、実質的には世界で2割以上のウェブサイトでレスポンシブイメージ（srcsetとsizes）が使われていることになるそうです。

このブログも先日WordPress 4.4に更新したので、WordPressのレスポンシブイメージがどんな実装なのか確認してまとめてみました。

基本的な仕組み

• 管理画面での設定なし・プラグインなしで<img>タグにsrcsetとsizesが挿入される
• ポリフィル（Picturefill）は実装されない 。プラグインを入れるかテーマに入れる必要がある
• 記事投稿画面ではsrcsetとsizesは挿入されない。ページが表示される際にsrcsetとsizesがHTMLに挿入される
• 現時点ではWordPressが書き出す画像の最適化は行われない （オリジナルより面積の小さい画像でも、ファイルサイズが大きくなる場合がある）
• <img>タグにsrcsetとsizesが記述されている場合は、追加も編集もされない
• デフォルトで画像の最大幅は1600pxに設定される（変更可能）
• デフォルトで幅が768pxの画像が追加で書き出される（変更可能）
• <img>タグが記事内にあってもclass="wp-image-XXXXX"がないとsrcsetとsizesは挿入されない（XXXXXは画像ID）。<img>タグの出力をカスタマイズしている場合は要注意です（このブログがそうでした）

上の一覧は、最後のものを除いてWordPressの以下の3ページに書かれていたことで気になったことをまとめたものです。最後のものは自分のローカル環境で確認したものです。

• Responsive Images in WordPress 4.4 — Make WordPress Core
• Responsive Images: Merge Proposal — Make WordPress Core
• Responsive Images Now Landed In WordPress Core — Smashing Magazine

WordPressで挿入されるコード

ローカル環境にインストールしたWordPress 4.4でテストしたら幅が781pxの画像を入れた際、以下のコードが挿入されました（画像のパスは短いものに変更しています）：

<img src="/path/to/img.png" alt="テスト" class="wp-image-5329" srcset="/path/to/img-300x187.png 300w, /path/to/img-768x478.png 768w, /path/to/img.png 781w" sizes="(max-width: 781px) 100vw, 781px">

srcsetについて

• 使える画像サイズをすべて自動で記載してくれる
• カスタムでクロップされたアスペクト比の異なる画像は使われない

sizesについて

sizes属性はデフォルトで以下が挿入される：

sizes="(max-width: {{image-width}}) 100vw, {{image-width}}"

この記述だと、オリジナル画像の幅以下ではViewport幅の100%に合わせて、それ以外では、オリジナル画像の幅の画像が表示される。。。はずなんですが。。。

デフォルトのままで各種ブラウザで検証してみているのですが、Win7のChrome 47で2つ画像が読み込まれてしまったり（※）、他のブラウザでもウィンドウ幅が300px以下で768pxの画像が読み込まれたりするので、各ブラウザでのsrcsetとsizesの挙動を検証してみる必要がありそうです。

※同様の記述で同じ現象が起こることを@SaekiTominagaさん が再現してくれました。Chromeのバグでしょうか？

ちなみに、sizesに違う記述をしたい場合はテーマでカスタマイズができるように新しく関数が用意されたようです。

ブラウザのサポート状況とサポートがない場合の表示

なにもしないと自動でsrcsetとsizesが挿入されてしまうわけですが、サポートされていないブラウザではこれらの属性が無視されるので、問題にはならないはずです。ちなみに、srcsetとsizes属性は以下のブラウザでサポートされています。

• Chrome 38以上
• Chrome for Android 47以上
• Android Browser 46以上
• Firefox 38以上
• iOS Safari 9.2以上
• Safari 9以上
• Edge 13以上

※IEではどのバージョンもサポートされていません。

まとめ

レスポンシブイメージはマルチデバイス時代の長年の課題なので、今回のWordPressのCoreへのレスポンシブイメージの実装は英断だったなぁと感服しています。srcsetとsizesはIEで全滅だったりAndroidの古いブラウザでサポートされていないですが、Can I Use のデータを見ると約63%のユーザが使うブラウザでサポートされています。これで多くのサイトで表示パフォーマンスの改善になるでしょうし、ユーザ体験の改善にもつながると思います。

まだ、プラグインの挙動の確認とか各ブラウザでのsrcsetとsizesの細かい挙動の確認は必要ですが、とりあえず嬉しいニュースでした。

このブログのレスポンシブイメージ関連の他の記事

こちらもご参考までにどうぞ：

• 次世代HTMLの新仕様「レスポンシブ・イメージ（仮）」についてまとめてみた
• レスポンシブ・イメージがもうすぐネイティブ実装！いまから使える？ポリフィル「Picturefill 2.x」を検証
• なんでもかんでもpicture要素を使えばいいわけじゃない！レスポンシブ・イメージ実装の際の注意点
• レスポンシブ・イメージの「RICG」ニュースレターでRriverの記事が紹介されちゃいましたw
• WordPressでレスポンシブ・イメージの自動化を可能に。RICG公認プラグインが公開
• Picturefill 2.xにウェブ標準に影響する大きな問題発覚。2.3.1より前のバージョンはアップデート必須
• レスポンシブ・イメージをテストする際の2つの注意点と開発者ツールの設定
• WordPress 4.4以降でのレスポンシブ・イメージ・プラグインはどうなるの？
• 面倒なレスポンシブイメージの画像作成を自動化してくれる神ツールとブレイクポイントの考え方
• もう、レスポンシブでいいんじゃない？

参考サイト

• Responsive Images in WordPress 4.4 — Make WordPress Core
• Responsive Images: Merge Proposal — Make WordPress Core
• Responsive Images Now Landed In WordPress Core — Smashing Magazine
• Keeping srcset and sizes under control
• WordPress 4.4 “Clifford” Featuring Responsive Images, Twenty Sixteen, and More — WP Tavern

2016年1月5日に公開され、2017年2月25日に更新された記事です。

この記事をシェアする

• ツイート
• シェアする
• ブックマーク
• Pocketに保存