Wir haben bereits einige Artikel über die Bildoptimierung jpegoptim, jpegtran, optipng, pngcrush und ImageMagick geschrieben. Heute wollen wir die Bildoptimierung mit webp beschreiben.
Minifizierung und Komprimierung sind längst zum Standard geworden, um den Code von Webseiten zu optimieren. Alle gängigen Webressourcen optimieren Bilder, verwenden nach Möglichkeit dasselbe CSS und wählen die richtigen Bildformate. Aber das ist nicht genug. Statistiken des HTTP-Archivs zeigen, dass Bilder etwa 64 % der Größe einer Webseite einnehmen. Der neue WebP-Standard kommt dazu, JPEG und PNG zu ersetzen.
Kurz über WebP
Das Format erschien bereits 2010 und wurde seitdem von Google entwickelt. WebP basiert auf dem Komprimierungsalgorithmus für Keyframes des VP8-Videocodecs, mit oder ohne Verlust, und ist in einem auf RIFF basierenden Container verpackt. Verlustfreie WebP-Bilder sind durchschnittlich 26 % kleiner als PNG, und verlustbehaftete WebP-Bilder sind 25–34 % kleiner als JPEG mit demselben SSIM-Index. Das neue Format unterstützt auch Transparenz (bekannt als Alphakanal).
Funktionsprinzip
Bei der verlustbehafteten Komprimierung verwendet WebP eine prädiktive Codierung, bei der die Werte benachbarter Pixelblöcke verwendet werden, um den Wert des gewünschten Pixelblocks vorherzusagen, und dann die Differenz codiert wird.
Die verlustfreie Komprimierung verwendet bekannte Fragmente des Bildes, um Pixel genau zu rekonstruieren. Eine lokale Palette kann auch verwendet werden, wenn es keinen passenden Algorithmus gibt, der Sie interessiert.
Vor- und Nachteile
Dahinter:
- kleinere Bildgröße;
- erweiterter Komprimierungsalgorithmus;
- hohe Bildqualität;
- Unterstützung für Transparenz
Dagegen:
- geringe Prävalenz;
- „Plastizität“ bei Kompression mit Verlusten;
- Farben in Pixeln und anderen Computergrafiken können verloren gehen.
WebP wird bereits in Chrome, Opera und dem Standard-Android-Browser unterstützt und kann mit Hilfe der WebPJS-Bibliothek in allen gängigen Browsern (ab IE 6 mit Flash) angezeigt werden. Darüber hinaus wurden eine leichte Bibliothek zum Kodieren und Dekodieren von libwebp, Befehlszeilenprogramme zum Kodieren und Dekodieren von WebP sowie Tools zum Anzeigen, Multiplexen und Animieren von Bildern in diesem Format entwickelt.
cwebp installieren
Cwebp hat vorkompilierte Linux-Binärdateien. Die Installation ist also einfach herunterzuladen und zu entpacken:
# wget https://storage.googleapis.com/downloads.webmproject.org/releases/webp/libwebp-1.0.3-linux-x86-64.tar.gz # tar zxf libwebp-1.0.3-linux-x86-64.tar.gz # cp -a libwebp-1.0.3-linux-x86-64/bin/cwebp /usr/bin/ # cp -a libwebp-1.0.3-linux-x86-64/bin/dwebp /usr/bin/
Verwendung von cwebp
Das Dienstprogramm cwebp wird zum Konvertieren von JPEG, PNG und TIFF verwendet, und dwebp wird zum Decodieren verwendet. Die Konvertierung wird mit einem einfachen Befehl (aus dem Utility-Verzeichnis) gestartet:
# cwebp input.png -q 80 -o output.webp
Nach dem gleichen Prinzip kann die Dekodierung gestartet werden. Es gibt viele Optionen und zusätzliche Parameter, einschließlich zum Überprüfen der Codierung.
WebP-Bereitstellung
Sie haben sich also für das neue Format interessiert, alle Tests gemacht, sich die Statistiken noch einmal angesehen und sich vergewissert, dass Chrome immer noch der beliebteste Webbrowser ist. Was nun? Als nächstes müssen Sie eine Kopie aller Bilder in WebP erstellen (Sie können ein einfaches Skript schreiben, um alle Dateien zu konvertieren) und dann die Website-Benutzer überprüfen und ihnen kompakte Bilder unter die Nase halten, wenn ihr Browser WebP unterstützt.
Das heißt, Sie können ein eigenes Skript erstellen, das den Browser des Clients auf Formatunterstützung überprüft, der dann den Webserver abschiebt, oder diese Aufgabe vollständig dem Webserver zuweisen. Die zweite Option erscheint uns logischer.
Aushandlung mit Accept-Header
Browser übergeben den Accept-Header als:
in Opera:
Accept: text / html, application / xml; q = 0.9, application / xhtml + xml, image / png, image / webp, image / jpeg, image / gif, image / x-xbitmap, * / *; q = 0.1
in Chrome:
Accept: image / webp, * / *; q = 0.8
Wenn Sie dies wissen, können Sie den Webserver so konfigurieren, dass er automatisch WebP überträgt. Als Beispiel verwenden wir Nginx, in dessen Konfigurationsdatei Sie so etwas hinzufügen müssen:
location / {
if ($http_accept ~* "webp") { set $webp_accept "true"; }
if (-f $request_filename.webp) { set $webp_local "true"; }
if ($webp_local = "true") {
add_header Vary Accept;
}
# if the client supports WebP, then upload the file
if ($webp_accept = "true") {
rewrite (.*) $1.webp break;
}
} Die Apache-Konfiguration wird ähnlich sein. Wenn in Akzeptieren keine WebP-Unterstützung gefunden wird, werden normale Dateien übertragen. Nun, wenn Nginx als Proxy für das Caching von Statics verwendet wird, ist die Konfiguration anders:
server {
location / {
if ($http_accept ~* "webp") { set $webp T; }
proxy_cache_key $scheme$proxy_host$request_uri$webp;
proxy_pass http://backend;
proxy_cache my-cache;
}
} Schlussfolgerung
Das WebP-Bildformat reduziert die Größe der Webseite erheblich, aber aufgrund seiner begrenzten Unterstützung müssen Sie zusätzlich den Webserver konfigurieren und Kopien aller Bilder in mehreren Formaten enthalten.