Die allererste Frage, die Sie sich stellen sollten, ist, ob ein Bild erforderlich, um den gewünschten Effekt zu erzielen. Gutes Design ist einfach und liefert immer die beste Leistung. 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, und es liegt an Ihnen, diese Balance zu finden.
Als Nächstes sollten Sie überlegen, ob es eine alternative Technologie gibt, die die gewünschten Ergebnisse liefern könnte. 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 type="x-smartling-placeholder">
- 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 einfachen 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 type="x-smartling-placeholder">
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 auch die Dateigröße eines Rasterbilds. Sehen wir uns als Beispiel den Unterschied zwischen einem Foto-Asset an, das mit 100 × 100 Pixeln (CSS) angezeigt wird:
| Bildschirmauflösung | Pixel insgesamt | Nicht komprimierte 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-fach | 100 x 100 x 9 = 90.000 | 360.000 Byte |
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). Daher ist die Wahl des „richtigen Formats“ für ein bestimmtes Bild ist eine Kombination aus gewünschten visuellen Ergebnissen und funktionalen Anforderungen.
| Format | Transparenz | Animation | Browser |
|---|---|---|---|
| PNG | Ja | Nein | Alle |
| JPEG | Nein | Nein | Alle |
| WebP | Ja | Ja | Alle modernen Browser Weitere Informationen finden Sie im Hilfeartikel Kann ich verwenden? |
| AVIF | Ja | Ja | Nein. Weitere Informationen finden Sie im Abschnitt Kann ich verwenden? |
Es gibt zwei allgemein unterstützte Rasterbildformate: PNG und JPEG. Zusätzlich zu diesen Formaten unterstützen moderne Browser das neuere Format WebP, während nur einige das neuere AVIF-Format unterstützen. 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:
- Benötigen Sie Animationen? Verwende
<video>-Elemente.- Was ist mit GIFs? GIF beschränkt die Farbpalette auf
höchstens 256 Farben,
und erzeugt deutlich größere Dateien als
<video>-Elemente. Weitere Informationen finden Sie unter Animierte GIFs durch Videos ersetzen
- Was ist mit GIFs? GIF beschränkt die Farbpalette auf
höchstens 256 Farben,
und erzeugt deutlich größere Dateien als
- 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 auf Kosten einer erheblich höheren Dateigröße als bei anderen Formaten. Seien Sie daher vorsichtig.
- WebP hat einen verlustfreien Codierungsmodus, der möglicherweise effizienter als PNG ist.
- 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 Sie ein benutzerdefiniertes Design vermitteln müssen (aus Branding- oder anderen Gründen), verwenden Sie stattdessen eine Webschrift.
- Optimieren Sie ein Foto, einen Screenshot oder ein ähnliches Bild-Asset? Verwende JPEG, verlustbehaftetes WebP oder verlustbehaftetes AVIF.
- Bei JPEG 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.
- Verlustbehaftetes WebP oder verlustbehaftetes AVIF sind akzeptable JPEG-Alternativen. Beachten Sie jedoch, dass insbesondere der verlustbehaftete Modus von WebP einige Farbinformationen 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 Artikel so umzusetzen, dass die Wahrnehmung einer Seite für alle Nutzer möglichst schnell ist. LCP ist Teil der Wahrnehmungsleistung, da es misst, wie schnell das größte und daher am besten wahrnehmbare Element auf der Seite angezeigt wird.