Dichtedeskriptoren verwenden

Katja Hempenius
Katie Hempenius
X

Demo ansehen

  • Um die Website als Vorschau anzusehen, wählen Sie App ansehen und dann Vollbild Vollbild aus.
  • Laden Sie die Seite auf verschiedenen Geräten neu, um zu sehen, wie der Browser unterschiedliche Bilder lädt.

Dazu kannst du den Geräteemulator verwenden. Wenn du nach bestimmten Dichten suchst, probiere Folgendes aus:

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 entsprechenden Code finden Sie unter index.html.

Wie funktioniert das?

Das Konzept der Dichtedeskriptoren ist den meisten Menschen unbekannt. Zum besseren Verständnis sollten Sie etwas Hintergrundwissen zur Funktionsweise des Browsers mit Pixeln gewinnen.

Was sind Pixel?

Beginnen wir ganz von vorn und definieren, was ein Pixel ist. Das klingt einfach, aber "Pixel" kann viele Bedeutungen haben:

Geräte-Pixel (auch als "physisches Pixel" bezeichnet)
Der kleinste Farbpunkt, der auf einem Gerät angezeigt werden kann.
Logisches Pixel
Informationen, die die Farbe an einem bestimmten Ort im Raster angeben. Diese Art von Pixel hat keine inhärente physische Größe.
CSS-Pixel
In der CSS-Spezifikation wird ein Pixel als eine Maßeinheit definiert. 1 Pixel = 1/96 Zoll.

Pixeldichte

Die Pixeldichte (auch als „Bildschirmdichte“ oder „Anzeigedichte“ bezeichnet) gibt die Dichte von Gerätepixeln in einem bestimmten physischen Bereich an. Dies wird üblicherweise in Pixeln pro Zoll (ppi) gemessen.

Viele Jahre lang war 96 ppi eine sehr gängige Bildschirmdichte. Daher definiert CSS ein Pixel als 1/96stel eines Zolls. In den 1980er-Jahren war dies die Standardauflösung von Windows. Außerdem galt die Auflösung der CRT-Monitore.

Mit der Einführung von LED-Monitoren in den 2000er-Jahren begann dies, sich zu ändern. Apple hat 2010 mit der Einführung von Retina-Displays großen Aufsehen erregt. Diese Displays hatten eine Mindestauflösung von 192 ppi, was der doppelten Auflösung von „normalen“ Displays entspricht (192 ppi/96 ppi = 2).

window.devicePixelRatio

Mit der Einführung neuerer Displaytechnologien änderten sich die physische Größe und Form der "Gerätepixel" und sie hatten nicht mehr dieselbe Größe wie "CSS-Pixel". Die Notwendigkeit, die Beziehung zwischen der Größe der „Gerätepixel“ und „CSS-Pixel“ zu definieren, hat zur Einführung des devicePixelRatio geführt, das manchmal auch als „CSS-Pixelverhältnis“ bezeichnet wird.

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), weil „2 seiner Displaypixel der Größe 1 CSS-Pixel entsprechen“.

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

  • Geben Sie window.devicePixelRatio in die Console 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 an?

Größe von Bildern basierend auf dem Geräte-Pixel-Verhältnis

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

Pixel-Verhältnis des Geräts Gibt Folgendes an: Auf diesem Gerät wird ein <img>-Tag mit einer CSS-Breite von 250 Pixeln am besten dargestellt, wenn das Quell-Image...
1 1 Geräte-Pixel = 1 CSS-Pixel Breite: 250 Pixel
2 2 Gerätepixel = 1 CSS-Pixel Breite: 500 Pixel
3 3 Gerätepixel = 1 CSS-Pixel Breite: 750 Pixel

Hinweise:

  • Die in Bildeditoren, Dateiverzeichnissen und anderen Stellen aufgeführten Pixelabmessungen sind ein Maß für logische Pixel.
  • Für Bildschirme mit höherer Auflösung und größere Bildschirme benötigen Sie Bilder mit größeren Abmessungen. Das reine Vergrößern kleinerer Images macht die Bereitstellung mehrerer Image-Versionen zunichte. Ohne ein hochauflösendes Bild wäre das ohnehin der Browser gewesen.

Dichtedeskriptoren verwenden, um mehrere
-Bilder bereitzustellen

Dichtedeskriptoren können in Verbindung mit dem Attribut „srcset“ verwendet werden, um verschiedene Bilder für unterschiedliche 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 Dichtedeskriptoren, die dem Browser die Pixeldichte mitteilen, für die ein Bild bestimmt ist. Auf diese Weise 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 1.0-Pixeldichte), flower-2x.jpg (für Browser mit einer Pixeldichte von 2.0) und flower-3x.jpg (für Browser mit einer 3.0-Pixeldichte vorgesehen).
  • flower.jpg ist das Fallback-Image für Browser, die srcset nicht unterstützen.

So funktionierts:

  • Verwende „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 von 1x ausgegangen.
  • Das Einfügen von Dichtedeskriptoren in Dateinamen ist eine gängige Konvention (und hilft Ihnen, den Überblick über Dateien zu behalten), ist aber nicht erforderlich. Bilder können einen beliebigen Dateinamen haben.
  • Sie müssen kein sizes-Attribut angeben. Das Attribut sizes wird nur mit Breitendeskriptoren verwendet.