Bilder machen oft den Großteil der heruntergeladenen Bytes auf einer Webseite aus und nehmen häufig viel Platz ein. Die Bildoptimierung führt häufig zu den größten Byteeinsparungen und Leistungsverbesserungen für Ihre Website: Je weniger Bytes der Browser herunterladen muss, desto geringer ist der Wettbewerb um die Bandbreite des Clients und desto schneller kann der Browser nützliche Inhalte auf dem Bildschirm herunterladen und rendern.
Die Bildoptimierung ist sowohl eine Kunst als auch eine Wissenschaft: eine Kunst, weil es keine definitive Antwort darauf gibt, wie ein einzelnes Bild am besten komprimiert wird, und eine Wissenschaft, weil es viele gut entwickelte Techniken und Algorithmen gibt, mit denen die Größe eines Bildes erheblich reduziert werden kann. Um die optimalen Einstellungen für Ihr Bild zu finden, müssen Sie eine sorgfältige Analyse anhand vieler verschiedener Aspekte vornehmen: Formatfunktionen, Inhalt codierter Daten, Qualität, Pixelabmessungen und mehr.
Vektorbilder optimieren
Alle modernen Browser unterstützen Scaling Vector Graphics (SVG), ein XML-basiertes Bildformat für zweidimensionale Grafiken. Du kannst das SVG-Markup direkt auf der Seite oder als externe Ressource einbetten. Die meisten vektorbasierten Zeichensoftware können SVG-Dateien erstellen oder Sie können sie manuell direkt in Ihren bevorzugten Texteditor schreiben.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 612 792" xml:space="preserve">
<g id="XMLID_1_">
<g>
<circle fill="red" stroke="black" stroke-width="2" stroke-miterlimit="10" cx="50" cy="50" r="40"/>
</g>
</g>
</svg>
Im obigen Beispiel wird die unten stehende einfache Kreisform mit schwarzem Umriss und rotem Hintergrund gerendert und aus Adobe Illustrator exportiert.
<?xml version="1.0"coding="utf-8"?>
Wie Sie sehen, enthält es viele Metadaten wie Ebeneninformationen, Kommentare und XML-Namespaces, die häufig nicht erforderlich sind, um das Asset im Browser zu rendern. Daher ist es immer eine gute Idee, Ihre SVG-Dateien mit einem Tool wie SVGO zu komprimieren.
In diesem Fall reduziert SVGO die Größe der oben von Illustrator generierten SVG-Datei um 58 % und reduziert sie von 470 auf 199 Byte.
<svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 792"><circle fill="red" stroke="#000" stroke-width="2" stroke-miterlimit="10" cx="50" cy="50" r="40"/></svg>
Da es sich bei SVG um ein XML-basiertes Format handelt, können Sie auch eine GZIP-Komprimierung anwenden, um die Übertragungsgröße zu reduzieren. Achten Sie darauf, dass Ihr Server für die Komprimierung von SVG-Assets konfiguriert ist.
Ein Rasterbild ist einfach ein zweidimensionales Raster einzelner „Pixel“. Ein Bild mit 100 × 100 Pixeln ist zum Beispiel eine Folge von 10.000 Pixeln. Jedes Pixel speichert wiederum die "RGBA"-Werte: (R) roter Kanal, (G) grüner Kanal, (B) blauer Kanal und (A) Alpha-Kanal (Transparenz).
Intern ordnet der Browser jedem Kanal 256 Werte (Schattierungen) zu, was 8 Bit pro Kanal (2 ^ 8 = 256) und 4 Byte pro Pixel (4 Kanäle x 8 Bit = 32 Bit = 4 Byte) entspricht. Wenn wir also die Abmessungen des Rasters kennen, können wir die Dateigröße einfach berechnen:
- Ein Bild mit 100 x 100 Pixeln besteht aus 10.000 Pixeln.
- 10.000 Pixel x 4 Byte = 40.000 Byte
- 40.000 Byte / 1.024 = 39 KB
| Abmessungen | Pixelraster | Dateigröße |
|---|---|---|
| 100 × 100 | 10.000 | 39 KB |
| 200 x 200 | 40.000 | 156 KB |
| 300 x 300 | 90.000 | 351 KB |
| 500 × 500 | 250.000 | 977 KB |
| 800 x 800 | 640.000 | 2.500 KB |
39 KB für ein Bild mit 100 x 100 Pixeln erscheinen nicht wie eine große Sache, aber die Dateigröße bei größeren Bildern explodiert schnell, was den Download der Bild-Assets sowohl langsam als auch kostspielig macht. Bisher ging es in diesem Beitrag nur um das „unkomprimierte“ Bildformat. Glücklicherweise gibt es noch viele weitere Möglichkeiten, die Bilddateigröße zu reduzieren.
Eine einfache Strategie besteht darin, die "Bittiefe" des Bildes von 8 Bit pro Kanal auf eine kleinere Farbpalette zu reduzieren: 8 Bit pro Kanal ergeben 256 Werte pro Kanal und insgesamt 16.777.216 (256 ^ 3) Farben. Was, wenn Sie die Palette auf 256 Farben reduzieren? Dann benötigen Sie für die RGB-Kanäle insgesamt nur 8 Bits und sparen sofort zwei Byte pro Pixel – das sind 50% Komprimierung im Vergleich zu den ursprünglichen 4 Byte pro Pixelformat.
Komplexe Szenen mit graduellen Farbübergängen (z. B. Farbverläufe oder Himmel) erfordern größere Farbpaletten, um visuelle Artefakte wie den verpixelten Himmel im 5-Bit-Asset zu vermeiden. Wenn das Bild andererseits nur wenige Farben verwendet, verschwendet eine große Palette einfach kostbare Teile!
Sobald Sie die in einzelnen Pixeln gespeicherten Daten optimiert haben, können Sie auch intelligentere Pixel betrachten: Es scheint, dass viele Bilder und insbesondere Fotos viele nahe gelegene Pixel mit ähnlichen Farben haben, zum Beispiel den Himmel, sich wiederholende Texturen usw. Mit diesen Informationen kann die Komprimierungsfunktion zu Ihrem Vorteil die Delta-Codierung anwenden. Anstatt die einzelnen Werte für jedes Pixel zu speichern, können Sie die Differenz zwischen benachbarten Pixeln speichern: Wenn die benachbarten Pixel gleich sind, ist das Delta "Null" und Sie müssen nur ein einzelnes Bit speichern. Aber warum aufhören?
Das menschliche Auge hat eine unterschiedliche Empfindlichkeit gegenüber verschiedenen Farben: Sie können Ihre Farbcodierung entsprechend optimieren, indem Sie die Palette für diese Farben verkleinern oder vergrößern. Pixel vom Typ „Nearby“ bilden ein zweidimensionales Raster. Dies bedeutet, dass jedes Pixel mehrere Nachbarn hat. Sie können diesen Umstand nutzen, um die Deltacodierung weiter zu verbessern. Anstatt nur die unmittelbaren Nachbarn jedes Pixels zu betrachten, können Sie sich größere Blöcke mit nahe gelegenen Pixeln ansehen und verschiedene Blöcke mit unterschiedlichen Einstellungen codieren.
Wie Sie sehen, wird die Bildoptimierung schnell kompliziert (oder macht je nach Ihrer Perspektive Spaß) und ist ein aktives Gebiet der akademischen und kommerziellen Forschung. Bilder belegen viele Bytes und es ist sehr wichtig, bessere Bildkomprimierungstechniken zu entwickeln. Weitere Informationen finden Sie auf der Wikipedia-Seite oder im Whitepaper zu den WebP-Komprimierungstechniken.
Wie gesagt: Das ist alles toll, aber auch sehr wissenschaftlich: Wie hilft es Ihnen, die Bilder auf Ihrer Website zu optimieren? Nun, es ist wichtig, die Form des Problems zu kennen: RGBA-Pixel, Bittiefe und verschiedene Optimierungstechniken. Sie sollten alle diese Konzepte unbedingt verstehen und berücksichtigen, bevor Sie sich mit den Diskussionen über die verschiedenen Rasterbildformate befassen.
Verlustfreie und verlustbehaftete Bildkomprimierung
Bei bestimmten Datentypen wie dem Quellcode für eine Seite oder einer ausführbaren Datei ist es wichtig, dass die ursprünglichen Informationen durch ein Komprimierungsprogramm weder geändert noch verloren gehen: Ein einzelnes fehlendes oder falsches Datenelement kann die Bedeutung des Dateiinhalts komplett ändern oder, schlimmer noch, gänzlich zerstören. Bei einigen anderen Datentypen, z. B. Bildern, Audio und Video, kann eine "ungefähre" Darstellung der Originaldaten vollkommen akzeptabel sein.
Aufgrund der Funktionsweise des Auges reicht es oft aus, einige Informationen über jedes Pixel zu verwerfen, um die Dateigröße eines Bildes zu verringern. Zum Beispiel haben unsere Augen eine unterschiedliche Empfindlichkeit gegenüber verschiedenen Farben, was bedeutet, dass wir weniger Bits zum Codieren einiger Farben verwenden können. Daher besteht eine typische Bildoptimierungspipeline aus zwei übergeordneten Schritten:
- Das Bild wird mit einem verlustbehafteten Filter verarbeitet, der einige Pixeldaten eliminiert.
- Das Bild wird mit einem verlustfreien Filter verarbeitet, der die Pixeldaten komprimiert.
Der erste Schritt ist optional und der genaue Algorithmus hängt vom jeweiligen Bildformat ab. Beachten Sie jedoch, dass jedes Bild einem verlustbehafteten Komprimierungsschritt zur Reduzierung seiner Größe unterzogen werden kann. Der Unterschied zwischen verschiedenen Bildformaten wie GIF, PNG, JPEG und anderen besteht in der Kombination der spezifischen Algorithmen, die sie verwenden (oder auslassen), wenn sie die verlustbehafteten und verlustfreien Schritte anwenden.
Was ist also die „optimale“ Konfiguration einer verlustbehafteten und verlustfreien Optimierung? Die Antwort hängt von den Bildinhalten und Ihren eigenen Kriterien ab, z. B. dem Kompromiss zwischen Dateigröße und Artefakten, die durch die verlustbehaftete Komprimierung entstehen: In einigen Fällen können Sie auf die verlustbehaftete Optimierung verzichten, um komplexe Details in voller Genauigkeit zu vermitteln. In anderen Fällen können Sie eine aggressive, verlustbehaftete Optimierung anwenden, um die Dateigröße des Bild-Assets zu reduzieren. Hier müssen Ihr eigenes Urteilsvermögen und Ihr Kontext ins Spiel kommen – es gibt kein universelles Szenario.
Bei der Verwendung eines verlustbehafteten Formats wie JPEG bietet die Komprimierung beispielsweise in der Regel eine anpassbare Einstellung für die Qualität (z. B. den Qualitätsregler der Funktion „Für das Web speichern“ in Adobe Photoshop), der normalerweise eine Zahl zwischen 1 und 100 ist und die interne Funktionsweise der speziellen Sammlung verlustbehafteter und verlustfreier Algorithmen steuert. Um optimale Ergebnisse zu erzielen, experimentieren Sie mit verschiedenen Qualitätseinstellungen für Ihre Bilder und scheuen Sie sich nicht, die Qualität zu verringern. Die visuellen Ergebnisse sind oft sehr gut und die Dateigrößeneinsparungen können sehr groß sein.
Auswirkungen der Bildkomprimierung auf Core Web Vitals
Da Bilder häufig für den Largest Contentful Paint infrage kommen, kann eine kürzere Ressourcenladedauer eines Bildes zu einem besseren LCP sowohl im Lab als auch im Feld führen.
Wenn Sie mit den Komprimierungseinstellungen von Rasterbildformaten spielen, experimentieren Sie mit WebP- und AVIF-Formaten, um zu sehen, ob Sie dasselbe Bild bei geringem Platzbedarf im Vergleich zu älteren Formaten liefern können.
Rasterbilder sollten jedoch nicht zu stark komprimiert werden. Eine gute Lösung ist ein CDN zur Bildoptimierung, um die besten Komprimierungseinstellungen für Sie zu finden. Alternativ können Sie aber auch Tools wie Butteraugli verwenden, um visuelle Unterschiede zu schätzen, damit Sie Bilder nicht zu stark aggressiv codieren und dadurch zu viel Qualität verlieren.
Checkliste für die Bildoptimierung
Beachten Sie bei der Optimierung Ihrer Bilder die folgenden Tipps und Techniken:
- Bevorzugen Sie Vektorformate: Vektorbilder sind unabhängig von der Auflösung und Größe und eignen sich daher perfekt für Geräte aller Art und hohe Auflösungen.
- Reduzieren und komprimieren Sie SVG-Assets:Das XML-Markup, das von den meisten Zeichenanwendungen erstellt wird, enthält häufig unnötige Metadaten, die entfernt werden können. Achten Sie darauf, dass Ihre Server für die Anwendung der GZIP-Komprimierung für SVG-Assets konfiguriert sind.
- WebP oder AVIF gegenüber älteren Rasterformaten bevorzugen: WebP und AVIF-Bilder sind normalerweise deutlich kleiner als ältere Bildformate.
- Das beste Rasterbildformat auswählen:Ermitteln Sie Ihre funktionalen Anforderungen und wählen Sie das Bild aus, das am besten zu jedem Asset passt.
- Experimentieren Sie mit optimalen Qualitätseinstellungen für Rasterformate:Scheuen Sie sich nicht, die "Qualitätseinstellungen" herabzustufen. Die Ergebnisse sind oft sehr gut und die Byteeinsparungen sind beträchtlich.
- Entfernen Sie unnötige Bildmetadaten: Viele Rasterbilder enthalten unnötige Metadaten zum Asset, z. B. geografische Informationen, Kamerainformationen usw. Entfernen Sie diese Daten mit geeigneten Tools.
- Skalierte Bilder bereitstellen: Passen Sie die Größe von Bildern an und achten Sie darauf, dass die angezeigte Größe so nah wie möglich an der tatsächlichen Größe des Bildes liegt. Achten Sie besonders auf große Bilder, da diese bei Größenanpassung den größten Mehraufwand verursachen.
- Automatisieren, automatisieren, automatisieren:Investieren Sie in automatisierte Tools und Infrastruktur, damit alle Ihre Bild-Assets immer optimiert sind.