Dichtedeskriptoren verwenden

Katie Hempenius
Katie Hempenius
X

Demo ansehen

  • Wenn Sie sich eine Vorschau der Website ansehen möchten, klicken Sie auf View App (App ansehen) und dann auf Fullscreen (Vollbild) Vollbild.
  • Laden Sie die Seite mit verschiedenen Geräten neu, um zu sehen, wie der Browser unterschiedliche Bilder lädt.

Dazu können Sie den Geräteemulator verwenden. Wenn Sie nach bestimmten Pixeldichten suchen, können Sie die folgenden Geräte ausprobieren:

1-fache Dichte Blackberry Playbook, viele externe Monitore
2-fache Dichte iPad oder iPhone 5/6
3-fache Dichte Galaxy S5 oder iPhone X
  • Den Code, der dies ermöglicht, finden Sie unter index.html.

Wie funktioniert das?

Das Konzept der Dichtedeskriptoren ist den meisten Menschen wahrscheinlich nicht vertraut. Um sie besser zu verstehen, ist es hilfreich, ein wenig Hintergrundwissen darüber zu haben, wie der Browser mit Pixeln arbeitet.

Was sind Pixel?

Beginnen wir ganz am Anfang und definieren, was ein Pixel ist. Das klingt einfach, aber „Pixel“ kann tatsächlich viele Bedeutungen haben:

Gerätepixel (auch „physisches Pixel“)
Der kleinste Farbpunkt, der auf einem Gerät angezeigt werden kann.
Logisches Pixel
Informationen, die die Farbe an einer bestimmten Stelle in einem Raster angeben. Dieser Pixeltyp hat keine inhärente physische Größe.
CSS-Pixel
In der CSS-Spezifikation wird ein Pixel als physische Maßeinheit definiert. 1 Pixel = 1/96 Zoll.

Pixeldichte

Die Pixeldichte (auch als „Bildschirmdichte“ oder „Displaydichte“ bezeichnet) gibt die Dichte der Gerätepixel in einem bestimmten physischen Bereich an. Diese wird üblicherweise in Pixel pro Zoll (ppi) gemessen.

Viele Jahre lang war 96 ppi eine sehr gängige Pixeldichte. Daher wird ein Pixel in CSS als 1/96 Zoll definiert. Ab den 1980er-Jahren war es die Standardauflösung von Windows. Außerdem war es die Auflösung von CRT-Monitoren.

Das änderte sich, als in den 2000er-Jahren LED-Monitore aufkamen. Insbesondere Apple sorgte 2010 mit der Einführung von Retina-Displays für großes Aufsehen. Diese Displays hatten eine Mindestauflösung von 192 ppi, was der doppelten Auflösung von „normalen“ Displays entsprach (192 ppi / 96 ppi = 2).

window.devicePixelRatio

Mit der Einführung neuerer Displaytechnologien begannen die „Gerätepixel“, sich in ihrer physischen Größe und Form zu unterscheiden, und hatten nicht mehr dieselbe Größe wie „CSS-Pixel“. Die Notwendigkeit, die Beziehung zwischen der Größe von „Gerätepixeln“ und „CSS-Pixeln“ zu definieren, führte zur Einführung des devicePixelRatio (manchmal auch als „CSS-Pixelverhältnis“ bezeichnet).

devicePixelRatio definiert die Beziehung zwischen Gerätepixeln und CSS-Pixeln für ein bestimmtes Gerät. Ein Gerät mit 192 ppi hat einen devicePixelRatio von 2 (192 ppi / 96 ppi = 2), da „2 seiner Displaypixel die Größe von 1 CSS-Pixel haben“.

Heutzutage haben die meisten Geräte ein Pixelverhältnis zwischen 1,0 und 4,0.

  • Bestimmen Sie die Pixeldichte eines Geräts, indem Sie window.devicePixelRatio in die Konsole eingeben.

  • In dieser Tabelle finden Sie die Pixelverhältnisse gängiger Geräte. Die meisten liegen zwischen 1,0 und 4,0.

Wie wenden Sie diese Informationen nun an?

Bildgröße basierend auf dem Pixelverhältnis des Geräts festlegen

Damit Bilder auf hochauflösenden Bildschirmen optimal dargestellt werden, müssen verschiedene Bildversionen für unterschiedliche devicePixelRatios bereitgestellt werden.

Pixel-Verhältnis des Geräts Gibt Folgendes an: Auf diesem Gerät sieht ein <img>-Tag mit einer CSS-Breite von 250 Pixeln am besten aus, wenn das Quellbild…
1 1 Gerätepixel = 1 CSS-Pixel 250 Pixel breit
2 2 Gerätepixel = 1 CSS-Pixel 500 Pixel breit
3 3 Gerätepixel = 1 CSS-Pixel 750 Pixel breit

Hinweise:

  • Die in Bildbearbeitungsprogrammen, Dateiverzeichnissen und an anderen Stellen aufgeführten Pixelabmessungen sind ein Maß für logische Pixel.
  • Für Bildschirme mit höherer Auflösung und größere Displays benötigst du Bilder mit größeren Abmessungen. Wenn du kleinere Bilder nur vergrößerst, wird der Zweck der Bereitstellung mehrerer Bildversionen verfehlt. Der Browser hätte dies ohnehin getan, wenn kein Bild mit hoher Auflösung bereitgestellt worden wäre.

Dichtedeskriptoren verwenden, um mehrere
-Bilder bereitzustellen

Dichtedeskriptoren können in Verbindung mit dem Attribut „srcset“ verwendet werden, um unterschiedliche Bilder für verschiedene devicePixelRatios bereitzustellen.

  • Sehen Sie sich die Datei index.html an und beachten Sie das Element <img>.
<img src="flower.jpg"
  srcset="flower-1x.jpg 1x,
          flower-2x.jpg 2x,
          flower-3x.jpg 3x">

Dieses Beispiel in Worten:

  • 1x, 2x und 3x sind Dichtebeschreibungen, die dem Browser die Pixeldichte mitteilen, für die ein Bild vorgesehen ist. So muss der Browser kein Bild herunterladen, um diese Informationen zu ermitteln.
  • Der Browser kann zwischen drei Bildern wählen: flower-1x.jpg (für Browser mit einer Pixeldichte von 1.0), flower-2x.jpg (für Browser mit einer Pixeldichte von 2.0) und flower-3x.jpg (für Browser mit einer Pixeldichte von 3.0).
  • flower.jpg ist das Fallback-Bild für Browser, die srcset nicht unterstützen.

So funktionierts:

  • Verwenden Sie ein devicePixelRatio und die Einheit x, um Pixeldichtedeskriptoren zu schreiben. Der Dichtedeskriptor für viele Retina-Bildschirme (window.devicePixelRatio = 2) wird beispielsweise als 2x geschrieben.
  • Wenn kein Pixeldichtedeskriptor angegeben ist, wird 1x angenommen.
  • Die Angabe von Dichtedeskriptoren in Dateinamen ist eine gängige Konvention und hilft Ihnen, den Überblick über die Dateien zu behalten, ist aber nicht erforderlich. Images können einen beliebigen Dateinamen haben.
  • Das Attribut sizes muss nicht angegeben werden. Das Attribut sizes wird nur mit Breitenbeschreibungen verwendet.