Dichtedeskriptoren verwenden

Katie Hempenius
Katie Hempenius
X

Demo ansehen

  • Wenn Sie sich eine Vorschau der Website ansehen möchten, drücken Sie App ansehen und dann Vollbild Vollbild.
  • Laden Sie die Seite mit verschiedenen Geräten neu, um zu sehen, ob der Browser unterschiedliche Bilder lädt.

Dafür kannst du den Geräteemulator verwenden. Wenn Sie nach bestimmten Displaydichten 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 dafür findest du unter index.html.

Wie funktioniert das?

Das Konzept der Dichtebeschreiber ist den meisten Menschen möglicherweise nicht vertraut. Um sie besser zu verstehen, ist es hilfreich, etwas Hintergrundwissen 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 viele Bedeutungen haben:

Pixel des Geräts (auch „physisches Pixel“ genannt)
Der kleinste Farbpunkt, der auf einem Gerät dargestellt werden kann.
Logisches Pixel
Informationen, die die Farbe an einer bestimmten Position in einem Raster angeben. Dieser Pixeltyp hat keine physikalische Größe.
CSS-Pixel
Die CSS-Spezifikation definiert ein Pixel als physikalische Maßeinheit. 1 Pixel = 1/96s eines Zolls.

Pixeldichte

Die Pixeldichte (auch als „Bildschirmdichte“ oder „Displaydichte“ bezeichnet) gibt die Dichte der Pixel eines Geräts in einem bestimmten physischen Bereich an. Dieser Wert wird in der Regel in Pixeln pro Zoll (ppi) gemessen.

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

Das begann sich zu ändern, als in den 2000er-Jahren LED-Monitore auf den Markt kamen. Besonders im Jahr 2010 sorgte Apple mit der Einführung von Retina-Displays für große Aufmerksamkeit. Diese Displays hatten eine Mindestauflösung von 192 ppi, was doppelt so hoch wie die Auflösung „normaler“ Displays war (192 ppi ÷ 96 ppi = 2).

window.devicePixelRatio

Mit der Einführung neuer Displaytechnologien begannen sich die physische Größe und die Form von „Gerätepixeln“ zu unterscheiden und sie 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, hat zur Einführung des devicePixelRatio (manchmal auch als „CSS-Pixelverhältnis“ bezeichnet).

devicePixelRatio definiert das Verhältnis zwischen Gerätepixeln und CSS-Pixeln für ein bestimmtes Gerät. Ein Gerät mit 192 ppi hat den Wert „2“ für devicePixelRatio (192 ppi/96 ppi = 2), weil „2 der Displaypixel die Größe eines CSS-Pixels haben“.

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

  • Geben Sie window.devicePixelRatio in die Konsole ein, um die Pixeldichte eines Geräts zu ermitteln.

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

Wie wenden Sie diese Informationen also an?

Größe von Bildern basierend auf dem Verhältnis der Geräte-Pixelverhältnisse

Damit Bilder auf Bildschirmen mit hoher Auflösung optimal aussehen, müssen Sie für verschiedene devicePixelRatios unterschiedliche Bildversionen bereitstellen.

Pixel-Verhältnis des Geräts Das bedeutet: 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 Breite: 750 Pixel

Hinweise:

  • Die in Bildeditoren, Dateiverzeichnissen und an anderen Stellen aufgeführten Pixelabmessungen sind eine Messung in logischen Pixeln.
  • Für Bildschirme mit höherer Auflösung und größeren Bildschirmen benötigen Sie Bilder mit größeren Abmessungen. Wenn Sie kleinere Bilder nur vergrößern, entgeht Ihnen der Vorteil, mehrere Bildversionen bereitzustellen. Ohne hochauflösendes Bild hätte der Browser dies ohnehin erledigt.

Dichtebeschreibungen verwenden, um mehrere
-Bilder auszuliefern

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

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

In diesem Beispiel wird Folgendes ausgedrückt:

  • 1x, 2x und 3x sind Dichtebeschreiber, die dem Browser die Pixeldichte eines Bildes mitteilen. 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.

Verwendung:

  • Verwenden Sie devicePixelRatio und die Einheit x, um Dichtedeskriptoren zu schreiben. Der Dichtedeskriptor für viele Retina-Bildschirme (window.devicePixelRatio = 2) würde beispielsweise als 2x geschrieben werden.
  • Wenn kein Dichtedeskriptor angegeben ist, wird davon ausgegangen, dass es sich um 1x handelt.
  • Es ist zwar üblich, Dichtebeschreiber in Dateinamen aufzunehmen, um den Überblick über die Dateien zu behalten, aber es ist nicht erforderlich. Bilder können beliebige Dateinamen haben.
  • Das Attribut sizes ist nicht erforderlich. Das Attribut sizes wird nur mit Beschreibungen für die Breite verwendet.