Demo ansehen
- Um die Website als Vorschau anzusehen, wählen Sie App ansehen und dann 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
und3x
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 einer1.0
-Pixeldichte),flower-2x.jpg
(für Browser mit einer Pixeldichte von2.0
) undflower-3x.jpg
(für Browser mit einer3.0
-Pixeldichte vorgesehen). flower.jpg
ist das Fallback-Image für Browser, diesrcset
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 als2x
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 Attributsizes
wird nur mit Breitendeskriptoren verwendet.