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

Advertisement

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

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

基本的な仕組み

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

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

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に違う記述をしたい場合はテーマでカスタマイズができるように新しく関数が用意されたようです。

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

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

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

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

まとめ

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

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

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

WordPress関連の記事

よかったら他のWordPress関連の記事もどうぞ

参考サイト

About the author

Rriverのステッカーが貼られたMacBookの向こうにいる自分のMemojiの似顔絵

「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら

ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Mastodon @rriver@vivaldi.net Twitter @rriver 、またはFacebook までご連絡ください。