Das richtige Bildformat auswählen

Ilya Grigorik

Jeremy Wagner

Die erste Frage, die Sie sich stellen sollten, ist, ob ein Bild tatsächlich erforderlich ist, um den gewünschten Effekt zu erzielen. Wenn Sie eine Bildressource entfernen können, die im Vergleich zu HTML, CSS, JavaScript und anderen Assets auf der Seite oft eine große Anzahl von Byte erfordert, ist das immer die beste Optimierungsstrategie. Ein gut platziertes Bild kann jedoch auch mehr Informationen vermitteln als tausend Worte. Es liegt also an Ihnen, das richtige Gleichgewicht zu finden.

Als Nächstes sollten Sie überlegen, ob es eine alternative Technologie gibt, die bessere Ergebnisse liefern könnte, aber effizienter ist:

• Mit CSS-Effekten (z. B. Schatten oder Verläufe) und CSS-Animationen lassen sich geräteunabhängige Assets erstellen, die bei jeder Auflösung und Zoomstufe immer scharf aussehen. Oft ist dafür nur ein Bruchteil der Bytes erforderlich, die für eine Bilddatei benötigt werden.
• Webschriften ermöglichen die Verwendung schöner Schriftarten, während Text weiterhin ausgewählt, durchsucht und in der Größe geändert werden kann. Das ist eine erhebliche Verbesserung der Nutzerfreundlichkeit.

Wenn Sie Text in einem Bild-Asset codieren, sollten Sie das noch einmal überdenken. Eine gute Typografie ist entscheidend für gutes Design, Branding und Lesbarkeit. Text in Bildern ist jedoch nicht nutzerfreundlich: Der Text kann nicht ausgewählt, nicht durchsucht, nicht herangezoomt, nicht barrierefrei und nicht für Geräte mit hoher Auflösung geeignet sein. Die Verwendung von Webschriften erfordert eigene Optimierungen, aber sie behebt alle diese Probleme und ist immer die bessere Wahl für die Darstellung von Text.

Das richtige Bildformat auswählen

Wenn Sie sich sicher sind, dass ein Bild die richtige Option ist, sollten Sie die richtige Art von Bild für den Job sorgfältig auswählen.

• Bei Vektorgrafiken werden Linien, Punkte und Polygone verwendet, um ein Bild darzustellen.
• Rastergrafiken stellen ein Bild dar, indem die einzelnen Werte jedes Pixels in einem rechteckigen Raster codiert werden.

Jedes Format hat Vor- und Nachteile. Vektorformate eignen sich ideal für Bilder, die aus weniger komplexen geometrischen Formen wie Logos, Text oder Symbolen bestehen. Sie liefern scharfe Ergebnisse bei jeder Auflösung und Zoomeinstellung. Das macht sie zu einem idealen Format für hochauflösende Bildschirme und Assets, die in unterschiedlichen Größen angezeigt werden müssen.

Bei komplexen Szenen (z. B. Fotos) stoßen Vektorformate jedoch an ihre Grenzen: Die Menge an SVG-Markup, die zum Beschreiben aller Formen erforderlich ist, kann unerschwinglich hoch sein und die Ausgabe sieht trotzdem nicht „fotorealistisch“ aus. In diesem Fall sollten Sie ein Rasterbildformat wie PNG, JPEG, WebP oder AVIF verwenden.

Rasterbilder sind nicht so vorteilhaft, da sie nicht unabhängig von Auflösung oder Zoom sind. Wenn Sie ein Rasterbild vergrößern, sehen Sie unscharfe und gezackte Grafiken. Daher müssen Sie möglicherweise mehrere Versionen eines Rasterbilds in verschiedenen Auflösungen speichern, um Ihren Nutzern eine optimale Leistung zu bieten.

Auswirkungen von hochauflösenden Bildschirmen

Es gibt zwei verschiedene Arten von Pixeln: CSS-Pixel und Gerätepixel. Ein einzelnes CSS-Pixel kann direkt einem einzelnen Gerätepixel entsprechen oder von mehreren Gerätepixeln unterstützt werden. Was soll das? Je mehr Pixel ein Gerät hat, desto detaillierter sind die angezeigten Inhalte auf dem Bildschirm.

Bildschirme mit hoher Auflösung (HiDPI) liefern hervorragende Ergebnisse, aber es gibt einen offensichtlichen Nachteil: Bild-Assets erfordern mehr Details, um die höhere Pixelanzahl des Geräts zu nutzen. Vectorgrafiken eignen sich hervorragend für diese Aufgabe, da sie mit scharfen Ergebnissen in jeder Auflösung gerendert werden können. Die Verarbeitungskosten für die Darstellung feinerer Details können zwar höher sein, das zugrunde liegende Asset ist jedoch dasselbe und unabhängig von der Auflösung.

Rasterbilder stellen hingegen eine viel größere Herausforderung dar, da sie Bilddaten pro Pixel codieren. Je mehr Pixel ein Bild hat, desto größer ist die Dateigröße. Sehen Sie sich den Unterschied zwischen einem Foto-Asset an, das mit 100 × 100 Pixeln (CSS) angezeigt wird:

Wenn wir die Auflösung des physischen Displays verdoppeln, steigt die Gesamtzahl der Pixel um das Vierfache: Verdoppelung der Anzahl der horizontalen Pixel multipliziert mit der Verdoppelung der Anzahl der vertikalen Pixel. Bei einem „2x“-Bildschirm wird also nicht nur die Anzahl der erforderlichen Pixel verdoppelt, sondern vervierfacht.

