ため、画像の最適化はパフォーマンスの高いサイトを運営するために非常に重要です。コンテンツを提供するために転送する必要のないすべてのバイトは、ページがスリムになり、ユーザーの読み込み時間が短縮されることを意味します。 一般的なページの重量のほぼ 50% は画像で構成されている このチュートリアルでは、  属性の使用方法の詳細と、imgix がプロセスを容易にする方法について説明します。 srcset 正しいサイズの画像を提供することは、転送バイト数と 最小限に抑えることができるため重要です。  属性は、現在これを行うための最良の方法の 1 つです。  CPU オーバーヘッドを srcset  srcset と表示密度 さまざまなデバイス解像度に応じてさまざまな画像を指定する簡単な方法を提供します。これにより、サイトは高解像度ディスプレイを備えた最新のデバイスに 2 倍、3 倍、またはそれ以上のバージョンの画像を提供できます。  タグ内で使用するのは簡単です。 srcset img   <img srcset="asset.png 1x, asset-2x.png 2x, asset-3x.png 3x" src="asset.png" > これにより、最高のアセットがユーザーに提供されますが、すべてのアセットの各バージョンを生成して保存する負担がサービスに移されます。これにより、ストレージ コストが膨れ上がる可能性があり、生成したすべての資産を提供できない可能性があります。 大規模なライブラリやユーザーが作成したコンテンツを扱う場合、これは受け入れられません。  imgix を使用すると、画像ライブラリ全体が即座に 対応になります。 srcset  imgix での srcset の使用 imgix  および  URL パラメーターを使用すると、画像の 属性を生成するのにかかる労力を簡素化できます。この例では、次の場所にある画像を使用します。 w dpr srcset   https://assets.imgix.net/examples/bluehat.jpg この画像を幅 400 ピクセルで提供したいと考えています。   <img srcset="https://assets.imgix.net/examples/bluehat.jpg?w=400&dpr=1 1x, https://assets.imgix.net/examples/bluehat.jpg?w=400&dpr=2 2x, https://assets.imgix.net/examples/bluehat.jpg?w=400&dpr=3 3x" src="https://assets.imgix.net/examples/bluehat.jpg?w=400" >   https://codepen.io/imgix/pen/aOxmqg?embedable=true デバイス ピクセル比 (DPR) に基づいて、各デバイスに最適な解像度を提供するイメージ タグを取得します。 imgix は、  パラメータを指定すると、自動的により多くのピクセルを提供します。 dpr デバイスとピクセルの比率の計算  、   、および それぞれ 1x、2x、および 3x アセットに適用したことがわかります。  パラメータは、  パラメータを (「CSS ピクセル」とも呼ばれます) として扱うように imgix に指示します。 dpr=1 dpr=2 dpr=3 dpr w デバイスに依存しないピクセル したがって、  の 400×300 の画像は、実際には 800×600 ピクセルの画像になります。  画像は 1200×900 ピクセルになります。  dpr=2 dpr=3 これにより、両方の長所が得られます。つまり、フル解像度をサポートするデバイスにはフル解像度を提供し、それを使用しないデバイスには必要以上のデータを配信する必要がありません。 imgix を使用すると、上で見たように、元のアセットを保存し、それをオンザフライで操作するだけで済みます。 これにより、  デバイスが発売された場合の頭痛の種も解消されます。 imgix は現在、  までをサポートしています。 4x dpr=5 この方法は、固定画像レイアウトで最も効果的に機能します。  での の使用は、現在 ます。 dpr srcset 広くサポートされてい メディア クエリでの と 使用 srcset sizes 流動的なレイアウトのレスポンシブ画像を処理する別のアプローチは、  でサイズ定義を使用することです。このソリューションでは、  属性内のメディア クエリ定義に基づいてサイズをターゲットにすることができます。 srcset sizes ブラウザは最も適切な画像を要求するか、ブラウザに応じて、利用可能な場合はキャッシュから最適な画像を読み込みます。  次の例は、imgix を使用して幅 1024、640、および 480 ピクセルの 3 つの画像のサイズを変更する方法を示しています。  属性を使用して、画像の動作に関する 2 つのクエリをターゲットにしています。 sizes   以上のビューポートでは、画像はビューポート幅の 1/3 で表示されます。 36em それ以下のサイズでは、画像はビューポートのフル サイズで表示されます。これらのサイズでは、ブラウザーは、指定されたターゲット サイズでページをレンダリングするときにどの画像を読み込むかを決定します。   <img srcset="https://assets.imgix.net/unsplash/bridge.jpg?w=1024&h=1024&fit=crop 1024w, https://assets.imgix.net/unsplash/bridge.jpg?w=640&h=640&fit=crop 640w, https://assets.imgix.net/unsplash/bridge.jpg?w=480&h=480&fit=crop 480w" src="https://assets.imgix.net/unsplash/bridge.jpg?w=640&h=640&fit=crop" sizes="(min-width: 36em) 33.3vw, 100vw" >  imgix のペン <a href="https://codepen.io/imgix/pen/VLNZaW/" target="_blank">VLNZaW</a> を参照してください (<a href="https://codepen.io/ imgix" target="_blank">@imgix</a>) を <a href="https://codepen.io" target="_blank">CodePen</a> で確認します。   https://codepen.io/imgix/pen/VLNZaW?embedable=true  imgix を使用するベスト プラクティス と imgix を使用して可能な限り最高の画像を配信する場合は、さらに考慮すべきことがあります。 srcset  imgix では、追加の操作を追加して出力画像をより詳細に制御できます。操作は URL で定義されているため、設定を微調整し、決定の変更に応じて後期段階で編集を行うことができます。   を使用する際の課題の 1 つは、ほとんどのユーザーが画面に表示されているサイズに近いサイズの画像をダウンロードできるように十分なサイズを生成する必要があることですが、生成するサイズが多すぎると、最終的にキャッシュに影響を与える可能性があります。 -能力。パフォーマンスに悪影響を与える可能性があります。 srcset 幸いなことに、  の多くは、最適な 自動的に生成できます。 imgix ライブラリ srcset   を使用する fit=max imgix URL で パラメータを使用すると、画像が元のサイズより大きく配信されることがなくなります。こうすることで、  イメージをリクエストするときに、イメージの外挿は行われなくなります。  の詳細については、ドキュメントを参照してください。 fit=max dpr=3 fit   を使用する auto=format パラメータは、それをサポートするブラウザ (Chrome、Firefox など) に軽量 WebP 画像を配信し、他のインスタンスでは元の形式にフォールバックします。 auto=format  WebP のような最新の形式では、クライアントに送信される画像データの量を大幅に削減できます。場合によっては35%も増加することもあります。 の詳細については、ドキュメントを参照してください。 自動コンテンツ ネゴシエーション 可変品質を使用する imgix で を設定するときは、画像の品質を調整することを検討するとよいでしょう。 DPR が高くなるほど パラメータを低い値に設定すると、画像のより高密度のピクセル セットを維持しながら、ファイル サイズを削減できます。 dpr q   画像サイズは21.3kBです。  。  ?q=80 試してみて、サンドボックスの違いを確認してください   画像サイズは34.7kBです。  ?dpr=2&q=40 試してみて、サンドボックスの違いを確認してください。    画像サイズは42.1kBです。  ?dpr=3&q=20 試してみて、サンドボックスの違いを確認してください。  この一般的な方法は、imgix URL API を使用すると簡単になります。品質の調整は、WebP や JPEG などの非可逆形式で特にうまく機能します。 すべてを一緒に入れて これらの例を  DPR の例に適用した実装を次に示します。 srcset   <img srcset="https://assets.imgix.net/examples/bluehat.jpg?w=400&dpr=1 1x, https://assets.imgix.net/examples/bluehat.jpg?w=400&fit=max&q=40&dpr=2 2x, https://assets.imgix.net/examples/bluehat.jpg?w=400&fit=max&q=20&dpr=3 3x" src="https://assets.imgix.net/examples/bluehat.jpg?w=400" >  imgix のペン <a href="https://codepen.io/imgix/pen/MwRjzZ/" target="_blank">MwRjzZ</a> を参照してください (<a href="https://codepen.io/ imgix" target="_blank">@imgix</a>) (<a href="https://codepen.io" target="_blank">CodePen</a>)。 概要と関連チュートリアル レスポンシブ画像は急速に変化する実装分野であり、さまざまなユースケースにさまざまな方法が適用されます。レスポンシブ デザインの側面に触れた他のチュートリアルは次のとおりです。   Retina 向けの設計、imgix による展開 クライアントヒントを備えた次世代レスポンシブイメージ <picture> で imgix を使用する

Sign Up for Free

Get A Demo

Read the Docs

Visit Website

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

初心者ガイド: srcset を使用したレスポンシブ画像

About Author

コメント

ラベル

この記事は

Related Stories

タップして稼ぐ：テレグラムはソラナより先に次の100億人の暗号通貨ユーザーを獲得する可能性がある

Claude Sonnet 3.5 システムプロンプトの漏洩: 法医学的分析

クラウド移行を成功させるための完全ガイド: 戦略とベストプラクティス

AI/ML データレイクのリファレンスアーキテクチャを構築するためのアーキテクトガイド

タップして稼ぐ：テレグラムはソラナより先に次の100億人の暗号通貨ユーザーを獲得する可能性がある

Claude Sonnet 3.5 システムプロンプトの漏洩: 法医学的分析

クラウド移行を成功させるための完全ガイド: 戦略とベストプラクティス

AI/ML データレイクのリファレンスアーキテクチャを構築するためのアーキテクトガイド

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps