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

レスポンシブ・イメージの仕様策定や普及に努めている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.phpにadd_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

最後に

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

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

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

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

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

2015年2月6日に公開され、2016年1月30日に更新された記事です。

この記事をシェアする

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