レスポンシブ デザインでは、パフォーマンスと柔軟性のバランスが必要です。適切なサイズで最適化された画像をすべてのデバイスに提供することは、読み込み時間が遅くなるということではありません。 レスポンシブ デザインを実装するにはさまざまな方法があるため、さまざまなユースケースに最適な方法を理解することが重要です。 このチュートリアルでは、  要素をいつ使用するか、および imgix を使用して最も効果的に実装する方法について説明します。 <picture> アートディレクションと解像度の切り替え レスポンシブ画像は通常、2 つの問題のいずれかを解決するために使用されます。デバイスに応じて変化するデザインに合わせて画像を変更する必要性 (アート ディレクション)、または 必要性 (解像度の切り替え) です。 デバイスに合わせて画像の解像度を調整する 実装に関しては、使用するイメージのバージョンを決定するのに十分な情報をブラウザーに与えるか、ブラウザーに直接命令するかの選択になります。   要素は、アート ディレクションのユースケースに最適です。必要な変更には、アスペクト比の変更、画像の別の切り抜き、高解像度の画像を提供することよりも複雑なその他のデザイン面が含まれる可能性が高いためです。 <picture> この場合、パフォーマンスが低下する可能性があるにもかかわらず、ブラウザに直接コマンドを実行する必要があります。 アートディレクションに imgix と を使用する <picture> 要素を使用すると、imgix には 2 つの主な利点があります。まず、ビューポート サイズごとに、前処理されたイメージのコピーを個別に保持する必要がなくなります。必要に応じてパラメータを適用して、サイズ、トリミング、デバイスのピクセル比を調整します。 <picture> 次に、イメージを最適化し、要求されたさまざまなバージョンをすべてキャッシュすることで、パフォーマンスへの影響を最小限に抑えることができます。   要素は、一部のレガシー ブラウザでは 。  を使用して、これらのクライアントのサポートを追加できます。 注: <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> ただし、このコードにいくつかの追加を行うことで、   1 枚の写真だけでなく、画像セット全体のアート ディレクションを自動化する強力なツールにすることができます。 <picture> 自動化されたアートディレクション 上記の例では、意味のあるコンテンツが中央にあったため、トリミングは簡単でした (  のデフォルトです)。 fit=crop ただし、画像の最も重要な部分が中央に配置されていない場合でも、さまざまなアスペクト比の事前にトリミングされたバージョンを手動で出力することなく、imgix の モードを使用して、トリミングの開始位置をプログラムで調整できます。 crop  imgix は、画像コンテンツに基づいてトリミングする 2 つのモード、  と を提供します。これらは、画像を評価し、顔またはコントラストの高い領域を検出し、それらを中心にトリミングすることによって同様に機能します。 crop=faces crop=entropy これらのモードの使用方法の詳細については、 と に関するガイドに記載されています。 アバターの作成 ポイントオブインタレストのトリミング   と、テキスト オーバーレイや透かしなどの主要な imgix 機能を使用して、デバイスの画面に合わせてトリミングおよび変更される、完全にブランド化された画像のセットを作成する方法を見てみましょう。 <picture> これらのイメージのすべてのバージョンは、ビューポート サイズに応じてオンザフライで Origin Image ファイルから作成され、キャッシュされます。これにより、イメージ ストレージと が通常引き起こす可能性のあるパフォーマンス ヒットの両方が大幅に最小限に抑えられます。 <picture> トリミング   CodePen で面/エントロピーのトリミングの例を表示する https://codepen.io/imgix/pen/ZQVXBY?embedable=true   の imgix (   ) に を参照してください。 CodePen @imgix よる imgix を使用したペンの絵要素とアート ディレクション  CodePen の例では、画像のサイズとアスペクト比がビューポートに合わせて調整され、トリミング スタイルは、オバマ大統領を中央に保つために必要な寸法に基づいて変化します。 画像のバリエーションに応じて、これは  、   、クロップ位置合わせ (  など) で行われ、場合によっては画像の一部を小さいサイズでズームインするために 使用して行われます。 crop=faces crop=entropy crop=top rect ロゴの透かしと写真のクレジットも、ビューポートの変更に合わせてサイズとパディングが調整され、被写体との重なりを避けるために位置が変更されます。 テキストと透かしの拡大縮小 画像に追加するテキスト オーバーレイ、ブレンド、透かしは、画像と一緒に拡大縮小したり調整したりできます。  を活用して、さらにドラマティックにアートディレクションを行った例をご紹介します。  <picture>   CodePen でウォーターマーク/ブレンドの例を表示する https://codepen.io/imgix/pen/NxoadL?embedable=true  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 を活用するには 。 、今すぐ無料アカウントを作成してください 関連する imgix パラメータ  |クロップモード crop  |デバイスのピクセル比 dpr  |サイズ変更フィットモード fit  |ソース長方形領域 rect その他のリソース メディア クエリを使用してレスポンシブに設計された Web サイトの厳選されたセレクション。アートディレクションへのさまざまなアプローチを検討するのに役立ちます。 : メディア クエリ   レスポンシブ画像を実行するすべての方法とそのトレードオフ、ユースケースを網羅した Cloud Four Design の紹介シリーズ  : Responsive Images 101   と imgix の焦点トリミング パラメーターを使用して、どのサイズでも画像を魅力的にする方法を学びます。 : レスポンシブ アート ディレクションのための焦点トリミング <picture>

Sign Up for Free

Get A Demo

Read the Docs

Visit Website

このオーディオは、ストーリーの元の言語で制作されています。

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

About Author

コメント

ラベル

この記事は

Related Stories

ワークフローを10倍に向上させる方法: 必須アプリ17選

ユーザー中心の暗号通貨製品の作成: 顧客からのフィードバックの重要性

18 種類の開発者ツールで生産性を向上しましょう 🚀🔥

AI の力を解き放つ。最先端技術の体系的レビュー: 概要と序論

ワークフローを10倍に向上させる方法: 必須アプリ17選

ユーザー中心の暗号通貨製品の作成: 顧客からのフィードバックの重要性

18 種類の開発者ツールで生産性を向上しましょう 🚀🔥

AI の力を解き放つ。最先端技術の体系的レビュー: 概要と序論

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps