密度記述子を使用する

Katie Hempenius
Katie Hempenius
X

このデモを試す

  • サイトをプレビューするには、[アプリを表示] を押してから、[全画面表示] 全画面表示 を押します。
  • 別のデバイスを使用してページを再読み込みすると、ブラウザが異なる画像を読み込むことがわかります。

デバイス エミュレータを使用できます。特定のディスプレイ密度をお探しの場合は、次のデバイスをお試しください。

1x 密度 Blackberry Playbook、多くの外部モニター
2 倍の密度 iPad または iPhone 5/6
3 倍の密度 Galaxy S5、iPhone X
  • これを実現するコードについては、index.html をご覧ください。

仕組み

密度記述子のコンセプトは、ほとんどのユーザーにとって馴染みがないかもしれません。これを理解するには、ブラウザがピクセルを使用する仕組みについて少し理解しておくと役立ちます。

ピクセルとは

まず、ピクセルとは何かを定義しましょう。単純に聞こえますが、「ピクセル」には実際には多くの意味があります。

デバイス ピクセル（「物理ピクセル」）
デバイスに表示できる最小の色ドット。
論理ピクセル
グリッド上の特定の位置の色を指定する情報。 このタイプのピクセルに固有の物理的なサイズはありません。
CSS ピクセル
CSS 仕様では、ピクセルは物理的な測定単位として定義されています。1 ピクセル = 1/96 インチ。

ピクセル密度

ピクセル密度（「画面密度」または「ディスプレイ密度」とも呼ばれる）は、特定の物理領域におけるデバイス ピクセルの密度を測定します。これは通常、インチあたりのピクセル数（ppi）で測定されます。

長年にわたり、96 ppi は非常に一般的なディスプレイ密度でした（そのため、CSS ではピクセルが 1/96 インチと定義されています）。1980 年代以降、Windows のデフォルトの解像度でした。また、これは CRT モニターの解像度でもありました。

2000 年代に LED モニターが一般的になると、この状況は変わり始めました。特に、Apple は 2010 年に Retina ディスプレイを導入して大きな話題を呼びました。これらのディスプレイの最小解像度は 192 ppi で、「通常」のディスプレイの解像度の 2 倍でした（192 ppi ÷ 96 ppi = 2）。

window.devicePixelRatio

新しいディスプレイ技術の導入に伴い、「デバイス ピクセル」の物理サイズと形状が変化し、「CSS ピクセル」と同じサイズではなくなりました。「デバイス ピクセル」と「CSS ピクセル」のサイズの関係を定義する必要性から、devicePixelRatio（「CSS ピクセル比」とも呼ばれる）が導入されました。

devicePixelRatio は、特定のデバイスのデバイス ピクセル間と CSS ピクセル間の関係を定義します。192 ppi のデバイスの devicePixelRatio は 2（192 ppi ÷ 96 ppi = 2）です。「ディスプレイ ピクセル 2 つが CSS ピクセル 1 つのサイズである」ためです。

現在、ほとんどのデバイスのデバイス ピクセル比は 1.0 ～ 4.0 です。

  • コンソールに window.devicePixelRatio と入力して、デバイスのピクセル密度を確認します。

  • 一般的なデバイスのピクセル比率については、こちらの表をご覧ください。ほとんどは 1.0 ～ 4.0 の範囲です。

では、この情報を実際にどのように適用すればよいのでしょうか。

デバイスのピクセル比に基づいて画像のサイズを調整する

高解像度の画面で画像を最適に表示するには、devicePixelRatios ごとに異なる画像バージョンを指定する必要があります。

デバイスのピクセル比 次のことを示します。 このデバイスでは、CSS 幅が 250 ピクセルの <img> タグは、ソース画像が次の場合に最適な表示になります。
1 1 デバイス ピクセル = 1 CSS ピクセル 幅 250 ピクセル
2 2 つのデバイス ピクセル = 1 つの CSS ピクセル 幅 500 ピクセル
3 3 つのデバイス ピクセル = 1 つの CSS ピクセル 幅 750 ピクセル

注意事項:

  • 画像エディタやファイル ディレクトリなどに表示されるピクセル寸法は、論理ピクセルの測定値です。
  • 高解像度の画面や大きなディスプレイの場合は、サイズの大きい画像が必要です。小さい画像を単に拡大するだけでは、複数の画像バージョンを配信する目的を果たせません。高解像度の画像が提供されていなかった場合、ブラウザはいずれにしてもこの処理を行っていたはずです。

Density Descriptor を使用して複数の
画像を提供する

密度記述子は、「srcset」属性と組み合わせて、異なる devicePixelRatio に異なる画像を提供するのに使用できます。

  • index.html ファイルを開き、<img> 要素を確認します。
<img src="flower.jpg"
  srcset="flower-1x.jpg 1x,
          flower-2x.jpg 2x,
          flower-3x.jpg 3x">

この例では、次のように言葉で表現します。

  • 1x、2x、3x はすべて密度記述子であり、画像が対象とするピクセル密度をブラウザに伝えます。これにより、ブラウザがこの情報を判断するために画像をダウンロードする必要がなくなります。
  • ブラウザは、flower-1x.jpg（1.0 ピクセル密度のブラウザ用）、flower-2x.jpg（2.0 ピクセル密度のブラウザ用）、flower-3x.jpg（3.0 ピクセル密度のブラウザ用）の 3 つの画像から選択できます。
  • flower.jpg は、srcset をサポートしていないブラウザ用のフォールバック画像です。

使用方法:

  • デバイスのピクセル比と x 単位を使用して、密度記述子を書き込みます。たとえば、多くの Retina 画面の密度記述子（window.devicePixelRatio = 2）は 2x と記述されます。
  • 密度記述子が指定されていない場合、1x と見なされます。
  • ファイル名に密度記述子を含めることは一般的な規則であり（ファイルの追跡に役立ちます）、必須ではありません。画像には任意のファイル名を付けることができます。
  • sizes 属性を含める必要はありません。sizes 属性は、幅記述子でのみ使用されます。