Bilder machen oft den größten Teil der heruntergeladenen Byte auf einer Webseite aus und nehmen auch oft einen erheblichen Teil des sichtbaren Bereichs ein. Daher kann die Optimierung von Bildern häufig zu den größten Byteeinsparungen und Leistungsverbesserungen für Ihre Website führen: Je weniger Byte 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 eindeutige 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 vieler Dimensionen erforderlich: Formatfähigkeiten, 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. Sie können das SVG-Markup direkt auf der Seite oder als externe Ressource einbetten. Die meisten vektorbasierten Zeichensoftware können SVG-Dateien erstellen. Sie können sie aber auch direkt in Ihrem bevorzugten Texteditor manuell 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>
Das obige Beispiel rendert die nachstehende einfache Kreisform mit einem schwarzen Umriss und einem roten Hintergrund und wurde aus Adobe Illustrator exportiert.
<?xml version="1.0"coding="utf-8"?>
Sie enthält 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 SVG zu komprimieren.
SVGO reduziert die Größe der oben von Illustrator generierten SVG-Datei um 58 % und verkürzt damit die Größe 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 die 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 beispielsweise eine Abfolge von 10.000 Pixeln. Jedes Pixel speichert wiederum die "RGBA"-Werte: (R) Rotkanal, (G) Grünkanal, (B) Blauer Kanal und (A) Alpha-Kanal (Transparenz).
Intern weist der Browser 256 Werte (Schattierungen) für jeden Kanal 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 mag nicht viel erscheinen, aber bei größeren Bildern explodiert die Dateigröße schnell. Das führt dazu, dass der Download von Bild-Assets sowohl langsam als auch teuer ist. In diesem Beitrag ging es bisher nur um das unkomprimierte Bildformat. Zum Glück gibt es viele Möglichkeiten, die Bilddatei zu verkleinern.
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 insgesamt 256 Werte pro Kanal und 16.777.216 (256 ^ 3) Farben. Was passiert, wenn Sie die Palette auf 256 Farben reduzieren? In diesem Fall benötigen Sie für die RGB-Kanäle insgesamt nur 8 Bits und sparen sofort 2 Byte pro Pixel. Das sind 50% Einsparung bei der Komprimierung gegenüber 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 nur wenige Farben verwendet, verschwendet eine große Palette einfach nur wertvolle Teile.
Nachdem Sie die in einzelnen Pixel gespeicherten Daten optimiert haben, können Sie auch noch mehr in der Nähe befindliche Pixel untersuchen: Viele Bilder, insbesondere Fotos, weisen viele benachbarte Pixel mit ähnlichen Farben auf, z. B. der Himmel, sich wiederholende Texturen und so weiter. Wenn Sie diese Informationen zu Ihrem Vorteil nutzen, kann das Komprimierungsprogramm die Delta-Codierung anwenden. Statt 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 hier aufhören?
Das menschliche Auge weist eine unterschiedliche Empfindlichkeit gegenüber verschiedenen Farben auf. Um dies zu berücksichtigen, können Sie die Farbcodierung optimieren, indem Sie die Palette für diese Farben verringern oder erhöhen. „Nearby“-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 nahe gelegener Pixel ansehen und verschiedene Blöcke mit unterschiedlichen Einstellungen codieren.
Wie Sie sehen, wird die Bildoptimierung schnell kompliziert (oder macht Spaß, je nach Ihrer Perspektive) und ist ein aktiver Bereich der akademischen und kommerziellen Forschung. Bilder belegen eine Menge Bytes und es ist sehr wichtig, bessere Bildkomprimierungstechniken zu entwickeln. Weitere Informationen finden Sie auf der Wikipedia-Seite oder im Whitepaper zu WebP-Komprimierungstechniken.
Das ist alles großartig, aber auch sehr wissenschaftlich: Inwiefern hilft es Ihnen, Bilder auf Ihrer Website zu optimieren? Nun, es ist wichtig, die Form des Problems zu verstehen: RGBA-Pixel, Bittiefe und verschiedene Optimierungstechniken. Sie sollten diese Konzepte unbedingt verstehen und berücksichtigen, bevor Sie sich mit den verschiedenen Rasterbildformaten befassen.
Verlustfreie und verlustbehaftete Bildkomprimierung im Vergleich
Bei bestimmten Datentypen, z. B. dem Quellcode einer Seite oder einer ausführbaren Datei, ist es wichtig, dass ein Komprimierungsprogramm die ursprünglichen Informationen nicht ändert oder verliert: Ein einzelnes fehlendes oder falsches Datenbit kann die Bedeutung des Inhalts der Datei vollständig ändern oder sogar ganz zerstören. Bei einigen anderen Datentypen wie Bildern, Audio und Video kann es völlig in Ordnung sein, eine "ungefähre" Darstellung der Originaldaten zu liefern.
Aufgrund der Funktionsweise des Auges müssen wir oft einige Informationen über jedes Pixel verwerfen, um die Dateigröße eines Bildes zu verringern. Zum Beispiel haben unsere Augen eine unterschiedliche Farbempfindlichkeit, sodass wir weniger Bits zum Codieren einiger Farben verwenden können. Daher besteht eine typische Pipeline für die Bildoptimierung aus zwei übergeordneten Schritten:
- Das Bild wird mit einem Filter verlustbehaftet 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. Es ist jedoch wichtig zu verstehen, dass jedes Bild einer verlustbehafteten Komprimierung unterzogen werden kann, um seine Größe zu reduzieren. Tatsächlich besteht der Unterschied zwischen verschiedenen Bildformaten wie GIF, PNG, JPEG und anderen 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 einer verlustbehafteten und verlustfreien Optimierung? Die Antwort hängt vom Bildinhalt und Ihren eigenen Kriterien ab, z. B. dem Kompromiss zwischen Dateigröße und Artefakten, die durch eine verlustbehaftete Komprimierung entstehen: In einigen Fällen kann es sinnvoll sein, die verlustbehaftete Optimierung zu überspringen, um komplexe Details in ihrer vollen Qualität zu vermitteln. In anderen Fällen können Sie möglicherweise eine aggressive, verlustbehaftete Optimierung anwenden, um die Dateigröße des Bild-Assets zu reduzieren. Hier müssen Sie Ihr eigenes Urteilsvermögen und Ihren Kontext ins Spiel bringen – es gibt nicht ein universelles Szenario.
Bei der Verwendung eines verlustbehafteten Formats wie JPEG bietet das Komprimierungsprogramm in der Regel eine anpassbare „Qualität“, z. B. den Qualitätsschieberegler der „Für Web speichern“-Funktion in Adobe Photoshop. Dabei handelt es sich in der Regel um eine Zahl zwischen 1 und 100, die die Funktionsweise der jeweiligen Sammlung verlustbehafteter und verlustfreier Algorithmen steuert. Experimentieren Sie für optimale Ergebnisse 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ößen können beträchtlich sein.
Auswirkungen der Bildkomprimierung auf Core Web Vitals
Da Bilder häufig Kandidaten für den Largest Contentful Paint sind, kann sich eine Reduzierung der Ressourcenladezeit eines Bildes zu einem besseren LCP sowohl im Lab als auch im Feld auswirken.
Wenn Sie mit Komprimierungseinstellungen bei Rasterbildformaten spielen, sollten Sie mit WebP- und AVIF-Formaten experimentieren, um zu sehen, ob Sie dasselbe Bild im Vergleich zu älteren Formaten mit geringem Platzbedarf ausliefern können.
Sie sollten jedoch darauf achten, Rasterbilder nicht zu komprimieren. Eine gute Lösung ist die Verwendung eines CDN für die Bildoptimierung, um die besten Komprimierungseinstellungen zu finden. Alternativ können Sie auch Tools wie Butteraugli verwenden, um visuelle Unterschiede zu schätzen, damit Bilder nicht zu aggressiv codiert werden und zu viel Qualität einbüßen.
Checkliste für die Bildoptimierung
Beachten Sie bei der Optimierung Ihrer Bilder die folgenden Tipps und Methoden:
- Bevorzugen Sie Vektorformate:Vektorbilder sind unabhängig von Auflösung und Größe und eignen sich daher perfekt für eine Multi-Geräte-Welt und eine Welt mit hoher Auflösung.
- Reduzieren und Komprimieren von SVG-Assets:Das von den meisten Zeichenanwendungen erstellte XML-Markup enthält häufig 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 verwendet wird.
- WebP oder AVIF gegenüber älteren Rasterformaten bevorzugen: WebP und AVIF-Bilder sind normalerweise viel kleiner als ältere Bildformate.
- Das beste Rasterbildformat auswählen:Ermitteln Sie Ihre funktionalen Anforderungen und wählen Sie das Bild aus, das für das jeweilige Asset am besten geeignet ist.
- Experimentieren Sie mit optimalen Qualitätseinstellungen für Rasterformate:Schrecken Sie nicht davor zurück, die „Qualität“-Einstellungen herabzusetzen. Die Ergebnisse sind oft sehr gut und es lassen sich Byte einsparen.
- Entfernen Sie unnötige Bildmetadaten: Viele Rasterbilder enthalten unnötige Metadaten zum Asset, z. B. Geoinformationen oder Kamerainformationen. Entfernen Sie diese Daten mit geeigneten Tools.
- Stellen Sie skalierte Bilder bereit:Passen Sie die Größe von Bildern an und achten Sie darauf, dass die angezeigte Größe so nahe wie möglich der „natürlichen“ Größe des Bildes entspricht. Achten Sie insbesondere auf große Bilder, da sie bei der Größenänderung den größten Mehraufwand verursachen.
- Automatisieren, automatisieren, automatisieren:Investieren Sie in automatisierte Tools und Infrastruktur, damit alle Ihre Bild-Assets immer optimiert sind.