WordPressでレスポンシブ・イメージの自動化を可能に。RICG公認プラグインが公開

Advertisement

追記: 2016.01.29

WordPress 4.4からレスポンシブ・イメージがCoreに実装されました。詳しくは以下をご覧ください:

レスポンシブ・イメージの仕様策定や普及に努めているRICG(Responsive Images Community Group) が公認したレスポンシブ・イメージのWordPressのプラグイン が公開されましたね。このプラグインを使うとWordPressでのレスポンシブ・イメージの解像度対応の自動化が可能になります。RICG公認のプラグインが出たことでプラグインの開発や普及が加速すると嬉しいですね。

そもそもレスポンシブ・イメージってなによ?という方は、こちらあたりをお読みください。

目次

  1. レスポンシブ・イメージ・プラグインの特徴
  2. プラグインの導入手順
  3. 画像運用の自動化が可能に
  4. WordPressが書き出す画像の最適化
  5. 最後に

レスポンシブ・イメージ・プラグインの特徴

このプラグインは、WordPressのコアチームとRICGメンバー(Mat Marquis氏とTim Evko氏)が中心となって開発 しているもので、Evko氏のwp-tevko-responsive-images のフォーク版だそうです。次のリリースはWordPress.orgのプラグイン紹介ページ でFeatured Pluginsとして取り上げられる予定で、さらにWPコアにも組み込まれる可能性があるとのうわさ もあります。

a. レスポンシブ・イメージの解像度対応が可能に

このプラグインを使うと、WordPressでレスポンシブ・イメージの解像度対応が自動で行えるようになります。WordPressのアップローダー経由でアップした画像に、複数解像度の画像へのリンクをsrcsetを使って記述してくれるプラグインです。

srcsetの記述は以下のようになります:

<img src="/path/to/image.png"
srcset="/path/to/image-300x150.png 300w,
/path/to/image-520x260.png 520w,
/path/to/image.png 1000w" />

b. アートディレクションは未対応

このプラグインは、あくまでsrcsetを使った解像度対応を可能にするもので、画面サイズによって写真のクロップやプロポーションを変更するアートディレクション対応はできません。アートディレクション対応はWordPressのコア部分にも関わってきそうなので、そう簡単には実装できないかもしれませんね。

c. Picturefill 2.2.0を使用しています

srcsetがサポートされていないブラウザ向けに、レスポンシブ・イメージのポリフィル「Picturefill 2.2.0 (Beta) 」を使っています。そのため、このプラグインをインストールするとpicturefill.jsが読み込まれるようになります。

<script type="text/javascript" src="/rriver/wp/wp-content/plugins/ricg-responsive-images/js/picturefill.js?ver=2.2.0"></script>

※Picturefill 2については、以前のまとめ記事で詳しく書いていますので、良かったらご参照ください。

d. srcsetのサポート状況

ちなみに、srcsetのブラウザ・サポート状況をCan I Use で見ると以下のような感じです。

  • ChromeとOperaはフルサポート
  • Mac / iOS Safariは、部分サポート
  • IEではサポートなしですが、 開発中 だそうで!(スパルタンではどうなんでしょうね?※)
  • Firefoxではデフォルト設定ではサポートなし。設定を変更すれば可

思ったより対応の進みが遅いですね。やっぱり時間かかりますねぇ…

[追記: 2015/02/08]
※ スパルタンでもWeb標準対応のロードマップは引き継ぐ ようなので、少なくとも<img srcset>はサポートされるようです。<picture>は「どうしようか考え中(Under Consideration) 」になっているので、わからないですけど。

プラグインの導入手順

このプラグインの導入には、以下の2つのステップが必要になります。

  1. プラグインのインストール
  2. WordPressの画像書き出し設定を追加

考えればわかることなんですが、#2についてはプラグインのサイト にひと言も記述がないので少し戸惑いました。

1. プラグインのインストール

