密度記述子を使用する

Katie Hempenius 氏
Katie Hempenius
X

このデモを見る

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

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

密度 1 倍 Blackberry Playbook、多数の外部モニター
密度 2 倍 iPad または iPhone 5/6
密度 3 倍 Galaxy S5 または iPhone X
  • この処理を行うコードは、index.html で確認できます。

仕組み

密度記述子の概念は、多くのユーザーにはなじみがないかもしれません。これらを理解するには、ブラウザがピクセルを処理する仕組みについて少し背景知識があると役立ちます。

ピクセルとは

まず、ピクセルを定義することから始めましょう。これは単純に聞こえますが、「ピクセル」には実際にはさまざまな意味があります。

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

ピクセル密度

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

長年にわたり、96 ppi は非常に一般的な表示密度でした（そのため、CSS ではピクセルを 1/96 インチと定義しています）。1980 年代から Windows のデフォルトの解像度になっていました。また、CRT モニターの解像度にもなりました。

2000 年代に LED モニターが普及するにつれ、この状況が変わり始めました。特に、2010 年に Retina ディスプレイを導入した Apple は大きな注目を集めました。これらのディスプレイの最小解像度は 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」属性と組み合わせて使用すると、devicePixelRatios ごとに異なる画像を提供できます。

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