Einfache Bilder mit hoher DPI-Qualität

Boris Smus
Boris Smus

Displays mit hoher Pixeldichte werden immer beliebter. Creator müssen sich darauf einstellen. Dies ist ein kurzer Leitfaden zur Bereitstellung hochwertiger Bilder im Web, ohne Polyfills, JavaScript, CSS-Hacks und Browserfunktionen, die noch nicht implementiert sind. Kurz gesagt: ohne drastische Änderungen an Ihrem Workflow.

Heutzutage gibt es viele Vorschläge für responsive Bilder, von denen viele erhebliche Änderungen für Webentwickler erfordern. Das Attribut <img> des Standard-Tracks srcset ist schwierig zu implementieren, insbesondere da srcset eine zusätzliche Darstellungsbereich-basierte Auswahl bietet:

banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x

Auch wenn die CSS-Eigenschaft image-set nur devicePixelRatio verwendet, um zu entscheiden, welches Bild geladen werden soll, müssen Entwickler trotzdem viel zusätzliches Markup für jedes Bild schreiben.

Andere Vorschläge wie das <picture>-Element sind noch ausführlicher. Außerdem sind sie kein Standards-Track, sodass sie noch länger als das srcset-Attribut nicht überall verfügbar sein werden. JavaScript- und serverseitige Lösungen sind die einzigen anderen Alternativen. Diese Ansätze haben jedoch ihre eigenen Nachteile, wie in anderen Artikeln beschrieben.

In diesem Artikel werden verschiedene Verwendungen von Bildern im Web beschrieben und einfache Lösungen vorgeschlagen, die sowohl auf Bildschirmen mit hoher Pixeldichte als auch auf normalen Bildschirmen funktionieren. Im Rahmen dieser Erläuterung kann jedes Gerät, das einen window.devicePixelRatio-Wert größer als 1 meldet, als hoher DPI betrachtet werden, da dies bedeutet, dass CSS-Pixel nicht mit Gerätepixeln identisch sind und die Bilder vertikal skaliert werden.

Übersicht:

  • Verwenden Sie nach Möglichkeit CSS/SVG anstelle von Rasterbildern.
  • Verwenden Sie standardmäßig Bilder, die für Displays mit hoher Pixeldichte optimiert sind.
  • Verwenden Sie PNGs für einfache Zeichnungen und Pixel-Art (z. B. Logos).
  • Verwenden Sie komprimierte JPEGs für Bilder mit vielen Farben (z. B. Fotos).
  • Legen Sie für alle Bildelemente immer explizite Größen fest (mit CSS oder HTML).

Einfache Zeichnungen und Pixel Art

Kleine Bilder können oft ganz vermieden werden, wenn Sie CSS-Funktionen oder SVG verwenden. Für abgerundete Ecken müssen beispielsweise keine Bilder verwendet werden, da die CSS-Eigenschaft border-radius weithin unterstützt wird. Benutzerdefinierte Schriftarten werden ebenfalls weithin unterstützt. Die Verwendung von „Bildtext“ ist daher nicht empfehlenswert.

In einigen Fällen, z. B. bei Logos, ist ein Bild jedoch die einzige Möglichkeit. Dieses Chrome-Logo hat beispielsweise die natürliche Größe 256 x 256. Auf einem Retina-Display sind die Aliasing-Effekte an Diagonalen und Kurven zu sehen, was besonders im Vergleich zu gestochen scharfem Text unschön aussieht:

Chrome 1x
PNG 1x

Natürliche Abmessungen: 256x256px, Asset-Größe: 31 kB, Format: PNG

Überzeugt? Gut. Als Nächstes verwenden wir ein hochauflösendes Bild. Sie könnten versucht sein, Speicherplatz zu sparen, indem Sie Ihr Logo als JPEG speichern. Das ist jedoch keine gute Idee, da das Speichern von Logos und anderen Grafiken in einem verlustbehafteten Format zu Artefakten führt. In diesem Fall habe ich das Problem mit einer sehr hohen Komprimierung übertrieben. Beachten Sie jedoch die Streifen an den Farbverläufen, die Punkte auf weißem Hintergrund und die unübersichtlichen Linien:

Chrome 2x
JPEG 2x

Natürliche Abmessungen: 512x512px, Asset-Größe: 13 kB, Format: JPEG

