密度記述子を使用する

Katie Hempenius
Katie Hempenius
X

このデモを試す

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

これにはデバイス エミュレータを使用できます。特定の表示密度をテストする場合は、次のデバイスを試してください。

1 倍の密度 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 つのディスプレイ ピクセルが 1 つの CSS ピクセルのサイズ」であることを意味します。

最近のほとんどのデバイスのデバイス ピクセル比は 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 をサポートしていないブラウザ用の代替画像です。

使用方法:

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