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.

Sie können dazu 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 für die meisten Menschen möglicherweise nicht vertraut. Um sie besser zu verstehen, ist es hilfreich, etwas über die Funktionsweise von Pixeln im Browser zu wissen.

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 Stelle 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 = 0,0254 Zoll.

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. Insbesondere Apple hat 2010 mit der Einführung von Retina-Displays für Aufsehen gesorgt. 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, das Verhältnis 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 das Verhältnis zwischen Gerätepixeln und CSS-Pixeln für ein bestimmtes Gerät. Ein Gerät mit 192 ppi hat eine devicePixelRatio von 2 (192 ppi ÷ 96 ppi = 2), da „2 der Displaypixel die Größe von 1 CSS-Pixel haben“.

Heutzutage haben die meisten Geräte ein Pixelverhä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 finden Sie die Pixelverhältnisse gängiger Geräte. Die meisten liegen zwischen 1,0 und 4,0.

Wie wenden Sie diese Informationen also an?

Bilder basierend auf dem Pixelverhältnis des Geräts skalieren

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 750 Pixel breit

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ößere Displays benötigen Sie Bilder mit größeren Abmessungen. Wenn Sie kleinere Bilder nur vergrößern, entgeht Ihnen der Vorteil, mehrere Bildversionen bereitzustellen. Der Browser würde dies auch tun, wenn kein Bild in hoher Auflösung bereitgestellt würde.

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.

So funktionierts:

  • Verwenden Sie ein devicePixelRatio und die Einheit x, um Dichtebeschreiber zu schreiben. Beispielsweise würde der Dichtedeskriptor für viele Retina-Bildschirme (window.devicePixelRatio = 2) als 2x geschrieben.
  • Wenn kein Dichtebeschreiber angegeben ist, wird davon ausgegangen, dass es sich um 1x handelt.
  • Es ist zwar üblich, Dichtebeschreiber in Dateinamen aufzunehmen, damit Sie die Dateien besser im Blick behalten können, 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.