Bei relativ kleinen Bildern sollten Sie PNGs mit doppelter Größe verwenden. Beachten Sie, dass der Größenunterschied zwischen einer 1x- und einer 2x-PNG-Datei im Allgemeinen relativ groß ist (in diesem Fall 52 KB). Ein Logo ist jedoch das Gesicht Ihrer Website und das Erste, was Ihre Besucher sehen. Wenn Sie im Gegenzug für die Größe zu viel bei der Qualität sparen, ist dies das Letzte, was Ihre Besucher sehen werden.

Hier ist das Chrome-Logo in seiner ganzen Pracht, auf die Hälfte seiner natürlichen Abmessungen für 2-fache Displays:

Chrome 2x
PNG 2x

Natürliche Dimensionen: 512x512px, Asset-Größe: 83 kB, Format: PNG

Das Markup für das obige Rendering lautet wie folgt:

<img src="chrome2x.png" style="width: 256px; height: 256px;"/>

Beachten Sie, dass ich eine Breite und Höhe für das Bild angegeben habe. Das ist erforderlich, da die natürliche Größe des Bildes 512 Pixel beträgt. Sie wirkt sich auch auf die Leistung aus, da die Rendering-Engine die Größe des Elements gut einstuft und nicht allzu viel an der Berechnung arbeiten muss.

Eine mögliche Optimierung besteht darin, die 24-Bit-PNG-Datei auf eine 8-Bit-Palette zu reduzieren. Dies funktioniert bei Bildern in wenigen Farben, einschließlich des Chrome-Logos. Für diese Optimierung können Sie ein Tool wie http://pngquant.org/ verwenden. Hier sind einige Banding-Effekte zu sehen, aber diese Datei ist nur 13 KB groß, was im Vergleich zur ursprünglichen PNG-Datei mit 512 x 512 eine beeindruckende 6-fache Größe bedeutet.

Chrome 2x 8bit
PNG 2x 8 Bit

Natürliche Abmessungen: 512x512px, Asset-Größe: 13 kB, Format: PNG, 8-bit palette

Bilder in verschiedenen Farben

Ich habe einen HTML5Rocks-Artikel mit einer Übersicht über verschiedene Techniken für responsive Bilder geschrieben und einige Recherchen zum Komprimieren von JPEGs mit 1x und 2x durchgeführt und die resultierenden Größen und die visuelle Qualität verglichen. Hier ist eine solche Kachel aus dem obigen Artikel:

Kachel.

Ich habe die Bilder mit ihrer Komprimierungsstufe (angegeben durch die JPEG-Qualität), ihrer Größe (in Byte) und meiner subjektiven Meinung zur visuellen Treue (bewertet durch Zahlen) gekennzeichnet. Interessant ist, dass das stark komprimierte 2-fache Bild (Nummer 3) kleiner und besser aussieht als das nicht komprimierte 1-fache Bild (Nummer 4). Mit anderen Worten: Zwischen den Bildern 4 und 3 haben wir die Bildqualität verbessert, indem wir jede Dimension verdoppelt und die Komprimierung deutlich erhöht haben, während wir gleichzeitig die Größe um 2 kB reduziert haben.

Komprimierung, Abmessungen und visuelle Qualität

Ich wollte mehr über die Vor- und Nachteile von Komprimierungsstufe, Bildabmessungen, Bildqualität und Bildgröße erfahren. Ich habe eine Studie mit der folgenden Hypothese auf Basis der obigen Studie durchgeführt:

Hypothese

Bei ausreichender Komprimierung sieht ein 2-faches Bild bei einer anderen (geringeren) Komprimierung dem gleichen Bild in einfacherer Größe gleich. In diesem Fall ist das stark komprimierte Bild mit doppelter Größe jedoch kleiner als das Bild mit der ursprünglichen Größe.

Prozess

  • Generieren Sie bei einem 2x-Bild das 1x-1.
  • Komprimieren Sie beide Bilder auf verschiedenen Ebenen.
  • Erstellen Sie eine Testseite, auf der beide Bildsätze nebeneinander zu sehen sind.
  • Finden Sie die Stelle in den beiden Sätzen, an der die Bilder übereinstimmen.
  • Beachten Sie die entsprechenden Bildgrößen und Komprimierungsstufen.
  • Testen Sie es sowohl auf einem 1:1- als auch auf einem 2:1-Display.

