Die erste Frage, die Sie sich stellen sollten, ist, ob ein Bild tatsächlich erforderlich ist, um den gewünschten Effekt zu erzielen. Gutes Design ist einfach und sorgt immer für die beste Leistung. Wenn Sie eine Bildressource entfernen können, die im Verhältnis zu HTML-, CSS-, JavaScript- und anderen Assets auf der Seite häufig eine große Anzahl von Byte erfordert, ist dies immer die beste Optimierungsstrategie. Allerdings kann ein gut platziertes Bild auch mehr Informationen als tausend Worte vermitteln. Es liegt also an Ihnen, dieses Gleichgewicht zu finden.
Als Nächstes sollten Sie überlegen, ob es eine alternative Technologie gibt, mit der die gewünschten Ergebnisse, jedoch auf effizientere Weise erzielt werden können:
- Mit CSS-Effekten (z. B. Schatten oder Farbverläufen) und CSS-Animationen lassen sich auflösungsunabhängige Assets erstellen, die bei jeder Auflösung und Zoomstufe immer scharf aussehen – oft bei einem Bruchteil der Bytes, die für eine Bilddatei erforderlich sind.
- Mit Web Fonts können ansprechende Schriftarten verwendet werden, ohne dass Text ausgewählt, gesucht und in der Größe geändert werden kann – eine deutliche Verbesserung der Nutzerfreundlichkeit.
Wenn Sie jemals Text in einem Bild-Asset codieren müssen, halten Sie auf und überdenken Sie es. Eine gute Typografie ist entscheidend für gutes Design, Branding und Lesbarkeit. Text-in-Bilder bieten jedoch eine schlechte Nutzererfahrung: Der Text ist nicht auswählbar, nicht suchbar, nicht zoombar, nicht barrierefrei und nicht für Geräte mit hohem DPI geeignet. Die Verwendung von Webschriftarten erfordert eigene Optimierungen, die jedoch all diese Probleme berücksichtigen und immer eine bessere Wahl für die Anzeige von Text ist.
Das richtige Bildformat auswählen
Wenn Sie sicher sind, dass ein Image die richtige Option ist, sollten Sie sorgfältig die richtige Art von Image für den Job auswählen.
- In Vektorgrafiken werden Bilder mithilfe von Linien, Punkten und Polygonen dargestellt.
- Rastergrafiken stellen ein Bild dar, indem die einzelnen Werte jedes Pixels innerhalb eines rechteckigen Rasters codiert werden.
Jedes Format hat seine Vor- und Nachteile. Vektorformate eignen sich ideal für Bilder, die aus einfachen geometrischen Formen wie Logos, Text oder Symbolen bestehen. Sie liefern gestochen scharfe Ergebnisse bei jeder Auflösung und Zoomeinstellung. Das macht sie zum idealen Format für hochauflösende Bildschirme und Assets, die in unterschiedlichen Größen angezeigt werden müssen.
Bei einer komplizierten Szene (z. B. bei einem Foto) kommen Vektorformate jedoch nicht immer zu komplex. Die Menge an SVG-Markup zur Beschreibung aller Formen kann viel zu hoch sein und die Ausgabe kann trotzdem nicht „fotorealistisch“ aussehen. In diesem Fall sollten Sie ein Rasterbildformat wie PNG, JPEG, WebP oder AVIF verwenden.
Rasterbilder haben nicht die gleichen Eigenschaften, die eine unabhängige Auflösung oder Zoomstufe haben – wenn Sie ein Rasterbild vergrößern, sehen Sie gezackte und verschwommene Grafiken. Daher müssen Sie möglicherweise mehrere Versionen eines Rasterbildes in verschiedenen Auflösungen speichern, um eine optimale Nutzererfahrung 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 gestützt werden. Was bringt es? Je mehr Gerätepixel es gibt, desto feiner werden die angezeigten Inhalte auf dem Bildschirm.
Bildschirme mit HiDPI-Werten (High DPI) liefern wunderschöne Ergebnisse, aber es gibt einen offensichtlichen Kompromiss: Bild-Assets erfordern mehr Details, um die höhere Pixelanzahl des Geräts nutzen zu können. Die gute Nachricht ist, dass Vektorbilder ideal für diese Aufgabe geeignet sind, da sie in jeder Auflösung mit gestochen scharfen Ergebnissen gerendert werden können. Für das Rendern der feineren Details können höhere Verarbeitungskosten anfallen, aber das zugrunde liegende Asset ist identisch und auflösungsunabhängig.
Auf der anderen Seite stellen Rasterbilder eine viel größere Herausforderung dar, da sie Bilddaten auf Pixel-Basis codieren. Daher gilt: je größer die Anzahl der Pixel, desto größer die Dateigröße eines Rasterbildes. Sehen wir uns als Beispiel den Unterschied zwischen einem Foto-Asset an, das mit 100 x 100 (CSS)-Pixeln angezeigt wird:
| Bildschirmauflösung | Pixel insgesamt | Unkomprimierte Dateigröße (4 Byte pro Pixel) |
|---|---|---|
| 1x | 100 x 100 = 10.000 | 40.000 Byte |
| 2x | 100 x 100 x 4 = 40.000 | 160.000 Byte |
| 3-Fache | 100 x 100 x 9 = 90.000 | 360.000 Byte |
Wenn wir die Auflösung des physischen Bildschirms verdoppeln, erhöht sich die Gesamtzahl der Pixel um den Faktor 4: doppelt so viele horizontale Pixel: doppelt so viele vertikale Pixel. Ein „2x“-Bildschirm verdoppelt sich also nicht einfach nur, sondern vervierfacht die Anzahl der erforderlichen Pixel!
Was bedeutet das also in der Praxis? Mit hochauflösenden Bildschirmen können Sie wunderschöne Bilder präsentieren, was eine großartige Produktfunktion sein kann. Bildschirme mit hoher Auflösung erfordern jedoch auch hochauflösende Bilder. Daher gilt Folgendes:
- Bevorzugen Sie nach Möglichkeit Vektorbilder, da diese unabhängig von der Auflösung sind und immer gestochen scharfe Ergebnisse liefern.
- Falls ein Rasterbild erforderlich ist, werden responsive Bilder bereitgestellt.
Merkmale verschiedener Rasterbildformate
Zusätzlich zu unterschiedlichen verlustbehafteten und verlustfreien Komprimierungsalgorithmen unterstützen verschiedene Bildformate unterschiedliche Funktionen wie Animations- und Transparenzkanäle (Alpha). Die Wahl des richtigen Formats für ein bestimmtes Bild ist daher eine Kombination aus den gewünschten visuellen Ergebnissen und Funktionsanforderungen.
| Format | Transparenz | Animation | Browser |
|---|---|---|---|
| PNG | Ja | Nein | Alle |
| JPEG | Nein | Nein | Alle |
| WebP | Ja | Ja | Alle modernen Browser. Weitere Informationen finden Sie unter Kann ich die App verwenden? |
| AVIF | Ja | Ja | Nein. Weitere Informationen unter Kann ich verwenden? |
Es gibt zwei allgemein unterstützte Rasterbildformate: PNG und JPEG. Neben diesen Formaten unterstützen moderne Browser das neuere Format WebP, während nur einige das neuere AVIF-Format unterstützen. Die beiden neueren Formate bieten insgesamt eine bessere Komprimierung und mehr Funktionen. Welches Format sollten Sie 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.
Beachten Sie bei älteren Bildformaten Folgendes:
- Benötigen Sie Animationen? Verwende
<video>-Elemente.- Was ist mit GIFs? GIF beschränkt die Farbpalette auf maximal 256 Farben und erstellt deutlich größere Dateigrößen als
<video>-Elemente. Weitere Informationen findest du unter Animierte GIFs durch Video ersetzen.
- Was ist mit GIFs? GIF beschränkt die Farbpalette auf maximal 256 Farben und erstellt deutlich größere Dateigrößen als
- Müssen kleine Details in höchster Auflösung beibehalten werden? Verwende PNG oder verlustfreies WebP.
- PNG wendet keine verlustbehafteten Komprimierungsalgorithmen an, die über die Größe der Farbpalette hinausgehen. Dadurch wird das Bild mit der höchsten Qualität erzeugt, allerdings mit einer erheblich höheren Dateigröße als bei anderen Formaten. Mit Bedacht verwenden:
- WebP verfügt über einen verlustfreien Codierungsmodus, der möglicherweise effizienter als PNG ist.
- Wenn das Bild-Asset Bilder aus geometrischen Formen enthält, sollten Sie es in ein Vektorformat (SVG) konvertieren.
- Wenn das Bild-Asset Text enthält, beenden Sie den Vorgang und versuchen Sie es noch einmal. Text in Bildern kann nicht ausgewählt, gesucht oder gezoomt werden. Wenn Sie aus Branding- oder anderen Gründen einen benutzerdefinierten Look vermitteln möchten, verwenden Sie stattdessen eine Webschriftart.
- Optimieren Sie ein Foto, einen Screenshot oder ein ähnliches Bild-Asset? Verwenden Sie JPEG, verlustbehaftetes WebP oder verlustbehaftetes AVIF.
- JPEG verwendet eine Kombination aus verlustbehafteter und verlustfreier Optimierung, um die Dateigröße des Bild-Assets zu reduzieren. Probieren Sie verschiedene JPEG-Qualitätsstufen aus, um den besten Kompromiss hinsichtlich Qualität und Dateigröße für Ihr Asset zu finden.
- Verlustbehaftetes WebP oder verlustbehaftetes AVIF kann akzeptable JPEG-Alternativen sein, beachten Sie jedoch, dass der verlustbehaftete Modus von WebP insbesondere einige Chromainformationen verwirft, um kleinere Bilder zu erhalten. Das bedeutet, dass die ausgewählten Farben möglicherweise von einer entsprechenden JPEG-Datei abweichen.
Wenn Sie Inhalte mit WebView in Ihrer plattformspezifischen Anwendung rendern, haben Sie die volle Kontrolle über den Client und können ausschließlich WebP verwenden. Facebook und viele andere verwenden WebP, um alle ihre Bilder innerhalb ihrer Anwendungen bereitzustellen – die Einsparungen sind definitiv wert.
Auswirkungen auf Largest Contentful Paint (LCP)
Bilder können LCP-Kandidaten sein. Daher wirkt sich die Größe eines Bildes auf die Ladezeit aus. Wenn ein Bild ein LCP-Kandidaten ist, ist die effiziente Codierung dieses Bildes von entscheidender Bedeutung für die Verbesserung des LCP.
Wenden Sie die Tipps in diesem Artikel an, damit die Wahrnehmungsleistung einer Seite für alle Nutzer so schnell wie möglich ist. Der LCP ist ein Teil der Wahrnehmungsleistung, da er misst, wie schnell das größte (und somit am wahrnehmbarsten) Element auf der Seite angezeigt wird.