プラグインのサイト からダウンロードしたファイルを、/wp-content/pluginsフォルダに入れて管理画面から有効にするだけです。

2. WordPressの画像書き出し設定を追加

複数サイズの画像が書き出されるようにfunctions.phpadd_image_size を使って設定を追加する必要があります。※テーマなどの設定によっては、すでに記述があるかもしれないので上書きしないように要確認です。

functions.phpに追加する設定の例:

add_image_size( 'large-smartphone', 520);

画像運用の自動化が可能に

このプラグインを使えば、レスポンシブ・イメージの解像度対応が自動化できます。たとえば、以下のような運用も簡単に行えます。

  1. 画像の最大幅をコンテンツの最大幅の2倍で保存する(ピクセル比2倍の高解像度画面まで対応)
  2. タブレット向け、スマホ向けの画像サイズをWordPressで自動生成
  3. プラグインを使って<img>タグにsrcsetを自動挿入

たとえば、コンテンツの最大幅を960pxとした場合、functions.phpに以下の記述を加えることで、ピクセル比2倍の画面まで対応できますよね。360はスマホ、720はタブレット、960はデスクトップというイメージでしょうか。

add_image_size( 'large', 1440);
add_image_size( 'large', 960);
add_image_size( 'medium', 720);
add_image_size( 'small', 360);

この設定を追加して幅が1,920pxの画像をアップすると、オリジナルに加えて指定したサイズの画像が書き出されます。そして、画像を投稿に挿入すると、以下のような<img>タグが挿入されます。1,920pxの画像を準備するのは現実的かどうかはさておき、これで自分で複数の画像を作らなくてすみますね。

<img src="/path/to/image.jpg"
srcset="/path/to/image-720x659.jpg 720w,
/path/to/image-960x879.jpg 960w,
/path/to/image-1440x1319.jpg 1440w,
/path/to/image-360x329.jpg 360w,
/path/to/image.jpg 1920w" />

上のコードは、見やすいように画像へのパスは実際のものとは違うものにしています。
あと、画像パスの記述順が、720、960、1140、360、1920となっていますが、これはプラグインが書き出したコードそのままの順番になっています。かなりランダムですが理由はわかりません。。。

WordPressが書き出す画像の最適化

WordPressが自動で画像を書き出してくれて嬉しいのですが、画像の最適化が気になったので、書き出された画像ファイルをImageOptimにかけてファイルサイズを比較してみました。そこそこ差が出るようなので、最適化については別途、対応を考えたほうが良さそうですね。

  WPオリジナル ImageOptimで最適化 サイズの差
1440 x 1319px 719KB 659KB 60KB
960 x 879px 366KB 334KB 32KB
720 x 659px 211KB 193KB 18KB
360 x 329px 54KB 50KB 4KB

ちなみに、検証に使った画像はこちらです。1920 x 1759px。PhotoshopでJPEG 60%でWeb用に保存。1.1MB

最後に

プロダクションサイトでの使用には、もう少しじっくり検証が必要かと思いますが、ざっと見たところ良い感じですね。プラグインのサイトの情報を、もう少し充実させてくれると、もっと楽に導入できるんですけどね。笑

ゆっくりですが、レスポンシブ・デザインまわりもじわりじわりと進化を遂げていますね。レスポンシブ・デザインといっても、いろいろなやり方がありますが、こういった技術の開発が進んで普及すれば、制作者の選択肢が増えて良いと思います。最終的には、どんなデバイスでアクセスしてもユーザにとって、より使いやすいサイトが増えることを切に願ってます。

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

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

About the author

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

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

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

“WordPressでレスポンシブ・イメージの自動化を可能に。RICG公認プラグインが公開” への2件のフィードバック

  1. […] 以前からコアに統合されると噂のあったRICG Responsive Imagesが今回ついにコアに統合されました! […]

  2. […] WordPressでレスポンシブ・イメージの自動化を可能に。RICG公認プラグインが… […]