Ich habe eine App zum Vergleichen von Bildern direkt nebeneinander erstellt, ähnlich wie bei der Vergleichsansicht in Lightroom. Es ist beabsichtigt, ein 1x- und ein 2x-Bild nebeneinander zu zeigen. Sie können aber auch jeden Bereich des Bildes heranzoomen, um mehr Details zu erhalten. Sie können auch zwischen den Formaten JPEG und WebP wählen und die Komprimierungsqualität ändern, um Dateigröße und Bildqualität zu vergleichen. Die Idee ist, die Einstellungen für mehrere Bilder zu optimieren, herauszufinden, welche Kompromisse bei Komprimierungsqualität, Skalierung und Format für Sie akzeptabel sind, und diese Einstellung für alle Bilder zu verwenden.

Screenshot: Vergleich

Das Tool selbst können Sie ausprobieren. Du kannst das Bild heranzoomen, indem du einen Teilbereich zum Heranzoomen auswählst.

Analyse

Die Bildqualität ist ein subjektives Thema. Außerdem bestimmt Ihr Anwendungsfall wahrscheinlich, wo Ihre Prioritäten im Spektrum zwischen visueller Treue und Dateigröße liegen. Außerdem reagieren verschiedene Arten von Bildmerkmalen unterschiedlich auf die Skalierung und Komprimierungsqualität, sodass hier möglicherweise eine Universallösung nicht unbedingt funktioniert. Das Tool soll Ihnen dabei helfen, sich eine Vorstellung davon zu machen, wie die Bildqualität komprimiert, skaliert und formatiert wird.

Beim Ausprobieren des Bildzooms wurde mir schnell klar, dass Erstens bevorzuge ich quality=30 dpr=2x-Bilder gegenüber quality=90 dpr=1x-Bildern, da sie mehr Details enthalten. Auch die Dateigröße dieser Bilder ist vergleichbar. Im Fall des Flugzeugs hat das komprimierte Bild mit doppelter Größe 76 KB, während das nicht komprimierte Bild mit derselben Größe 80 KB hat.

Ausnahmen von dieser Regel sind stark komprimierte Bilder (quality<30) mit Farbverläufen. Hier bestehen in der Regel Farbverbände, die unabhängig von der Bildgröße gleichermaßen schlecht sind. Die Vogel- und Autoproben im Tool sind Beispiele dafür.

WebP-Bilder sehen vor allem bei niedriger Komprimierung viel sauberer aus als JPEG-Bilder. Diese Farb-Streifen scheint ein wesentlich weniger Problem zu sein. Außerdem sind WebP-Bilder viel kompakter.

Einschränkungen und Haftungsausschluss

Die Bilder müssen nicht nur auf Displays mit hoher Pixeldichte gut aussehen, sondern auch auf Bildschirmen mit sehr unterschiedlichen Eigenschaften. In einigen Fällen möchten Sie möglicherweise je nach Größe des Darstellungsbereichs ganz unterschiedliche Bilder ausliefern. Das Porträt von Obama ist beispielsweise für ein Smartphone-Display geeignet, aber der Stand vor ihm und die Flagge hinter ihm und einige andere Elemente passen möglicherweise besser zu einem Laptop-Display.

Ich habe bewusst auf dieses Art Direction-Thema verzichtet, um mich nur auf Bilder mit hohem DPI-Wert zu konzentrieren. Dieses Problem kann durch verschiedene Ansätze gelöst werden: Medienabfragen und Hintergrundbilder, über JavaScript, über einige neue Funktionen wie image-set oder auf dem Server. Weitere Informationen finden Sie unter Hochauflösende Bilder für variable Pixeldichten.

Ich melde mich mit ein paar offenen Fragen ab:

  • Auswirkungen einer hohen Komprimierung auf die Leistung. Welche Nachteile hat das Dekodieren stark komprimierter Bilder?
  • Welche Leistungseinbußen entstehen, wenn die Bildgröße verkleinert werden muss, wenn ein Bild mit zweifachem Zoom auf einem Display mit nur einmal geladen wird?

Zusammenfassend lässt sich sagen, dass Sie statt Rasterbildern CSS und SVG verwenden sollten. Wenn Rasterbilder unbedingt erforderlich sind, verwenden Sie PNGs für Bilder mit begrenzter Palette und vielen Volltonfarben und JPEGs für Bilder mit vielen Farben und Farbverläufen. Das Schöne an diesem Ansatz ist, dass Ihr Markup praktisch unverändert bleibt. Der Webentwickler muss lediglich die doppelten Assets erstellen und die Größe der Bilder im DOM entsprechend anpassen.

Weitere Informationen finden Sie im Artikel von Scott Jehl zu einem ähnlichen Thema. Vielleicht können Ihre Bilder scharf aussehen und Ihre mobile Datennutzung gering sein!