Das richtige Bildformat auswählen

Ilya Grigorik

Jeremy Wagner

Die allererste Frage, die Sie sich stellen sollten, ist, ob ein Bild erforderlich, um den gewünschten Effekt zu erzielen. Wenn Sie eine Bildressource eliminieren können, häufig sehr viele Bytes im Verhältnis zu HTML, CSS, JavaScript und anderen Assets auf der Seite benötigt, ist das immer die beste Optimierungsstrategie. Aber ein gut platziertes Bild kann auch mehr Informationen vermitteln als tausend Worte, also liegt es an Ihnen, diese Balance zu finden.

Als Nächstes sollten Sie überlegen, ob es eine alternative Technologie gibt, mit der Sie bessere Ergebnisse erzielen könnten. aber auf effizientere Weise:

• CSS-Effekte wie Schatten oder Farbverläufe und CSS-Animationen können verwendet werden, um auflösungsunabhängige Assets zu erstellen, die in jeder Auflösung und Zoomstufe immer scharf aussehen. oft bei einem Bruchteil der Byte, die für eine Bilddatei erforderlich sind.
• Webschriftarten ermöglichen schöne Schriftbilder. während Sie weiterhin die Möglichkeit haben, und die Größe des Textes ändern, was die Nutzerfreundlichkeit erheblich verbessert.

Wenn Sie feststellen, dass Text in einem Bild-Asset codiert wird, halten Sie dies auf und überdenken Sie es. Eine gute Typografie ist entscheidend für gutes Design, Branding und Lesbarkeit. Text-in-Images führen jedoch zu einer schlechten Nutzererfahrung: der Text nicht auswählbar, nicht durchsuchbar, nicht zoombar ist, nicht barrierefrei und für Geräte mit hoher Auflösung nicht geeignet. Für die Verwendung von Webschriftarten sind eigene Optimierungen erforderlich. aber er erfüllt all diese Aspekte und ist immer eine bessere Wahl für die Anzeige von Text.

Das richtige Bildformat auswählen

Wenn Sie sicher sind, dass ein Bild die richtige Wahl ist, sollten Sie den passenden Bildtyp für Ihre Aufgabe auswählen.

</ph>

.
• Vektorgrafiken Linien, Punkte und Polygone zur Darstellung eines Bildes verwenden.
• Rastergrafiken Sie stellen ein Bild dar, indem die einzelnen Werte jedes Pixels innerhalb eines rechteckigen Rasters codiert werden.

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

Vektorformate scheitern jedoch, wenn die Szene kompliziert ist (z. B. bei einem Foto): Die Menge an SVG-Markup zur Beschreibung aller Formen kann zu hoch sein. und die Ausgabe sieht möglicherweise trotzdem nicht "fotorealistisch" aus. In diesem Fall sollten Sie ein Rasterbildformat verwenden. wie PNG, JPEG, WebP oder AVIF.

Rasterbilder haben nicht dieselben Eigenschaften wie Auflösung und Zoom. – Wenn Sie ein Rasterbild vergrößern, sehen Sie gezackte und verschwommene Grafiken. Daher müssen Sie möglicherweise mehrere Versionen eines Rasterbilds mit unterschiedlichen Auflösungen speichern. um Ihren Nutzern ein optimales Erlebnis zu bieten.

Auswirkungen von Bildschirmen mit hoher Auflösung

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 das? Je mehr Gerätepixel vorhanden sind, desto detaillierter sind die Inhalte auf dem Bildschirm.

</ph>

Bildschirme mit hohem DPI-Wert (HiDPI) liefern hervorragende Ergebnisse, aber es gibt einen offensichtlichen Kompromiss: Für Bild-Assets sind mehr Details erforderlich, damit die höhere Anzahl von Gerätepixeln genutzt werden kann. Die gute Nachricht ist, dass Vektorbilder für diese Aufgabe ideal geeignet sind. da sie mit jeder Auflösung und gestochen scharfen Ergebnissen gerendert werden können. können höhere Verarbeitungskosten für das Rendern der feineren Details anfallen, aber der zugrunde liegende Vermögenswert ist derselbe und ist unabhängig von der Auflösung.

Rasterbilder stellen hingegen 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 ist die Dateigröße eines Rasterbilds. Beachten Sie den Unterschied zwischen einem Foto-Asset, das mit 100 × 100 Pixeln (CSS) angezeigt wird:

Wenn wir die Auflösung des physischen Bildschirms verdoppeln, die Gesamtzahl der Pixel um den Faktor vier erhöht: die Anzahl der horizontalen Pixel multipliziert mit der doppelten Anzahl der vertikalen Pixel. Daher wird eine „2x“- Bildschirm nicht nur verdoppelt, sondern vervierfacht die Anzahl der erforderlichen Pixel!

