<picture>を使用したimgixの活用

レスポンシブデザインには、パフォーマンスと柔軟性のバランスが必要です。すべてのデバイスに適切なサイズと最適化された画像を提供することは、読み込み時間が遅くなることを意味してはいけません。レスポンシブデザインを実装するためのさまざまな方法があるため、それぞれのユースケースに最適な方法を理解することが重要です。

このチュートリアルでは、<picture>要素の使用時期とimgixを使用して最も効果的に実装する方法について説明します。

アートディレクションと解像度の切り替え

レスポンシブ画像は、一般的に2つの問題を解決するために使用されます。デバイスによって変更されるデザインに合わせて画像を調整する必要がある場合（アートディレクション）、またはデバイスの解像度に合わせて画像の解像度を調整する必要がある場合（解像度の切り替え）です。実装の観点からは、どのバージョンの画像を使用するかをブラウザに決定させるのか、それとも直接指示するのかという選択肢があります。

<picture>要素はアートディレクションのユースケースに最適です。なぜなら、要求される変更はアスペクト比の変更や画像の異なるトリミングなど、単に高解像度の画像を提供するよりも複雑だからです。この場合、パフォーマンスの低下を避けながらも、ブラウザに直接指示することが望まれます。

imgixと`<picture>`を使用したアートディレクション

imgixを使用する際の<picture>要素には2つの主な利点があります。まず、各ビューポートサイズに対して別々の事前処理済みコピーを維持する必要がなくなります。必要に応じてサイズ、トリミング、デバイスピクセル比を調整するためのパラメーターを適用します。次に、画像を最適化し、要求された異なるバージョンをすべてキャッシュすることで、パフォーマンスの低下を最小限に抑えます。

レガシーブラウザのサポート

<picture>要素は一部のレガシーブラウザでは利用できません。これらのクライアントに対応するために、Picturefillを使用できます。

これらすべてがどのように組み合わさるか見てみましょう。まず、横向きの画像を使用し、次に異なるデバイスのために画像の最も意味のある部分を表示するために異なるパラメーターを提供します。

画像をクリックすると、フルサイズでビューポートの変化が表示されます

<picture>
  <source
    srcset="https://assets.imgix.net/blog/unsplash-kiss.jpg?w=1280"
    media="(min-width: 1280px)"
  />
  <source
    srcset="
      https://assets.imgix.net/blog/unsplash-kiss.jpg?w=768&h=1024&fit=crop
    "
    media="(min-width: 768px)"
  />
  <source
    srcset="
      https://assets.imgix.net/blog/unsplash-kiss.jpg?w=568&h=320&fit=crop
    "
    media="(min-width: 480px)"
  />
  <img
    src="https://assets.imgix.net/blog/unsplash-kiss.jpg?w=320&h=568&fit=crop"
  />
</picture>

Chromeデバッグに関する注意

デバイスビューで開発者ツールを使用すると、画像が2回ダウンロードされているように見えることがあります。この挙動は開発者ツールの問題であり、実際の環境で発生する問題ではありません。ブラウザは画像を1回だけダウンロードしています。

すべてのデバイスに完全に合わせてサイズ調整されているわけではないかもしれませんが、いくつかのシンプルなビューポートのブレークポイントを設定し、いくつかのパラメーターを適用することで、各サイズの異なるオリジナル画像を生成するよりもはるかに少ないオーバーヘッドでほとんどの目的を達成できます。

ユーザーのデバイスに関する知識に応じて、必要に応じてブレークポイントの数を増やすことができます。このシンプルな<picture>の実装でも、基本をカバーし、ターゲットサイズごとに最も魅力的なバージョンの画像を提供するために画像を調整しています。

しかし、このコードにいくつかの追加を行うことで、<picture>を単一の孤立した写真だけでなく、全体の画像セット全体にわたってアートディレクションを自動化する強力なツールにすることができます。

自動化されたアートディレクション

上記の例では、意味のあるコンテンツが中央にあるため、トリミングはシンプルでした（fit=cropのデフォルト設定）。しかし、画像の最も重要な部分が中央にない場合でも、imgixのcropモードを使用して、異なるアスペクト比に対してトリミングの開始位置をプログラム的に調整できます。

imgixは、画像コンテンツに基づいてトリミングを行う2つのモードを提供しています：crop=facesとcrop=entropyです。これらはどちらも、画像を評価し、顔を検出するか高コントラストの領域を検出し、それらを中央に配置してトリミングします。これらのモードの使用方法については、アバターの作成や関心領域のトリミングに関するガイドで詳しく説明しています。

<picture>を使用し、テキストオーバーレイや透かしなどのimgixの主要な機能を活用して、デバイス画面に合わせてトリミングおよび変更される完全にブランド化された画像セットを作成する方法を見てみましょう。これらの画像のすべてのバージョンは、ビューポートサイズに応じてオンデマンドで生成され、キャッシュされるため、画像のストレージと<picture>によるパフォーマンスの低下を大幅に最小限に抑えることができます。

トリミング

CodePenで顔/エントロピートリミングの例を見る

See the PenPicture Element & Art Direction with imgixby imgix (@imgix) onCodePen.