Was bedeutet das in der Praxis? Auf hochauflösenden Bildschirmen können Sie schöne Bilder präsentieren, was eine gute Produktfunktion sein kann. Für hochauflösende Bildschirme sind jedoch auch hochauflösende Bilder erforderlich. Daher gilt:

• Verwenden Sie nach Möglichkeit Vektorbilder, da sie unabhängig von der Auflösung sind und immer scharfe Ergebnisse liefern.
• Wenn ein Rasterbild erforderlich ist, stellen Sie responsive Bilder bereit.

Funktionen verschiedener Rasterbildformate

Neben verschiedenen verlustbehafteten und verlustfreien Komprimierungsalgorithmen unterstützen verschiedene Bildformate unterschiedliche Funktionen wie Animations- und Transparenzkanäle (Alpha). Daher ist die Auswahl des „richtigen Formats“ für ein bestimmtes Bild eine Kombination aus den entsprechenden visuellen Ergebnissen und funktionalen Anforderungen.

Es gibt zwei allgemein unterstützte Rasterbildformate: PNG und JPEG. Neben diesen Formaten unterstützen moderne Browser auch die neueren Bildformate WebP und AVIF. Beide neueren Formate bieten eine bessere Gesamtkomprimierung und mehr Funktionen. Welches Format sollten Sie also verwenden?

WebP und AVIF bieten in der Regel eine bessere Komprimierung als ältere Formate und sollten nach Möglichkeit verwendet werden. Sie können WebP- oder AVIF-Bilder zusammen mit einem JPEG- oder PNG-Bild als Fallback verwenden. Weitere Informationen finden Sie unter WebP-Bilder verwenden.

Bei älteren Bildformaten gilt Folgendes:

1. Brauchen Sie Animationen? Verwenden Sie <video>-Elemente.
   • Was ist mit GIF? Bei GIF ist die Farbpalette auf maximal 256 Farben beschränkt und die Dateigröße ist deutlich größer als bei <video>-Elementen. APNG bietet mehr Farben als GIF, ist aber auch deutlich größer als Videoformate mit einer in etwa vergleichbaren visuellen Qualität. Weitere Informationen finden Sie unter Animierte GIFs durch Videos ersetzen.
2. Müssen feine Details mit der höchsten Auflösung erhalten bleiben? Verwenden Sie PNG oder verlustfreie WebP-Dateien.
   • Außer der Auswahl der Größe der Farbpalette werden bei PNG keine verlustbehafteten Komprimierungsalgorithmen angewendet. Dadurch wird die höchste Bildqualität erzielt, allerdings mit einer deutlich höheren Dateigröße als bei anderen Formaten. Verwenden Sie die Funktion mit Bedacht.
   • WebP hat einen verlustfreien Codierungsmodus, der möglicherweise effizienter ist als PNG.
   • Wenn das Bild-Asset Bilder mit geometrischen Formen enthält, sollten Sie es in ein Vektorformat (SVG) konvertieren.
   • Wenn das Bild-Asset Text enthält, sollten Sie es nicht verwenden. Text in Bildern kann nicht ausgewählt, nicht durchsucht und nicht herangezoomt werden. Wenn Sie einen benutzerdefinierten Look (aus Branding- oder anderen Gründen) vermitteln möchten, verwenden Sie stattdessen eine Webschriftart.
3. Optimieren Sie ein Foto, einen Screenshot oder ein ähnliches Bild-Asset? Verwenden Sie JPEG, verlustbehaftetes WebP oder AVIF.
   • Beim JPEG-Format wird eine Kombination aus verlustbehafteter und verlustfreier Optimierung verwendet, um die Dateigröße des Bild-Assets zu reduzieren. Probieren Sie verschiedene JPEG-Qualitätsstufen aus, um die beste Qualität im Verhältnis zur Dateigröße für Ihr Asset zu finden.
   • Verlustbehaftetes WebP oder AVIF sind gute JPEG-Alternativen für Bilder in Webqualität. Beachten Sie jedoch, dass im verlustbehafteten Modus einige Informationen verworfen werden, um kleinere Bilder zu erhalten. Das bedeutet, dass ausgewählte Farben möglicherweise nicht mit denen eines entsprechenden JPEG-Bilds übereinstimmen.

Wenn Sie Inhalte in Ihrer plattformspezifischen Anwendung mit WebView rendern, haben Sie die volle Kontrolle über den Client und können WebP ausschließlich verwenden. Facebook und viele andere nutzen WebP, um alle Bilder in ihren Anwendungen bereitzustellen. Die Einsparungen sind definitiv die Mühe wert.

Auswirkungen auf Largest Contentful Paint (LCP)

Die Bilder können LCP-Kandidaten sein. Die Größe eines Bildes wirkt sich also auf die Ladezeit aus. Wenn ein Bild ein LCP-Kandidat ist, ist eine effiziente Codierung dieses Bilds entscheidend, um den LCP zu verbessern.

Sie sollten sich bemühen, die in diesem Leitfaden enthaltenen Ratschläge anzuwenden, damit die wahrgenommene Leistung einer Seite für alle Nutzer so schnell wie möglich ist. LCP ist Teil der wahrgenommenen Leistung, da damit gemessen wird, wie schnell das größte (und daher am besten wahrnehmbare) Element auf der Seite angezeigt wird.