DPRでWebサイトのパフォーマンスを向上！画像の読み込み速度とデータ使用量を節約

DPR を実装するには、Web サーバー側とクライアント側の両方で設定が必要です。

Web サーバー側

const request = new Request('https://example.com/image.jpg', {
  headers: {
    'Accept-CH': 'DPR=2.0'
  }
});

HTTP/1.1 200 OK
Content-Type: image/jpeg
Content-DPR: 2.0

この例では、Web サーバーは Content-DPR ヘッダーを使用して、クライアントに 2 倍の解像度の画像を送信することを伝えます。

<img srcset="image-2x.jpg 2x, image.jpg 1x" alt="Example image">

この例では、img 要素の srcset 属性を使用して、デバイスの DPR に応じて適切な画像を読み込みます。 DPR が 2 のデバイスでは image-2x.jpg が読み込まれ、DPR が 1 のデバイスでは image.jpg が読み込まれます。

const dpr = window.devicePixelRatio || 1;

console.log('DPR:', dpr);

この例では、JavaScript を使用してデバイスの DPR を検出し、コンソールにログ出力します。

レスポンシブ画像

レスポンシブ画像は、srcset 属性と sizes 属性を使用して、デバイスの画面サイズに応じて適切なサイズの画像を自動的に読み込みます。DPR を意識する必要がなく、より柔軟なレイアウトを作成できます。

例

<img srcset="image-2x.jpg 2x, image.jpg 1x"
     sizes="(max-width: 400px) 100vw, 400px"
     alt="Example image">

CSSメディアクエリ

CSSメディアクエリを使用して、デバイスの解像度に応じて異なるスタイルを適用できます。DPR に基づいてスタイルを調整することもできますが、より汎用性の高い方法です。

例

@media (min-resolution: 2dpx) {
  img {
    transform: scale(2);
  }
}

サーバー側ロジック

サーバー側でデバイス情報を取得し、それに応じて適切な画像サイズを返すロジックを実装することもできます。DPR に限らず、様々なデバイス特性に対応できますが、開発とメンテナンスの手間がかかります。

JavaScriptライブラリ

DPR を検出して処理を自動化してくれる JavaScript ライブラリがいくつか存在します。簡単に実装できますが、ライブラリの動作に依存することになります。

代表的なライブラリ