Bilder machen oft den Großteil der heruntergeladenen Bytes auf einer Webseite aus und belegen häufig auch einen erheblichen visuellen Bereich. Die Optimierung von Bildern kann daher oft zu den größten Byteeinsparungen und Leistungsverbesserungen für Ihre Website führen: 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 herunterladen und auf dem Bildschirm darstellen.
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, ist eine sorgfältige Analyse in vielen Dimensionen erforderlich: Formatfunktionen, Inhalt der codierten Daten, Qualität, Pixelabmessungen und mehr.
Vektorbilder optimieren
Alle modernen Browser unterstützen Scalable Vector Graphics (SVG), ein XML-basiertes Bildformat für zweidimensionale Grafiken. Sie können das SVG-Markup direkt auf der Seite oder als externe Ressource einbetten. Die meisten vektorbasierten Zeichenprogramme können SVG-Dateien erstellen. Sie können sie aber auch manuell direkt in Ihrem 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 folgende einfache Kreisform mit schwarzem Umriss und rotem Hintergrund gerendert. Sie wurde 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 minimieren.
So reduziert SVGO die Größe der oben genannten SVG-Datei, die mit Illustrator erstellt wurde, um 58%, 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 SVG ein XML-basiertes Format ist, 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 die RGBA-Werte: (R) Rotkanal, (G) Grünkanal, (B) Blaukanal und (A) Alphakanal (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 ganz einfach berechnen:
- Ein Bild mit 100 × 100 Pixeln besteht aus 10.000 Pixeln.
- 10.000 Pixel × 4 Byte = 40.000 Byte
- 40.000 Byte ÷ 1.024 = 39 KB
| Dimensionen | Pixel | 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 × 800 | 640.000 | 2.500 KB |
39 KB für ein Bild mit 100 x 100 Pixeln erscheinen zwar 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. In diesem Beitrag ging es bisher nur um das „nicht komprimierte“ Bildformat. Glücklicherweise gibt es viele Möglichkeiten, die Größe der Bilddatei zu reduzieren.
Eine einfache Strategie besteht darin, die „Bittiefe“ des Bildes von 8 Bit pro Kanal auf eine kleinere Farbpalette zu reduzieren: Mit 8 Bit pro Kanal erhalten wir 256 Werte pro Kanal und insgesamt 16.777.216 Farben (256 hoch 3). Was passiert, wenn Sie die Palette auf 256 Farben reduzieren? Sie benötigen dann insgesamt nur 8 Bit für die RGB-Kanäle und sparen sofort zwei Byte pro Pixel – das entspricht einer Komprimierungseinsparung von 50 % gegenüber dem ursprünglichen Format mit 4 Byte pro Pixel.
Komplexe Szenen mit allmählichen 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 hingegen nur wenige Farben verwendet, wird mit einer großen Palette einfach wertvolle Speicherkapazität verschwendet.
Nachdem Sie die in den einzelnen Pixeln gespeicherten Daten optimiert haben, können Sie noch einen Schritt weiter gehen und sich auch die benachbarten Pixel ansehen: Viele Bilder und insbesondere Fotos enthalten viele benachbarte Pixel mit ähnlichen Farben, z. B. den Himmel oder sich wiederholende Texturen. 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 ist für verschiedene Farben unterschiedlich empfindlich. Sie können Ihre Farbcodierung entsprechend optimieren, indem Sie die Palette für diese Farben verkleinern oder vergrößern. Die „nahe gelegenen“ Pixel bilden ein zweidimensionales Raster. Das bedeutet, dass jedes Pixel mehrere Nachbarn hat. Sie können diese Tatsache nutzen, um die Deltacodierung weiter zu verbessern. Anstatt nur die unmittelbaren Nachbarn für jedes Pixel zu betrachten, können Sie sich größere Blöcke von benachbarten Pixeln ansehen und verschiedene Blöcke mit unterschiedlichen Einstellungen codieren.
Wie Sie sehen, kann die Bildoptimierung schnell kompliziert werden (oder Spaß machen, je nach Perspektive) und ist ein aktives Gebiet der akademischen und kommerziellen Forschung. Bilder belegen viele Bytes und es ist sehr wertvoll, bessere Bildkomprimierungstechniken zu entwickeln. Weitere Informationen finden Sie auf der Wikipedia-Seite oder im Whitepaper zu WebP-Komprimierungstechniken.
Noch einmal: Das ist alles sehr gut, aber auch sehr akademisch: Wie hilft Ihnen das, Bilder auf Ihrer Website zu optimieren? Es ist wichtig, die Art des Problems zu verstehen: RGBA-Pixel, Bittiefe und verschiedene Optimierungstechniken. Sie sollten alle diese Konzepte verstehen und im Hinterkopf behalten, bevor Sie sich mit den verschiedenen Rasterbildformaten befassen.
Verlustfreie und verlustbehaftete Bildkomprimierung
Bei bestimmten Datentypen wie dem Quellcode einer Seite oder einer ausführbaren Datei ist es wichtig, dass ein Komprimierungsprogramm keine der ursprünglichen Informationen verändert oder verliert: Ein einzelnes fehlendes oder falsches Datenbit kann den Inhalt der Datei vollständig verändern oder im schlimmsten Fall vollständig beschädigen. Bei einigen anderen Datentypen, z. B. Bildern, Audio und Video, kann eine "ungefähre" Darstellung der Originaldaten vollkommen akzeptabel sein.
Aufgrund der Funktionsweise des menschlichen Auges können wir oft einige Informationen über jedes Pixel verwerfen, um die Dateigröße eines Bildes zu reduzieren. So sind unsere Augen beispielsweise unterschiedlich empfindlich für verschiedene Farben, was bedeutet, dass wir für einige Farben weniger Bits verwenden können. Daher besteht eine typische Pipeline zur Bildoptimierung aus zwei allgemeinen Schritten:
- Das Bild wird mit einem verlustbehafteten Filter verarbeitet, der einige Pixeldaten entfernt.
- 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 bei der Anwendung der verlustbehafteten und verlustfreien Schritte verwendet (oder weggelassen) werden.
Was ist also die „optimale“ Konfiguration der 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 Sie Ihr eigenes Urteilsvermögen und den Kontext berücksichtigen – es gibt keine universelle Einstellung.
Als praktisches Beispiel: Bei der Verwendung eines verlustbehafteten Formats wie JPEG bietet der Komprimierungsalgorithmus in der Regel eine anpassbare „Qualitätseinstellung“ (z. B. den Schieberegler für die Qualität, der über die Funktion „Für Web speichern“ in Adobe Photoshop aufgerufen wird). Diese Einstellung ist in der Regel eine Zahl zwischen 1 und 100, die die interne Funktionsweise der jeweiligen Sammlung von verlustbehafteten und verlustfreien Algorithmen steuert. Für optimale Ergebnisse sollten Sie verschiedene Qualitätseinstellungen für Ihre Bilder ausprobieren. Sie können die Qualität auch senken. Die visuellen Ergebnisse sind oft sehr gut und die Dateigröße kann erheblich reduziert werden.
Auswirkungen der Bildkomprimierung auf die 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 für Rasterbildformate experimentieren, sollten Sie auch die WebP- und AVIF-Formate ausprobieren, um zu sehen, ob Sie dasselbe Bild mit einem geringeren Speicherplatzbedarf als bei älteren Formaten bereitstellen können.
Achten Sie jedoch darauf, Rasterbilder nicht zu stark zu overcompress. Eine gute Lösung ist die Verwendung eines CDN zur Bildoptimierung, um die für Sie besten Komprimierungseinstellungen zu finden. Eine Alternative sind Tools wie Butteraugli, mit denen sich visuelle Unterschiede schätzen lassen, damit Bilder nicht zu stark codiert werden und zu viel Qualität verlieren.
Checkliste für die Bildoptimierung
Beachten Sie beim Optimieren Ihrer Bilder folgende 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.
- SVG-Assets minimieren und komprimieren:Das von den meisten Zeichenanwendungen erstellte XML-Markup enthält oft unnötige Metadaten, die entfernt werden können. Achten Sie darauf, dass Ihre Server so konfiguriert sind, dass die GZIP-Komprimierung für SVG-Assets angewendet wird.
- WebP oder AVIF anstelle älterer Rasterformate verwenden: WebP- und AVIF-Bilder sind in der Regel viel kleiner als ältere Bildformate.
- Wählen Sie das beste Rasterbildformat aus:Legen Sie Ihre funktionalen Anforderungen fest und wählen Sie das Format aus, das für jedes einzelne Asset am besten geeignet ist.
- Optimale Qualitätseinstellungen für Rasterformate testen:Sie können die Qualitätseinstellungen ruhig etwas herunterschrauben. 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 oder Kamerainformationen. Verwenden Sie geeignete Tools, um diese Daten zu entfernen.
- Bilder in skalierter Größe bereitstellen:Ändern Sie die Größe der Bilder und achten Sie darauf, dass die „Anzeigegröße“ der „natürlichen“ Größe des Bildes möglichst nahe kommt. Achten Sie besonders auf große Bilder, da diese den größten Mehraufwand verursachen, wenn die Größe angepasst wird.
- Automatisieren, automatisieren, automatisieren:Investieren Sie in automatisierte Tools und Infrastruktur, mit denen alle Ihre Bild-Assets immer optimiert werden.