密度記述子を使用する

Katie Hempenius
Katie Hempenius
X

このデモを試す

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

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

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

仕組み

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

ピクセルとは

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

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

ピクセル密度

ピクセル密度（「画面密度」または「表示密度」とも呼ばれます）は、特定の物理領域におけるデバイス ピクセルの密度を測定します。これは通常、1 インチあたりのピクセル数（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 ピクセル

注意事項:

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

密度記述子を使用して複数の
画像を提供する

密度記述子は、「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 属性は、幅記述子でのみ使用されます。