使用<picture>さまざまなユーザー環境に合わせて画像を動的にレンダリングする

レスポンシブ デザインでは、パフォーマンスと柔軟性のバランスが必要です。適切なサイズで最適化された画像をすべてのデバイスに提供することは、読み込み時間が遅くなるということではありません。

レスポンシブ デザインを実装するにはさまざまな方法があるため、さまざまなユースケースに最適な方法を理解することが重要です。

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

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

レスポンシブ画像は通常、2 つの問題のいずれかを解決するために使用されます。デバイスに応じて変化するデザインに合わせて画像を変更する必要性 (アート ディレクション)、またはデバイスに合わせて画像の解像度を調整する必要性 (解像度の切り替え) です。

実装に関しては、使用するイメージのバージョンを決定するのに十分な情報をブラウザーに与えるか、ブラウザーに直接命令するかの選択になります。

<picture>要素は、アート ディレクションのユースケースに最適です。必要な変更には、アスペクト比の変更、画像の別の切り抜き、高解像度の画像を提供することよりも複雑なその他のデザイン面が含まれる可能性が高いためです。

この場合、パフォーマンスが低下する可能性があるにもかかわらず、ブラウザに直接コマンドを実行する必要があります。

アートディレクションに imgix と<picture>を使用する

<picture>要素を使用すると、imgix には 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>

デバイスに合わせて正確にサイズが調整されていない場合でも (さまざまな画面サイズが利用可能であることを考慮すると)、いくつかの単純なビューポート ブレークポイントを設定し、いくつかのパラメーターを適用すると、さまざまな元のイメージを生成するよりもはるかに少ないオーバーヘッドでほとんどの作業を行うことができます。それぞれのサイズ。

ユーザーのデバイスに関する知識に応じて、必要に応じてブレークポイントの数を拡張し続けることができます。

<picture>のこの単純な実装でも、基本をカバーし、必要に応じて単一の画像を調整して、ターゲット サイズごとに最も魅力的なバージョンの画像を提供します。

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

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

上記の例では、意味のあるコンテンツが中央にあったため、トリミングは簡単でした ( fit=cropのデフォルトです)。

ただし、画像の最も重要な部分が中央に配置されていない場合でも、さまざまなアスペクト比の事前にトリミングされたバージョンを手動で出力することなく、imgix のcropモードを使用して、トリミングの開始位置をプログラムで調整できます。

imgix は、画像コンテンツに基づいてトリミングする 2 つのモード、 crop=facesとcrop=entropyを提供します。これらは、画像を評価し、顔またはコントラストの高い領域を検出し、それらを中心にトリミングすることによって同様に機能します。

これらのモードの使用方法の詳細については、アバターの作成とポイントオブインタレストのトリミングに関するガイドに記載されています。

<picture>と、テキスト オーバーレイや透かしなどの主要な imgix 機能を使用して、デバイスの画面に合わせてトリミングおよび変更される、完全にブランド化された画像のセットを作成する方法を見てみましょう。

これらのイメージのすべてのバージョンは、ビューポート サイズに応じてオンザフライで Origin Image ファイルから作成され、キャッシュされます。これにより、イメージ ストレージと<picture>が通常引き起こす可能性のあるパフォーマンス ヒットの両方が大幅に最小限に抑えられます。

トリミング

CodePen で面/エントロピーのトリミングの例を表示する

CodePenの imgix ( @imgix ) による imgix を使用したペンの絵要素とアート ディレクションを参照してください。

CodePen の例では、画像のサイズとアスペクト比がビューポートに合わせて調整され、トリミング スタイルは、オバマ大統領を中央に保つために必要な寸法に基づいて変化します。

画像のバリエーションに応じて、これはcrop=faces 、 crop=entropy 、クロップ位置合わせ ( crop=topなど) で行われ、場合によっては画像の一部を小さいサイズでズームインするためにrect使用して行われます。

ロゴの透かしと写真のクレジットも、ビューポートの変更に合わせてサイズとパディングが調整され、被写体との重なりを避けるために位置が変更されます。

テキストと透かしの拡大縮小

画像に追加するテキスト オーバーレイ、ブレンド、透かしは、画像と一緒に拡大縮小したり調整したりできます。 <picture>を活用して、さらにドラマティックにアートディレクションを行った例をご紹介します。

CodePen でウォーターマーク/ブレンドの例を表示する

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>

イメージの新しいバージョンを作成する必要がないことにもう一度注目してください。ソースのコピーを作成し、 dprパラメーターを URL に追加し、それぞれに適切なピクセル密度記述子 ( 1x 、 2xなど) でラベルを付けるだけです。

オリジナルのイメージだけで、ニーズやデザインの変化に応じて無限のバリエーションを作成できます。

まとめ

imgix は、急速に変化するデザインにおけるレスポンシブな画像の複雑さにアプローチする強力な味方です。簡単なパラメータ変更により、イメージ カタログ全体を再処理するのではなく、新しいデザイン コンテナ、デバイス、デバイス解像度にプログラム的に対応できます。

また、レスポンシブなデザインと実装を簡素化しようとするクライアント ヒントなどの先進的なアプローチもサポートしています。

imgix を活用するには、今すぐ無料アカウントを作成してください。

関連する imgix パラメータ

• crop |クロップモード
• dpr |デバイスのピクセル比
• fit |サイズ変更フィットモード
• rect |ソース長方形領域

その他のリソース

• メディア クエリ:メディア クエリを使用してレスポンシブに設計された Web サイトの厳選されたセレクション。アートディレクションへのさまざまなアプローチを検討するのに役立ちます。

• Responsive Images 101 :レスポンシブ画像を実行するすべての方法とそのトレードオフ、ユースケースを網羅した Cloud Four Design の紹介シリーズ

• レスポンシブ アート ディレクションのための焦点トリミング: <picture>と imgix の焦点トリミング パラメーターを使用して、どのサイズでも画像を魅力的にする方法を学びます。