こんにちは、池田です。
今回は、レスポンシブウェブデザインのために最適化したサイズの画像を配信する方法について書きたいと思います。

---

画像を含むページをレスポンシブにしたいという時には、次のような課題にどうにかして対処することになります。

• パソコンなど大きい横幅用の画像を、スマートフォンなどに3G回線で送ると重たい
• 従来のディスプレイ用の画像をRetina等高精細ディスプレイで見ると画像が小さくなる、またはボケる（直接レスポンシブの問題ではありませんが、同時に考えなくてはならないことが殆どでしょう）
• ブレイクポイントに応じた複数サイズの画像を用意する手間がかかる
• ブレイクポイントに応じた複数サイズの画像を用意するとストレージを消費する

これらについて様々な対応策が出てきていますので、一旦現時点での様子を、関係者という観点で整理してみます。

更新のたびに最適化ロジックを書く

画像のURLを書く時に、画面幅などに最適化された画像が使われるよう、その場にロジックを書く方法です。

現在よく使われているのはCSSのメディアクエリーズでしょう。 また、現在仕様策定中のpicture要素やimg要素のsrcset属性なども同様に画像を挿入する際に都度最適化ロジックを書くことになります。

• サイト自体を制作する時には特別な準備はいらない
• 記事を作成する時に毎回ロジックを入れる必要がある
• 予め全サイズの画像を用意する必要がある

というのが特徴です。

いくつかの固定ページであれば構わないと思いますが、ブログ記事のように手軽にどんどん更新・作成したいページなどには向かないでしょう。

最適化ロジックを考える人	記事を書く人
環境を用意する人	なし

実装例

• CSSメディアクエリーズ
• picture要素
• img要素のsrcset属性
  ※ Google Chrome 34から実装されるようです。参考：Chrome 34ではimgタグで解像度に応じた複数の画像を出し分けられるよう、レスポンシブイメージ対応に － Publickey
• Picturefill - picture要素を先取りしてJavaScriptで実装した物。これ自体はJavaScriptの準備が必要

書き方の規則を作る

記事を書く際、画像のURLなどを書く部分に何らかの規則を設けることで、その規則に従う限りは自動的に最適化されるようにする方法です、と言っても伝わらないと思うので実例を挙げると、PicturefillとPHPの組み合わせで次のようにすることです。

// PHPスクリプト
<?php
function picturefill($image_dir) {
  $picturefill = <<<EOP
<span data-picture data-alt="...">
    <span data-src="${image_dir}/small.jpg"></span>
    <span data-src="${image_dir}/medium.jpg"     data-media="(min-width: 400px)"></span>
    <span data-src="${image_dir}/large.jpg"      data-media="(min-width: 800px)"></span>
    <span data-src="${image_dir}/extralarge.jpg" data-media="(min-width: 1000px)"></span>

    <noscript>
        <img src="${image_dir}/small.jpg" alt="...">
    </noscript>
</span>
EOP
}

※ Picturefillのサンプルを少し改変した物です。
※ 実際に使用する際にはエスケープ処理などを実装する必要があります。

<!-- HTML -->
......文章......
<?php echo picturefill("/images/some-image"); ?>
......文章......

記事を書く時には画像を代表するURL（/images/some-image）を一つ指定するだけで、複数の大きさの画像を指定できるようにします。

• サイト制作時にPHP関数やCMSのウィジェットなどを用意する必要がある
• 記事を作成する時にはロジックを入れる必要がない
• 予め全サイズの画像を用意する必要がある

というのが特徴です。

導入に当たって関係者が少なく、また、既存記事はひとまずさておいて新規記事から導入する、といったことが容易になっています。

最適化ロジックを考える人	サイトの設計をする人
環境を用意する人	フロントエンドエンジニア、マークアップエンジニア

実装例

• Picturefill.WP - コンテンツ中のimg要素を自動的にPicturefill用の要素のセットに置換するWordPressプラグイン

アクセスがあった時に画像を最適化させる

画像URLの中に画像サイズの情報を入れるようにし、画像読み込みの時にサーバー側で画像リサイズをすることで、予め様々なサイズの画像を用意するのを避けるようにする方法です。

CMSテンプレートを頻繁に変えて最適なページレイアウトを探る場合や、ユーザーがアップロードした画像を使用するサービスなどで特に有用でしょう。

• サーバー側で画像リサイズ用のツールをインストールする必要がある
• 記事を作成する時に毎回ロジック（画像サイズ）を入れる必要がある
• 予め様々なサイズの画像を用意する必要はない

というのが特徴です。

むろん、上記「書き方の規則を作る」のようにすれば、記事を書く際の負担を下げることもできます。

最適化ロジックを考える人	記事を書く人
環境を用意する人	サーバーサイドエンジニア

実装例

この分類の実装例は非常にたくさんあります。

• Magickly - 画像のリサイズだけでなく、ImageMagickの様々な画像処理をリアルタイムにできるウェブアプリケーション
• hose - Amazon S3にある画像をリアルタイムにリサイズするウェブアプリケーション。S3で使いやすいように作られている
• SMALLLIGHT - リアルタイムに画像をリサイズするApacheモジュール。Apacheの設定ファイルでリサイズ設定をかけるので、RubyやPHPなどのアプリケーションが不要。同様のNginxモジュールにHttpImageFilterModuleがある
• Sencha.io Src - 上記の物と同様だが、サービスになっているのでインストール不要

画面解像度から自動的に最適化画像を判断する

Adaptive Imagesというウェブアプリケーションです。
JavaScriptを使って画面解像度を識別し、自動的に最適なサイズの画像を配信します。

• サイト制作時にアプリケーションのインストールや細かい設定が必要
• 記事を作成する時にはロジックを入れる必要がない
• 予め様々なサイズの画像を用意する必要はない

というのが特徴です。

一度インストールしてしまえば、ほとんど何もしなくても画像最適化が行われるため便利です。その分、導入時には複数のレイヤーにまたがる調整が必要になります。

最適化ロジックを考える人	サイトの設計をする人
環境を用意する人	フロントエンドエンジニア、サーバーサイドエンジニア

実装例

• Adaptive Images

回線速度から自動的に最適化画像を判断する

HiSRCというjQueryプラグインです。
HiSRCは始めに小さい（荒い）画像を表示します。その後、デバイスピクセルレシオと回線速度を併せて判断し、必要であればその部分をより大きな（綺麗な）画像に差し替えます。

上の説明で分かるように、ひとつの画像のために二回アクセスが発生するため、サーバー負荷となる可能性があることに注意が必要です。

• サイト制作時にjQueryプラグインのインストールが必要
• 記事を作成する時にもより大きな画像を併記する必要がある
• 予め全サイズの画像を用意する必要がある

となっています。

厳密にはレスポンシブデザインにおける画像配信のソリューションではないのですが、ユニークで面白いのでご紹介しました。

最適化ロジックを考える人	記事を書く人
環境を用意する人	フロントエンドエンジニア

実装例

• HiSRC

終わりに

大雑把に、JavaScriptを使うのか、（サーバーサイド）ウェブアプリケーションを設置するのか、（Apacheなど）ウェブサーバーの機能で解決するのか、といった分類は見かけるのですが、（重なる物ではありますが）誰が作業を行うのかという観点の物を見ないように思ったので、まとめなおしてみました。

実際に導入する時には「どういった人に頼むのか（組織内でまかなえるのか、外部に頼むのか）」「後々変更がある時に、簡単に対応できるか」といった点も非常に重要なポイントとなります。この記事が参考になりましたら幸いです。