Wir bei Google arbeiten ständig daran, die Ladezeiten von Webseiten zu verkürzen. Eine Möglichkeit, dies zu tun, besteht darin, Webbilder zu verkleinern. Auf den meisten Webseiten werden Bilder zwischen 60 und 65 % der Byte ausgegeben. Die Seitengröße ist ein wichtiger Faktor für die Gesamtrenderingzeit. Die Seitengröße ist besonders wichtig für Mobilgeräte, da kleinere Bilder sowohl Bandbreite als auch Akkulaufzeit sparen.
WebP ist ein von Google entwickeltes neues Bildformat, das in Chrome, Opera und Android unterstützt wird. Es wurde für schnellere und kleinere Bilder im Web optimiert. WebP-Bilder sind im Vergleich zu PNG- und JPEG-Bildern bei gleichwertiger Bildqualität etwa 30% kleiner. Darüber hinaus hat das WebP-Bildformat dieselben Funktionen wie andere Formate. Unterstützt werden:
Verlustbehaftete Komprimierung: Die verlustbehaftete Komprimierung basiert auf der VP8-Keyframe-Codierung. VP8 ist ein Videokomprimierungsformat, das von On2 Technologies als Nachfolger der Formate VP6 und VP7 entwickelt wurde.
Verlustfreie Komprimierung: Das verlustfreie Komprimierungsformat wird vom WebP-Team entwickelt.
Transparenz:Der 8-Bit-Alphakanal eignet sich für grafische Bilder. Der Alphakanal kann zusammen mit dem verlustbehafteten RGB-Format verwendet werden, einer Funktion, die derzeit in keinem anderen Format verfügbar ist.
Animation:Animierte Bilder in Originalfarben
Metadaten:Sie können EXIF- und XMP-Metadaten enthalten, die beispielsweise von Kameras verwendet werden.
Farbprofil: Möglicherweise ist ein eingebettetes ICC-Profil vorhanden.
Aufgrund der besseren Komprimierung der Bilder und der Unterstützung all dieser Funktionen kann WebP ein hervorragender Ersatz für die meisten Bildformate sein: PNG, JPEG oder GIF. Wussten Sie schon, dass WebP neue Möglichkeiten zur Bildoptimierung bietet, z. B. die Unterstützung verlustbehafteter Bilder mit Transparenz? Ja. WebP ist das Schweizer Armeemesser für Bildformate.
Wie gelingt das? Ärmel hochkrempeln und einen Blick unter die Haube werfen.
Verlustbehaftetes WebP
Die verlustbehaftete Komprimierung von WebP verwendet zur Vorhersage von (Video-)Frames dieselbe Methode wie bei VP8. VP8 basiert auf Blockvorhersagen und wie jeder blockbasierte Codec teilt VP8 den Frame in kleinere Segmente auf, die als Makroblöcke bezeichnet werden.
Innerhalb jedes Makroblocks kann der Encoder redundante Bewegungs- und Farbinformationen basierend auf zuvor verarbeiteten Blöcken vorhersagen. Der Imageframe ist in dem Sinne so, dass er nur die Pixel verwendet, die bereits in der unmittelbaren räumlichen Nachbarschaft jedes Makroblocks decodiert sind, und versucht, den unbekannten Teil davon zu füllen. Dies wird als vorausschauende Codierung bezeichnet (siehe Intra-Frame-Codierung des VP8-Videos).
Die redundanten Daten können dann vom Block subtrahiert werden, was zu einer effizienteren Komprimierung führt. Es bleibt nur ein kleiner Unterschied, der als Residuum bezeichnet wird, in komprimierter Form übertragen.
Nach einer mathematisch invertierbaren Transformation (der berühmten DCT, die für Diskrete Cosinus-Transformation steht) enthalten die Residuen in der Regel viele Nullwerte, die viel effektiver komprimiert werden können. Das Ergebnis wird dann quantisiert und entropiecodiert. Der Quantisierungsschritt ist der einzige Schritt, bei dem Bits verlustbehaftet verworfen werden (suchen Sie im folgenden Diagramm nach der Division durch QPj). Alle anderen Schritte sind invertierbar und verlustfrei.
Das folgende Diagramm zeigt die Schritte der verlustbehafteten WebP-Komprimierung. Die Merkmale, die sich von JPEG unterscheiden, sind rot eingekreist.
WebP verwendet Blockquantisierung und verteilt Bits adaptiv auf verschiedene Bildsegmente: weniger Bit für Segmente mit niedriger Entropie und höhere Bits für Segmente mit höherer Entropie. WebP verwendet die Codierung für arithmetische Entropie und erreicht damit eine bessere Komprimierung als die Huffman-Codierung, die in JPEG verwendet wird.
Intra-Vorhersagemodi VP8
Intra-Vorhersagemodi VP8 werden mit drei Arten von Makroblöcken verwendet:
- 4 × 4 Luma
- 16 x 16 Luma
- 8:8 Chrom
Diese Makroblöcke nutzen vier gängige Modi für die Intra-Vorhersage:
H_PRED (horizontale Vorhersage). Füllt jede Spalte des Blocks mit einer Kopie der linken Spalte, L.
V_PRED (vertikale Vorhersage). Füllt jede Zeile des Blocks mit einer Kopie der Zeile oben, A.
DC_PRED (DC-Vorhersage). Füllt den Block mit einem einzelnen Wert aus dem Durchschnitt der Pixel in der Zeile über A und der Spalte links von L.
TM_PRED (TrueMotion-Vorhersage). Ein Modus, der seinen Namen von einem Komprimierungsverfahren erhält, das von On2 Technologies entwickelt wurde. Zusätzlich zu Zeile A und Spalte L verwendet TM_PRED das Pixel P über und links vom Block. Horizontale Unterschiede zwischen den Pixeln in A (beginnend mit P) werden unter Verwendung der Pixel von L zu Beginn jeder Zeile weitergegeben.
Das folgende Diagramm zeigt die verschiedenen Vorhersagemodi, die bei der verlustbehafteten WebP-Komprimierung verwendet werden.
Für 4x4-Luma-Blöcke gibt es sechs zusätzliche Intramodi, die V_PRED und H_PRED ähneln, aber der Vorhersage von Pixeln in verschiedenen Richtungen entsprechen. Weitere Informationen zu diesen Modi finden Sie im VP8-Bitstream-Leitfaden.
Adaptive Blockquantisierung
Um die Qualität eines Bildes zu verbessern, wird das Bild in Bereiche segmentiert, die optisch ähnliche Merkmale aufweisen. Für jedes dieser Segmente werden die Komprimierungsparameter (Quantisierungsschritte, Filterstärke usw.) unabhängig abgestimmt. Dies ermöglicht eine effiziente Komprimierung, indem Bits an die Stelle verteilt werden, an der sie am nützlichsten sind. VP8 erlaubt maximal vier Segmente (eine Einschränkung des VP8-Bitstreams).
Warum WebP (verlustbehaftet) besser als JPEG ist
Die Vorhersagecodierung ist einer der Hauptgründe dafür, dass WebP gegenüber JPEG gewinnt. Auch die adaptive Quantisierung von Blöcken spielt einen großen Unterschied. Filtern ist bei mittleren/niedrigen Bitraten sinnvoll. Die boolesche arithmetische Codierung bietet im Vergleich zur Huffman-Codierung eine Komprimierungszunahme von 5–10 %.
Verlustfreies WebP
Die WebP-verlustfreie Codierung basiert auf der Umwandlung des Bildes mithilfe verschiedener Techniken. Anschließend erfolgt eine Entropiecodierung für die Transformationsparameter und transformierten Bilddaten. Zu den auf das Bild angewendeten Transformationen gehören die räumliche Vorhersage von Pixeln, die Farbraumtransformation, unter Verwendung lokal aufkommender Paletten, das Packen mehrerer Pixel in einem Pixel und die Alpha-Ersetzung. Für die Entropiecodierung verwenden wir eine Variante der LZ77-Huffman-Codierung, bei der die 2D-Codierung von Entfernungswerten und die kompakten Sparse-Werte verwendet werden.
Predictor-Transformation (räumlich)
Die räumliche Vorhersage wird verwendet, um die Entropie zu reduzieren, indem die Tatsache genutzt wird, dass benachbarte Pixel häufig korrelieren. In der Predictor-Transformation wird der aktuelle Pixelwert aus den Pixeln vorhergesagt, die bereits decodiert sind (in Scanline-Reihenfolge), und nur der Residuenwert (tatsächlich – vorhergesagt) wird codiert. Der Vorhersagemodus bestimmt die Art der zu verwendenden Vorhersage. Das Bild wird in mehrere quadratische Bereiche unterteilt und alle Pixel in einem Quadrat verwenden denselben Vorhersagemodus.
Es gibt 13 verschiedene Vorhersagemodi. Zu den häufigsten gehören Links, oben, oben links und oben rechts. Die restlichen sind Kombinationen (Durchschnitte) von „Links“, „Oben“, „Oben links“ und „Oben rechts“.
Farbtransformation (Dekorrelation)
Das Ziel der Farbtransformation besteht darin, die R-, G- und B-Werte jedes Pixels zu dekorieren. Die Farbtransformation behält den grünen Wert (G) bei, transformiert Rot (R) basierend auf Grün und Blau (B) basierend auf Grün und dann basierend auf Rot.
Wie bei der Predictor-Transformation wird zuerst das Bild in Blöcke unterteilt und für alle Pixel in einem Block wird derselbe Transformationsmodus verwendet. Für jeden Block gibt es drei Typen von Farbtransformationselementen: grün_zu_rot, grün_zu_blau und rot_zu_blau.
Grüne Transformation subtrahieren
Die Transformation „Grüne subtrahieren“ subtrahiert die grünen Werte von den Rot- und Blauwerten der einzelnen Pixel. Wenn diese Transformation vorhanden ist, muss der Decoder den grünen Wert sowohl zu Rot als auch zu Blau addieren. Dies ist ein Sonderfall der oben beschriebenen allgemeinen Farbdekorrelationstransformation, der häufig genug ist, um einen Cutoff zu rechtfertigen.
Transformation Farbindexierung (Paletten)
Wenn nicht viele eindeutige Pixelwerte vorhanden sind, ist es möglicherweise effizienter, ein Farbindexarray zu erstellen und die Pixelwerte durch die Indexe des Arrays zu ersetzen. Dies wird mit der Farbindexierungstransformation erreicht. Die Farbindexierungstransformation prüft die Anzahl eindeutiger ARGB-Werte im Bild. Liegt diese Zahl unter einem Grenzwert (256), wird ein Array dieser ARGB-Werte erstellt, mit dem dann die Pixelwerte durch den entsprechenden Index ersetzt werden.
Farbcache-Codierung
Die verlustfreie WebP-Komprimierung verwendet bereits vorhandene Bildfragmente, um neue Pixel zu rekonstruieren. Wenn keine interessante Übereinstimmung gefunden wird, kann auch eine lokale Palette verwendet werden. Diese Palette wird kontinuierlich aktualisiert, um kürzlich verwendete Farben wiederzuverwenden. Im Bild unten sehen Sie, wie der lokale Farbcache in Aktion mit den 32 kürzlich verwendeten Farben aktualisiert wird, während der Scan nach unten geht.
LZ77 Rückwärtsreferenz
Rückverweise sind Tupel aus Längen- und Entfernungscode. Die Länge gibt an, wie viele Pixel in Scanzeilenreihenfolge kopiert werden sollen. Der Entfernungscode ist eine Zahl, die die Position eines zuvor gesehenen Pixels angibt, von der aus die Pixel kopiert werden sollen. Die Werte für Länge und Entfernung werden mit der LZ77-Präfixcodierung gespeichert.
Bei der LZ77-Präfixcodierung werden große Ganzzahlwerte in zwei Teile unterteilt: den Präfixcode und die zusätzlichen Bits. Der Präfixcode wird mit einem Entropiecode gespeichert, während die zusätzlichen Bits unverändert (ohne Entropiecode) gespeichert werden.
Das folgende Diagramm zeigt den LZ77 (2D-Variante) mit Wortabgleich (anstelle von Pixeln).
Verlustbehaftetes WebP mit Alpha
Zusätzlich zu verlustbehaftetem WebP (RGB-Farben) und verlustfreiem WebP (lossless RGB mit Alpha) gibt es einen weiteren WebP-Modus, der eine verlustbehaftete Codierung für RGB-Kanäle und eine verlustfreie Codierung für den Alphakanal ermöglicht. Eine solche Möglichkeit (verlustbehaftete RGB- und verlustfreie Alphaversion) ist derzeit mit keinem der vorhandenen Bildformate verfügbar. Heutzutage müssen Webmaster, die Transparenz benötigen, Bilder verlustfrei in PNG codieren, was zu einer erheblichen Aufgeblähtheit führt. WebP Alpha codiert Bilder mit niedrigen Bits pro Pixel und bietet eine effektive Möglichkeit, die Größe solcher Bilder zu reduzieren. Eine verlustfreie Komprimierung des Alphakanals fügt gegenüber der verlustbehafteten WebP-Codierung (Qualität 90) nur 22% Byte hinzu.
Wenn Sie transparente PNG-Dateien durch WebP mit verlustbehafteter und Alpha-Qualität ersetzen, können Sie im Durchschnitt eine Größeneinsparung von 60–70% erzielen. Dies hat sich als attraktive Funktion für mobile Websites mit vielen Symbolen (z. B. everything.me) bewährt.
