953 測定値

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

に imgix5m2023/06/23

長すぎる; 読むには

画像の最適化は、パフォーマンスの高いサイトを運営し、レスポンシブデザインを実現するために非常に重要です。 `srcset` 属性は、現在これを行うための最良の方法の 1 つです。 imgix を使用すると、流動幅形式または固定幅形式で srcset を簡単に自動化し、自動圧縮、形式変換、および可変品質設定を利用できます。

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

一般的なページの重量のほぼ 50% は画像で構成されているため、画像の最適化はパフォーマンスの高いサイトを運営するために非常に重要です。コンテンツを提供するために転送する必要のないすべてのバイトは、ページがスリムになり、ユーザーの読み込み時間が短縮されることを意味します。

このチュートリアルでは、 srcset属性の使用方法の詳細と、imgix がプロセスを容易にする方法について説明します。

正しいサイズの画像を提供することは、転送バイト数とCPU オーバーヘッドを最小限に抑えることができるため重要です。 srcset属性は、現在これを行うための最良の方法の 1 つです。

srcset と表示密度

srcsetさまざまなデバイス解像度に応じてさまざまな画像を指定する簡単な方法を提供します。これにより、サイトは高解像度ディスプレイを備えた最新のデバイスに 2 倍、3 倍、またはそれ以上のバージョンの画像を提供できます。 imgタグ内で使用するのは簡単です。

 <img srcset="asset.png 1x, asset-2x.png 2x, asset-3x.png 3x" src="asset.png" >

これにより、最高のアセットがユーザーに提供されますが、すべてのアセットの各バージョンを生成して保存する負担がサービスに移されます。これにより、ストレージコストが膨れ上がる可能性があり、生成したすべての資産を提供できない可能性があります。

大規模なライブラリやユーザーが作成したコンテンツを扱う場合、これは受け入れられません。

imgix を使用すると、画像ライブラリ全体が即座にsrcset対応になります。

imgix での srcset の使用

imgix wおよびdpr URL パラメーターを使用すると、画像の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" >

デバイスピクセル比 (DPR) に基づいて、各デバイスに最適な解像度を提供するイメージタグを取得します。 imgix は、 dprパラメータを指定すると、自動的により多くのピクセルを提供します。

デバイスとピクセルの比率の計算

dpr=1 、 dpr=2 、およびdpr=3それぞれ 1x、2x、および 3x アセットに適用したことがわかります。 dprパラメータは、 wパラメータをデバイスに依存しないピクセル(「CSS ピクセル」とも呼ばれます) として扱うように imgix に指示します。

したがって、 dpr=2の 400×300 の画像は、実際には 800×600 ピクセルの画像になります。 dpr=3画像は 1200×900 ピクセルになります。

これにより、両方の長所が得られます。つまり、フル解像度をサポートするデバイスにはフル解像度を提供し、それを使用しないデバイスには必要以上のデータを配信する必要がありません。 imgix を使用すると、上で見たように、元のアセットを保存し、それをオンザフライで操作するだけで済みます。

これにより、 4xデバイスが発売された場合の頭痛の種も解消されます。 imgix は現在、 dpr=5までをサポートしています。

この方法は、固定画像レイアウトで最も効果的に機能します。 dprでのsrcsetの使用は、現在広くサポートされています。

メディアクエリでの`srcset`と`sizes`使用

流動的なレイアウトのレスポンシブ画像を処理する別のアプローチは、 srcsetでサイズ定義を使用することです。このソリューションでは、 sizes属性内のメディアクエリ定義に基づいてサイズをターゲットにすることができます。

ブラウザは最も適切な画像を要求するか、ブラウザに応じて、利用可能な場合はキャッシュから最適な画像を読み込みます。

次の例は、imgix を使用して幅 1024、640、および 480 ピクセルの 3 つの画像のサイズを変更する方法を示しています。 sizes属性を使用して、画像の動作に関する 2 つのクエリをターゲットにしています。

36em以上のビューポートでは、画像はビューポート幅の 1/3 で表示されます。

それ以下のサイズでは、画像はビューポートのフルサイズで表示されます。これらのサイズでは、ブラウザーは、指定されたターゲットサイズでページをレンダリングするときにどの画像を読み込むかを決定します。

 <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> で確認します。

imgix を使用するベストプラクティス

srcsetと imgix を使用して可能な限り最高の画像を配信する場合は、さらに考慮すべきことがあります。

imgix では、追加の操作を追加して出力画像をより詳細に制御できます。操作は URL で定義されているため、設定を微調整し、決定の変更に応じて後期段階で編集を行うことができます。

srcsetを使用する際の課題の 1 つは、ほとんどのユーザーが画面に表示されているサイズに近いサイズの画像をダウンロードできるように十分なサイズを生成する必要があることですが、生成するサイズが多すぎると、最終的にキャッシュに影響を与える可能性があります。 -能力。パフォーマンスに悪影響を与える可能性があります。

幸いなことに、 imgix ライブラリの多くは、最適なsrcset自動的に生成できます。

`fit=max`を使用する

imgix URL でfit=maxパラメータを使用すると、画像が元のサイズより大きく配信されることがなくなります。こうすることで、 dpr=3イメージをリクエストするときに、イメージの外挿は行われなくなります。 fitの詳細については、ドキュメントを参照してください。

`auto=format`を使用する

auto=formatパラメータは、それをサポートするブラウザ (Chrome、Firefox など) に軽量 WebP 画像を配信し、他のインスタンスでは元の形式にフォールバックします。

WebP のような最新の形式では、クライアントに送信される画像データの量を大幅に削減できます。場合によっては35%も増加することもあります。自動コンテンツネゴシエーションの詳細については、ドキュメントを参照してください。

可変品質を使用する

imgix でdprを設定するときは、画像の品質を調整することを検討するとよいでしょう。 DPR が高くなるほどqパラメータを低い値に設定すると、画像のより高密度のピクセルセットを維持しながら、ファイルサイズを削減できます。

?q=80画像サイズは21.3kBです。試してみて、サンドボックスの違いを確認してください。

?dpr=2&q=40画像サイズは34.7kBです。試してみて、サンドボックスの違いを確認してください。

?dpr=3&q=20画像サイズは42.1kBです。試してみて、サンドボックスの違いを確認してください。

この一般的な方法は、imgix URL API を使用すると簡単になります。品質の調整は、WebP や JPEG などの非可逆形式で特にうまく機能します。

すべてを一緒に入れて

これらの例をsrcset DPR の例に適用した実装を次に示します。

 <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>)。