デバイスピクセル比

画像の出力密度を制御し、単一の画像からすべてのユーザーのデバイスに適した密度で画像を提供できます。

このパラメーターを機能させるには、幅、高さ、またはその両方を指定する必要があります。デフォルトは 1 で、最大値は 5 です。

デバイスピクセル比（DPR）は、デバイス非依存ピクセル (opens in a new tab)とデバイスピクセル（「CSSピクセル」とも呼ばれる）の間を簡単に変換する方法です。これにより、高DPRの画像はそれをサポートできるデバイスにのみ配信されます。これにより、低DPRのデバイスを持つユーザーのために帯域幅が節約され、高DPRのイメージが期待どおりの鮮明さで配信されます。

dpr パラメーターは、 srcset などの技術と組み合わせて使用すると最適です。これにより、高DPRの画像をどのような比率で配信するかを定義できます。以下のコードは、指定された dpr の値に基づいて、500×300ピクセルのコンテナに次の画像サイズを提供します：

<img
  srcset="
    https://assets.imgix.net/unsplash/motorbike.jpg?fit=crop&h=300&w=500&auto=enhance&dpr=1 1x,
    https://assets.imgix.net/unsplash/motorbike.jpg?fit=crop&h=300&w=500&auto=enhance&dpr=2 2x,
    https://assets.imgix.net/unsplash/motorbike.jpg?fit=crop&h=300&w=500&auto=enhance&dpr=3 3x
  "
  src="https://assets.imgix.net/unsplash/motorbike.jpg?fit=crop&h=300&w=500&auto=enhance"
/>

この画像の場合、低DPRデバイスではdpr=2よりもdpr=1を設定することで60KB節約され、そのデバイスの読み込み速度が大幅に向上します。同時に、高DPRデバイスに対してdpr=2を設定することで、その画像が画面で可能な限り鮮明に表示されることが保証されます。以下でその違いを見ることができます。

Edit in Sandbox

Edit in Sandbox

dprの詳細については、srcsetのチュートリアルをご覧ください。