CodePenの例では、画像がサイズとアスペクト比に応じてビューポートに調整され、トリミングスタイルはそのサイズで必要な場合に応じて調整されます。画像のバリエーションに応じて、これはcrop=faces、crop=entropy、方向性のトリミング（crop=topなど）、および小さなサイズで画像の一部を拡大するためのrectで行われます。

ロゴの透かしと写真のクレジットも、ビューポートの変化に合わせてサイズと余白が調整され、被写体に重ならないように位置が変更されます。

テキストと透かしのスケーリング

画像に追加する任意のテキストオーバーレイ、ブレンド、または透かしは、画像と一緒にスケーリングおよび調整できます。以下の例では、<picture>を活用してさらに劇的にアートディレクションを行う方法を示しています。

CodePenで透かし/ブレンドの例を見る

See the PenPicture Element & Art Direction with imgixby imgix (@imgix) onCodePen.

DPRサポートの追加

<picture>内で複数のピクセル解像度をサポートする場合は、各srcsetにDPRのバリエーションを追加することで対応できます。たとえば、元の例で高密度デバイスをサポートしたい場合、コードは次のようになります：

<picture>
  <source
    srcset="
      https://assets.imgix.net/blog/unsplash-kiss.jpg?w=1280&dpr=1 1x,
      https://assets.imgix.net/blog/unsplash-kiss.jpg?w=1280&dpr=2 2x,
      https://assets.imgix.net/blog/unsplash-kiss.jpg?w=1280&dpr=3 3x,
      https://assets.imgix.net/blog/unsplash-kiss.jpg?w=1280&dpr=4 4x,
      https://assets.imgix.net/blog/unsplash-kiss.jpg?w=1280&dpr=5 5x
    "
    media="(min-width: 1280px)"
  />
  <source
    srcset="
      https://assets.imgix.net/blog/unsplash-kiss.jpg?w=768&h=1024&fit=crop&dpr=1 1x,
      https://assets.imgix.net/blog/unsplash-kiss.jpg?w=768&h=1024&fit=crop&dpr=2 2x,
      https://assets.imgix.net/blog/unsplash-kiss.jpg?w=768&h=1024&fit=crop&dpr=3 3x,
      https://assets.imgix.net/blog/unsplash-kiss.jpg?w=768&h=1024&fit=crop&dpr=4 4x,
      https://assets.imgix.net/blog/unsplash-kiss.jpg?w=768&h=1024&fit=crop&dpr=5 5x
    "
    media="(min-width: 768px)"
  />
  <source
    srcset="
      https://assets.imgix.net/blog/unsplash-kiss.jpg?w=568&h=320&fit=crop&dpr=1 1x,
      https://assets.imgix.net/blog/unsplash-kiss.jpg?w=568&h=320&fit=crop&dpr=2 2x,
      https://assets.imgix.net/blog/unsplash-kiss.jpg?w=568&h=320&fit=crop&dpr=3 3x,
      https://assets.imgix.net/blog/unsplash-kiss.jpg?w=568&h=320&fit=crop&dpr=4 4x,
      https://assets.imgix.net/blog/unsplash-kiss.jpg?w=568&h=320&fit=crop&dpr=5 5x
    "
    media="(min-width: 480px)"
  />
  <img
    srcset="
      https://assets.imgix.net/blog/unsplash-kiss.jpg?w=320&h=568&fit=crop&dpr=1 1x,
      https://assets.imgix.net/blog/unsplash-kiss.jpg?w=320&h=568&fit=crop&dpr=2 2x,
      https://assets.imgix.net/blog/unsplash-kiss.jpg?w=320&h=568&fit=crop&dpr=3 3x,
      https://assets.imgix.net/blog/unsplash-kiss.jpg?w=320&h=568&fit=crop&dpr=4 4x,
      https://assets.imgix.net/blog/unsplash-kiss.jpg?w=320&h=568&fit=crop&dpr=5 5x
    "
  />
</picture>

新しいバージョンの画像を作成する必要はないことに注意してください。ソースのコピーを作成し、URLにdprパラメーターを追加し、それぞれに適切なピクセル密度記述子（1x、2xなど）をラベル付けするだけです。元の画像だけで、ニーズやデザインの変化に応じて無限のバリエーションを作成できます。

まとめ

imgixは、急速に変化するデザインにおけるレスポンシブ画像の複雑さにアプローチする強力な味方です。シンプルなパラメーターの変更で、新しいデザインコンテナ、デバイス、およびデバイス解像度にプログラム的に対応でき、画像カタログ全体を再処理する必要はありません。また、レスポンシブデザインと実装の簡素化を目指すクライアントヒントのような前向きなアプローチもサポートしています。

imgixの関連パラメーター

crop | トリミングモード
dpr | デバイスピクセル比
fit | リサイズフィットモード
rect | ソース矩形領域

その他のリソース

Media Queries: メディアクエリを使用したレスポンシブデザインウェブサイトのキュレーションされたセレクション。アートディレクションのさまざまなアプローチを見るのに役立ちます。
Responsive Images 101: レスポンシブ画像の方法とそれぞれのトレードオフとユースケースをカバーするCloud Four Designの入門シリーズ。
レスポンシブアートディレクションのための焦点トリミング: <picture>をimgixの焦点トリミングパラメーターと組み合わせて、どのサイズでも魅力的な画像を作成する方法を学びます。

チュートリアル srcsetでのレスポンシブ画像