Displays mit hoher Pixeldichte werden schnell zur Norm. Content-Creator müssen sich daran anpassen. Dies ist eine kurze Anleitung zur Bereitstellung qualitativ hochwertiger Bilder im Web ohne Polyfills, JavaScript, CSS-Hacks und Browserfunktionen, die noch nicht ganz 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 die Webentwickler beinhalten. Das Standard-Track-Attribut srcset
<img> ist schwierig zu implementieren, insbesondere aufgrund der Komplexität der zusätzlichen Darstellungsbereich-basierten Auswahl von srcset:
banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x
Auch wenn bei der CSS-Eigenschaft image-set nur devicePixelRatio verwendet wird, um zu entscheiden, welches Bild geladen werden soll, müssen Entwickler dennoch viel zusätzliches Markup für jedes Bild schreiben.
Andere Vorschläge wie das Element <picture> sind noch ausführlicher.
Außerdem sind sie nicht auf Standards ausgelegt, sodass ihre allgegenwärtige Verfügbarkeit sogar noch weiter außerhalb des Attributs srcset liegt. JavaScript und serverseitige Lösungen sind die einzige alternative Alternative, diese Ansätze haben jedoch ihre eigenen Nachteile, die in anderen Artikeln beschrieben werden.
In diesem Artikel werden verschiedene Verwendungsmöglichkeiten von Bildern beschrieben, die häufig im Web zu finden sind. Außerdem werden einfache Lösungen vorgeschlagen, die sowohl für Bildschirme mit hoher Pixeldichte als auch für gewöhnliche Bildschirme geeignet sind. Im Rahmen dieser Erläuterung kann jedes Gerät, auf dem window.devicePixelRatio größer als 1 ist, als hoher DPI betrachtet werden, da dies bedeutet, dass CSS-Pixel nicht mit Gerätepixeln identisch sind und Bilder hochskaliert werden.
Übersicht:
- Verwenden Sie nach Möglichkeit CSS/SVG anstelle von Rasterbildern.
- Verwenden Sie standardmäßig für HD-Displays optimierte Bilder.
- Verwenden Sie PNGs für einfache Zeichnungen und Pixel-Art (z. B. Logos).
- Verwenden Sie komprimierte JPEGs für Bilder in verschiedenen Farben (z. B. Fotos).
- Legen Sie mithilfe von CSS oder HTML immer explizite Größen für alle Bildelemente fest.
Einfache Zeichnungen und Pixel-Art
Kleine Bilder lassen sich häufig ganz vermeiden, indem Sie CSS-Funktionen oder SVG verwenden.
Du musst beispielsweise keine Bilder für abgerundete Ecken verwenden, da die CSS-Eigenschaft border-radius weithin unterstützt wird. Auch benutzerdefinierte Schriftarten werden weithin unterstützt, sodass die Verwendung von „abbildem“ Text nicht empfehlenswert ist.
In einigen Fällen, z. B. bei Logos, ist jedoch möglicherweise ein Bild die einzige Möglichkeit. Dieses Chrome-Logo hat beispielsweise die natürliche Größe 256 x 256. Auf einem Retina-Display sehen Sie Linien-Aliasing an den Diagonalen und Kurven, die grob und schlecht aussehen, insbesondere im Vergleich zu klar gerendertem Text:
Natürliche Dimensionen: 256x256px, Asset-Größe: 31 kB, Format: PNG
Sie sind überzeugt? Gut. Verwenden wir nun ein hochauflösendes Bild. Sie könnten versucht sein, Platz zu sparen, wenn Sie Ihr Logo als JPEG speichern. Dies ist jedoch keine gute Idee, da das Speichern von Logos und anderen Grafiken in einem verlustbehafteten Format zu Artefakten führen kann. In diesem Fall habe ich das Problem mit einer sehr hohen Komprimierung übertrieben, aber bemerken Sie die Streifen bei den Farbverläufen, die Sprenkel auf weißem Hintergrund und die unordentlichen Linien:
Natürliche Dimensionen: 512x512px, Asset-Größe: 13 kB, Format: JPEG
Bei relativ kleinen Bildern sollten Sie zwei PNGs verwenden. Beachten Sie, dass der Größenunterschied zwischen einer 1x- und 2x-PNG im Allgemeinen ziemlich hoch ist (in diesem Fall 52 KB). Bei einem Logo ist es jedoch das Gesicht Ihrer Website und das Erste, was die Besucher sehen. Wenn Sie im Vergleich zur Größe zu viel an Qualität sparen, ist dies auch das Letzte, was Ihre Besucher sehen werden.
Hier ist das Chrome-Logo in seiner vollen Pracht, hier ist es auf die Hälfte seiner natürlichen Abmessungen für 2x-Displays verkleinert:
Natürliche Dimensionen: 512x512px, Asset-Größe: 83 kB, Format: PNG
Das Markup für die Darstellung oben lautet wie folgt:
<img src="chrome2x.png" style="width: 256px; height: 256px;"/>
Beachten Sie, dass ich für das Bild eine Breite und Höhe festgelegt habe. Dies ist erforderlich, da die natürliche Größe des Bildes 512 Pixel beträgt. Sie ist auch gut für die Leistung, da das Rendering-Modul die Größe des Elements genau erfasst hat und nicht allzu hart für die Berechnung arbeiten muss.
Eine mögliche Optimierung, die funktionieren könnte, ist die Reduzierung der 24-Bit-PNG auf eine 8-Bit-Palette. Das funktioniert bei Bildern mit wenigen Farben (einschließlich des Chrome-Logos). Für diese Optimierung können Sie ein Tool wie http://pngquant.org/ verwenden. Hier ist ein wenig Banding zu sehen, aber diese Datei ist nur 13 KB groß, was im Vergleich zur ursprünglichen PNG-Datei mit 512 x 512 eine sage 6-fache Größe bedeutet.
Natürliche Dimensionen: 512x512px, Asset-Größe: 13 kB, Format: PNG,
8-bit palette
Bilder in verschiedenen Farben
Ich habe einen HTML5Rocks-Artikel verfasst, in dem verschiedene responsive Bildtechniken untersucht wurden. Außerdem habe ich mich über die Komprimierung von 1- und 2-facher JPEG-Datei und den Vergleich der resultierenden Größen und der Bildqualität informiert. Hier ist eine solche Kachel aus dem obigen Artikel:
Ich habe die Bilder mit ihren Komprimierungsgraden (angegeben durch die JPEG-Qualität), ihrer Größe (in Byte) und meiner subjektiven Meinung zur vergleichenden visuellen Darstellung (in Zahlen) beschriftet. Interessant ist hier, dass das stark komprimierte 2x-Bild (3) kleiner ist und besser aussieht als das unkomprimierte 1-x-Bild (mit 4 beschriftet). Mit anderen Worten: Zwischen den Bildern 4 und 3 haben wir es geschafft, die Qualität des Bildes zu verbessern, indem wir jede Dimension verdoppelt und die Komprimierung erheblich erhöht haben, während gleichzeitig die Größe um 2 KB reduziert wurde.
Komprimierung, Abmessungen und visuelle Qualität
Ich wollte etwas mehr über die Vor- und Nachteile von Kompressionsstufe, Bildabmessungen, visueller Qualität und Bildgröße erfahren. Ich habe basierend auf der obigen Studie eine Studie mit der folgenden Hypothese durchgeführt:
Hypothese
Bei ausreichender Komprimierung sieht ein 2-faches Bild in einfacher Größe wie dasselbe Bild bei einer anderen (niedrigeren) Komprimierung aus. In diesem Fall ist das stark komprimierte 2‐fache Bild jedoch kleiner als das 1‐x-Bild.
Prozesse
- Bei einem 2x-Bild wird das 1x-Bild generiert.
- Komprimieren Sie beide Bilder auf verschiedenen Ebenen.
- Erstellen Sie eine Testseite, auf der beide Bildsätze nebeneinander angezeigt werden.
- Suchen Sie in den beiden Sets die Stelle, an der die Bilder äquivalent sind.
- Beachten Sie die entsprechenden Bildgrößen und Komprimierungsstufen.
- Probiere es mit einem 1x- und einem 2x-Display aus.
Ich habe eine App zum direkten Vergleich von Bildern erstellt, die der Vergleichsansicht von Lightroom ähnelt. Es ist beabsichtigt, ein 1x- und ein 2x-Bild nebeneinander zu zeigen, aber auch die Möglichkeit zum Heranzoomen eines beliebigen Bildausschnitts zu erhalten, um mehr Details zu erhalten. Sie können auch zwischen den Formaten JPEG und WebP wählen und die Komprimierungsqualität ändern, um Vergleiche der Dateigröße und der Bildqualität zu sehen. Die Idee ist, die Einstellungen für mehrere Bilder anzupassen, herauszufinden, welche Kompressionsqualität, Skalierung und Format im Vergleich zur Bildqualität für Sie geeignet sind, und diese Einstellung für alle Ihre Bilder zu verwenden.
Das Tool selbst ist zum Experimentieren verfügbar. Sie können das Bild heranzoomen, indem Sie einen Teilbereich zum Heranzoomen auswählen.
Analyse
Ich sage zunächst: Die Bildqualität ist subjektiv. Außerdem wird Ihr spezieller Anwendungsfall wahrscheinlich vorgeben, wo Ihre Prioritäten in Bezug auf visuelle Genauigkeit und Dateigröße liegen. Darüber hinaus reagieren verschiedene Arten von Bildmerkmalen unterschiedlich auf Skalierung und Komprimierungsqualität, sodass hier möglicherweise nicht unbedingt eine Universallösung funktioniert. Das Tool soll Ihnen dabei helfen, ein Gefühl für Komprimierungen, Skalierungen und Formate von Bildqualität zu entwickeln.
Beim Zoomen des Bilds
erfasste ich schnell einiges. Erstens: Ich bevorzuge quality=30 dpr=2x Bilder statt quality=90
dpr=1x Bildern, da sie mehr Detailtiefe haben. Auch die Dateigröße dieser Bilder ist vergleichbar (im Fall der Fläche ist das komprimierte 2x-Bild 76 KB, das unkomprimierte 1x-Bild 80 KB).
Ausnahmen von dieser Regel sind stark komprimierte (quality<30) Bilder mit Farbverläufen. Diese leiden meist unter Farbbanding, was unabhängig von der Bildgröße gleichermaßen schlecht ist. Die im Tool gefundenen Vogel- und
Autoproben sind Beispiele dafür.
WebP-Bilder sehen viel sauberer aus als JPEGs, insbesondere bei niedrigen Komprimierungsstufen. Diese Farbbänder sind wesentlich weniger problematisch. Und schließlich sind WebP-Bilder viel kompakter.
Vorbehalte und Flosse
Bilder auf hochauflösenden Displays gut aussehen lassen, ist nur die Hälfte der bildbezogenen Probleme, die durch große Unterschiede bei den Bildschirmen verursacht werden. In manchen Fällen möchten Sie vielleicht völlig unterschiedliche Bilder abhängig von der Größe des Darstellungsbereichs bereitstellen. Obamas Porträtfoto kann beispielsweise für einen Bildschirm in Smartphone-Größe angemessen sein, aber der Stand vor ihm und die Fahne hinter ihm, und einige sind möglicherweise besser für ein Laptop-Display geeignet.
Ich habe das Art Direction-Thema bewusst vermeidet, um mich ausschließlich auf Bilder mit hoher DPI-Rate zu konzentrieren. Dieses Problem kann durch verschiedene Ansätze gelöst werden: Verwendung von Medienabfragen und Hintergrundbildern, über JavaScript, über einige neue Funktionen wie image-set oder auf dem Server. Dieses Thema wird im Dokument High DPI Images for variable Pixel Densities beschrieben.
Ich möchte noch ein paar offene Fragen beantworten:
- Auswirkungen einer hohen Komprimierung auf die Leistung. Welche Strafen gibt es bei der Decodierung stark komprimierter Bilder?
- Welche Leistungseinbußen gibt es, wenn die Größe des Bildes verkleinert wird, wenn ein 2x-Bild auf einem 1x-Display geladen wird?
Sie sollten also CSS und SVG anstelle von Rasterbildern verwenden. Wenn Rasterbilder unbedingt erforderlich sind, verwenden Sie PNGs für Bilder mit einer begrenzten Palette und vielen Volltonfarben und JPEGs für Bilder mit vielen Farben und Farbverläufen. Das Tolle an diesem Ansatz ist, dass Ihr Markup praktisch unverändert ist. Der Webentwickler muss lediglich zwei Assets generieren und die Größe der Bilder im DOM korrekt festlegen.
Weitere Informationen finden Sie in Scott Jehls Artikel zu einem ähnlichen Thema. Möglicherweise sehen Ihre Bilder gestochen scharf aus und die mobile Datennutzung ist gering.