レスポンシブな画像と聞くと、たいてい「解像度の切り替え」のことを考えます。解像度の切り替えとは、デバイスごとに異なる解像度の画像を提供することです。画像の内容、切り抜き、構成は変わりませんが、解像度だけが変わります。

imgixはこういった処理に長けている他に類のないサービスで、レンダリングはすべてその都度エッジロケーションで実行されます。imgix.jsを使えば、解像度の切り替えはいたって簡単です。

この結果、画像はタブレットやデスクトップでは540ピクセルの幅で読み込まれます。これは (min-width: 768px) 540pxというルールのおかげです。モバイルスクリーンではビューポート幅の100%(100vw) で読み込まれます。モダンブラウザは、適切な画像がローカルキャッシュにある場合、それを選択します。適切な画像がない場合、必要な幅(w)の新しい画像をリクエストします。

高密度ディスプレイを持つデバイスで動作するブラウザは、その解像度に最も適した画像を選択します。この例では、iPhone 6Sはsrcset属性から750wのURLを選択します。iPhone 6S の幅が 375 論理ピクセルですが、画面の密度が2 倍であるためです。したがって、 375 × 2 = 750となります。

imgix.js は、 <picture>要素を使って、レスポンシブ画像のアートディレクションにも利用できます。レスポンシブ画像のアートディレクションでは、さまざまなブレイクポイントで画像のクリエイティブ面でのコントロールが可能。例えば、異なるブレイクポイントでそれぞれ異なるトリミングを指定するといった場合です。

imgix.jsは<picture>要素内の<source> 要素に対して、 srcset属性を網羅的に作成できます。

この例では、2 つの異なるソースを指定します。1 つはデスクトップ用の幅 (16:9) の切り抜き、もう 1 つはモバイルデバイス用の正方形 (1:1) の切り抜きです。

このコードにより、さまざまなビューポイントで、さまざまなトリミングが可能となります。768pxより広い幅のビューポートでは、画像はアスペクト比16×9でトリミングされます。768pxより小さい場合は、宇宙飛行士がちょうど見えるように画像を正方形にトリミングします。

ブラウザウィンドウのサイズを変えて、画像の表示がどのように変わるかを確認してみてください。2つの画像は内容が異なるため、ブラウザは用意されていないトリミングのものを新たにリクエストしてダウンロードします。