Dichtedeskriptoren verwenden

Katie Hempenius
Katie Hempenius
X

Diese Demo ansehen

  • Wenn Sie sich eine Vorschau der Website ansehen möchten, klicken Sie auf App ansehen. Drücken Sie dann Vollbild Vollbild
  • Aktualisieren Sie die Seite mit verschiedenen Geräten, um zu sehen, wie der Browser anders geladen wird Bilder.

Dafür kannst du den Geräteemulator verwenden. Wenn Sie ein bestimmtes Display suchen, können Sie folgende 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 entsprechenden Code findest du unter index.html.

Wie funktioniert das?

Das Konzept der Dichtedeskriptoren ist den meisten Menschen vielleicht noch unbekannt. Damit Sie zu verstehen, ist es hilfreich, sich ein wenig über die Funktionsweise des Browsers mit Pixeln.

Was sind Pixel?

Beginnen wir ganz am Anfang, indem wir definieren, was ein Pixel ist. Das klingt einfach, aber „Pixel“ kann verschiedene Bedeutungen haben:

Gerätepixel (auch als "physisches Pixel" bezeichnet)
Der kleinste Farbpunkt, der auf einem Gerät angezeigt werden kann.
Logisches Pixel
Informationen, die die Farbe an einer bestimmten Position in einem Raster angeben. Diese Art von Pixel hat keine inhärente physische Größe.
CSS-Pixel
In der CSS-Spezifikation ist ein Pixel als Einheit physikalischer Maßeinheiten definiert. 1 Pixel = 1/96th eines Zolls.

Pixeldichte

Pixeldichte (auch als "Bildschirmdichte" oder "Displaydichte" bezeichnet) misst die Dichte der Gerätepixel in einem bestimmten physischen Bereich. Dies ist normalerweise mit Pixel pro Zoll (ppi) gemessen.

Viele Jahre lang war 96 ppi eine sehr gängige Anzeigedichte (CSS definiert daher eine Pixel im Format 1/96 eines Zolls). Seit den 1980er-Jahren war dies die Standardauflösung von Windows. Außerdem war die Auflösung von CRT Monitore.

Dies änderte sich, als LED-Monitore in den 2000er Jahren allgegenwärtig wurden. Insbesondere 2010 hatte Apple mit der Einführung von Retina-Displays große Aufmerksamkeit. Diese Bildschirme hatten eine Mindestauflösung von 192 ppi, was der doppelten Auflösung "Normalgröße" Bildschirmen (192 ppi/96 ppi = 2).

window.devicePixelRatio

Mit der Einführung neuerer Display-Technologien begann zu variieren in physischer Größe und Form und nicht mehr dieselbe Größe wie „CSS-Pixel“ hatten. Die Notwendigkeit, Beziehung zwischen der Größe von "Gerätepixel" und „CSS-Pixel“ hat dazu geführt, die Einführung des devicePixelRatio (manchmal auch als „CSS-Pixel“ bezeichnet) Seitenverhältnis").

devicePixelRatio definiert die Beziehung 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 "zwei 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.

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

  • In dieser Tabelle finden Sie die Pixelverhältnisse der gängige 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 hochauflösenden Bildschirmen optimal zur Geltung kommen, erforderlich, um verschiedene Image-Versionen für verschiedene devicePixelRatios bereitzustellen.

Pixel-Verhältnis des Geräts Gibt Folgendes an: Auf diesem Gerät wird ein <img> mit einer CSS-Breite von 250 Pixeln optimal aussehen, wenn das Quell-Image...
1 1 Gerätepixel = 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 Pixelabmessungen, die in Bildeditoren, Dateiverzeichnissen und sind die Maße logischer Pixel.
  • Für Bildschirme mit höherer Auflösung und größeren Bildschirmen benötigen Sie Bilder mit größer dargestellt werden. Das reine Vergrößern kleinerer Bilder verfehlt den Zweck der Bereitstellung mehrerer Image-Versionen. Der Browser hätte dies ohnehin erledigt, Es wurde kein Bild mit hoher Auflösung bereitgestellt.

Dichtebeschreibungen verwenden, um mehrere
-Images bereitzustellen

Kompaktheitsbeschreibungen in Verbindung mit "srcset " kann verwendet werden, um unterschiedliche Bilder für verschiedene devicePixelRatios liefern.

  • 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">

Dieses Beispiel in Worten:

  • 1x, 2x und 3x sind Deskriptoren für die Dichte, die dem Browser mitteilen Die Pixeldichte, für die ein Bild bestimmt ist. Dadurch wird der Browser kein Bild herunterladen, um diese Informationen zu ermitteln.
  • Der Browser kann zwischen drei Bildern wählen: flower-1x.jpg (für mit einer Pixeldichte von 1.0), flower-2x.jpg (für mit einer Pixeldichte von 2.0) und flower-3x.jpg (für Browser mit einer Pixeldichte von 3.0).
  • flower.jpg ist das Fallback-Image für Browser, die keine srcset.

Verwendung:

  • Mit „devicePixelRatio“ und der Einheit x kannst du Dichtedeskriptoren schreiben. Für Der Kompaktheitsgrad für viele Retina-Bildschirme (window.devicePixelRatio = 2) wird als 2x geschrieben.
  • Wenn kein Dichtedeskriptor angegeben ist, wird davon ausgegangen, dass es sich um 1x handelt.
  • Das Einfügen von Dichtebeschreibungen in Dateinamen ist eine gängige Konvention (und wird Ihnen helfen, den Überblick über Dateien zu behalten), ist aber nicht notwendig. Bilder können beliebige filename.
  • Das Attribut sizes muss nicht angegeben werden. Das Attribut sizes ist nur mit Breitenbeschreibungen verwendet werden.