srcsetとsizesを使ったレスポンシブイメージがWordPressのCoreに実装されました。サーバにインストールして使うWordPress.org版だけでなく、WordPress.comにも実装されたとのことで、実質的には世界で2割以上のウェブサイトでレスポンシブイメージ(srcsetとsizes)が使われていることになるそうです。4.4に更新したので、WordPressのレスポンシブイメージがどんな実装なのか確認してまとめてみました。基本的な仕組み管理画面での設定なし・プラグインなしで<img>タグにsrcsetとsizesが挿入されるポリフィル(Picturefill)は実装されない。プラグインを入れるかテーマに入れる必要がある記事投稿画面ではsrcsetとsizesは挿入されない。(オリジナルより面積の小さい画像でも、ファイルサイズが大きくなる場合がある)<img>タグにsrcsetとsizesが記述されている場合は、追加も編集もされないデフォルトで画像の最大幅は1600pxに設定される(変更可能)デフォルトで幅が768pxの画像が追加で書き出される(変更可能)<img>タグが記事内にあってもclass="wp-image-XXXXX"がないとsrcsetとsizesは挿入されない(XXXXXは画像ID)。<img>タグの出力をカスタマイズしている場合は要注意です(このブログがそうでした)上の一覧は、最後のものを除いてWordPressの以下の3ページに書かれていたことで気になったことをまとめたものです。最後のものは自分のローカル環境で確認したものです。{{image-width}}"この記述だと、オリジナル画像の幅以下ではViewport幅の100%に合わせて、それ以外では、オリジナル画像の幅の画像が表示される。47で2つ画像が読み込まれてしまったり(※)、他のブラウザでもウィンドウ幅が300px以下で768pxの画像が読み込まれたりするので、各ブラウザでのsrcsetとsizesの挙動を検証してみる必要がありそうです。Chromeのバグでしょうか?ちなみに、sizesに違う記述をしたい場合はテーマでカスタマイズができるように新しく関数が用意されたようです。ブラウザのサポート状況とサポートがない場合の表示なにもしないと自動でsrcsetとsizesが挿入されてしまうわけですが、サポートされていないブラウザではこれらの属性が無視されるので、問題にはならないはずです。ちなみに、srcsetとsizes属性は以下のブラウザでサポートされています。※IEではどのバージョンもサポートされていません。まとめレスポンシブイメージはマルチデバイス時代の長年の課題なので、今回のWordPressのCoreへのレスポンシブイメージの実装は英断だったなぁと感服しています。データを見ると約63%のユーザが使うブラウザでサポートされています。これで多くのサイトで表示パフォーマンスの改善になるでしょうし、ユーザ体験の改善にもつながると思います。プラグインの挙動の確認とか各ブラウザでのsrcsetとsizesの細かい挙動の確認は必要ですが、とりあえず嬉しいニュースでした。2.x」を検証なんでもかんでもpicture要素を使えばいいわけじゃない!レスポンシブ・イメージ実装の際の注意点レスポンシブ・イメージの「RICG」ニュースレターでRriverの記事が紹介されちゃいましたwWordPressでレスポンシブ・イメージの自動化を可能に。2.xにウェブ標準に影響する大きな問題発覚。年末だし、WordPressのバックアップとローカル環境への復元WordPressでレスポンシブ・イメージの自動化を可能に。author「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。ウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。4.4以降でのレスポンシブ・イメージ・プラグインはどうなるの?WordPressでレスポンシブ・イメージの自動化を可能に。使ったときに戸惑ったことのまとめレスポンシブなデザインにするなら知っておきたい。コメントをキャンセルメールアドレスが公開されることはありません。