Was bedeutet das also in der Praxis? Mit hochauflösenden Bildschirmen können Sie wunderschöne Bilder liefern, die eine großartige Produktfunktion sein können. Für Bildschirme mit hoher Auflösung sind jedoch auch hochauflösende Bilder erforderlich. Deshalb gilt:

• Bevorzugen Sie nach Möglichkeit Vektorbilder, da diese auflösungsunabhängig sind und immer gestochen scharfe Ergebnisse liefern.
• Wenn ein Rasterbild erforderlich ist, können Sie responsive Bilder bereitstellen.

Funktionen verschiedener Rasterbildformate

Neben den verschiedenen verlustbehafteten und verlustfreien Komprimierungsalgorithmen Verschiedene Bildformate unterstützen verschiedene Funktionen, wie z. B. Animations- und Transparenzkanäle (Alpha). Das Ergebnis: Die Wahl des „richtigen Formats“ für ein bestimmtes Bild ist eine Kombination aus entsprechenden visuellen Ergebnissen und funktionalen Anforderungen.

Es gibt zwei allgemein unterstützte Rasterbildformate: PNG und JPEG. Zusätzlich zu diesen Formaten unterstützen moderne Browser die neueren Bildformate WebP und AVIF. Beide 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 sollte 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.

In Bezug auf ältere Bildformate ist Folgendes zu beachten:

1. Benötigen Sie Animationen? Verwende <video>-Elemente.
   • Wie sieht es mit GIFs aus? GIF beschränkt die Farbpalette auf höchstens 256 Farben, und erzeugt deutlich größere Dateien als <video>-Elemente. APNG bietet mehr Farben als GIF, ist aber auch deutlich größer als Videos mit einer einigermaßen gleichwertigen Bildqualität. Weitere Informationen finden Sie unter Animierte GIFs durch Videos ersetzen
2. Müssen feine Details mit höchster Auflösung beibehalten werden? Verwende PNG oder verlustfreies WebP.
   • PNG wendet über die Größe der Farbpalette hinaus keine verlustbehafteten Komprimierungsalgorithmen an. So wird das Bild höchster Qualität erzeugt, Allerdings ist die Dateigröße deutlich höher als bei anderen Formaten. Seien Sie daher vorsichtig.
   • WebP hat einen verlustfreien Codierungsmodus, der möglicherweise effizienter ist als PNG.
   • Wenn das Bild-Asset Bilder aus geometrischen Formen enthält, sollten Sie sie in ein Vektorformat (SVG) konvertieren.
   • Wenn das Bild-Asset Text enthält, halten Sie an und überdenken Sie es noch einmal. Text in Bildern kann nicht ausgewählt, durchsucht oder gezoomt werden. Wenn du einen benutzerdefinierten Look vermitteln möchtest (aus Branding- oder anderen Gründen), verwende stattdessen eine Webschrift.
3. Optimieren Sie ein Foto, einen Screenshot oder ein ähnliches Bild-Asset? Verwende JPEG, verlustbehaftetes WebP oder AVIF.
   • Bei JPEG-Dateien wird eine Kombination aus verlustbehafteter und verlustfreier Optimierung verwendet, um die Dateigröße des Bild-Assets zu reduzieren. Probieren Sie mehrere JPEG-Qualitätsstufen aus, um die beste Qualität bzw. die beste Dateigröße für Ihr Asset zu ermitteln.
   • Das verlustbehaftete WebP oder das verlustbehaftete AVIF sind hervorragende JPEG-Alternativen für Bilder in Webqualität. Beachten Sie jedoch, dass der verlustbehaftete Modus einige Informationen verwirft, um kleinere Bilder zu erhalten. Das bedeutet, dass ausgewählte Farben möglicherweise nicht mit einer entsprechenden JPEG-Datei identisch sind.

Wenn Sie ein WebView zum Rendern von Inhalten in Ihrer plattformspezifischen Anwendung verwenden, haben Sie die volle Kontrolle über den Client und können exklusiv WebP verwenden. Facebook und viele andere nutzen WebP, um alle Bilder in ihren Anwendungen bereitzustellen – die Einsparungen lohnt sich auf jeden Fall.

Auswirkungen auf Largest Contentful Paint (LCP)

Bilder können LCP-Kandidaten sein. Das bedeutet, dass sich die Größe eines Bildes auf seine Ladezeit auswirkt. Wenn ein Bild ein LCP-Kandidat ist, ist eine effiziente Codierung des Bildes entscheidend, um den LCP zu verbessern.

Sie sollten versuchen, die Empfehlungen in diesem Leitfaden so umzusetzen, dass die Wahrnehmung einer Seite für alle Nutzer möglichst schnell ist. Der LCP ist Teil der Wahrnehmungsleistung, da er misst, wie schnell das größte und daher am besten wahrnehmbare Element auf der Seite angezeigt wird.