Beschleunigen Sie Ihre Website mit WebP

(Dies ist ein gesponserter Beitrag.) Verbringen Sie genügend Zeit damit, Websites über PageSpeed ​​Insights zu betreiben, und Sie werden feststellen, dass Google einen großen Einfluss auf traditionelle Bildformate wie JPG, PNG und sogar GIF hat. So sollte es auch.

Selbst wenn Sie die Größe Ihrer Bilder genau an die Spezifikationen Ihrer Website anpassen und sie durch einen Kompressor laufen lassen, können sie dennoch die Leistung belasten und die Bandbreitennutzung erhöhen. Schlimmer noch, all diese Bildmanipulationen können die resultierende Qualität beeinträchtigen.

Wenn man bedenkt, wie wichtig Bilder für das Webdesign sind, ist dies kein Element, das wir so einfach entsorgen können, und wir können es uns nicht leisten, bei der Optimierung Abstriche zu machen. Also, was ist die Lösung?

Hier ist, was Google vorschlägt:

Vor Jahren wollte Google diesem Problem ein Ende setzen, indem es ein Bildformat der nächsten Generation namens WebP entwickelte. Sie können in diesem Screenshot von PageSpeed ​​Insights sehen, dass Google die Verwendung von WebP und anderen Next-Gen-Formaten empfiehlt, um die Größe Ihrer Bilder erheblich zu reduzieren und gleichzeitig ihre Qualität zu erhalten.

Und wenn Ihnen 0,75 Sekunden nicht viel erscheinen (zumindest in diesem Beispiel), könnte es einen großen Unterschied im Leben Ihrer Besucher machen, der Leute, die dort sitzen und sich fragen, wie lange es zu lange ist, zu warten. Nur eine Sekunde Ladezeit weniger kann einen großen Unterschied für Ihre Conversion-Rate ausmachen.

Aber ist WebP die beste Lösung für dieses Problem? Heute untersuchen wir:

• Was WebP ist,
• Was sind die Vorteile der Verwendung,
• Wie es mit Browsern und Geräten funktioniert,
• Was sind die Herausforderungen bei der Konvertierung und Bereitstellung von WebP und
• So vereinfachen Sie die Konvertierung und Bereitstellung mit KeyCDN.

Was ist WebP?

Google entwickelte WebP bereits im Jahr 2010 nach der Übernahme eines Unternehmens namens On2 Technologies. On2 hatte an einer Reihe von Videokomprimierungstechnologien gearbeitet, die schließlich als Grundlage für Googles neues audiovisuelles Format WebM und das Bildformat der nächsten Generation WebP dienten.

Ursprünglich verwendete WebP eine verlustbehaftete Komprimierung, um kleinere, aber dennoch qualitativ hochwertige Bilder für das Web zu erstellen.

Wenn Ihnen 0,75 Sekunden nicht viel erscheinen, könnte es einen großen Unterschied im Leben Ihrer Besucher machen, der Leute, die dort sitzen und sich fragen, wie lange es zu lange ist, zu warten.

„

Verlustbehaftete Komprimierung für WebP

Die verlustbehaftete Komprimierung ist eine Form der Komprimierung, die verwendet wird, um die Dateigröße von JPGs und GIFs stark zu reduzieren. Um dies zu erreichen, müssen jedoch einige der Daten (Pixel) aus der Datei weggelassen werden oder „verloren“ gehen. Dies führt wiederum zu einer gewissen Verschlechterung der Bildqualität, obwohl dies nicht immer wahrnehmbar ist.

WebP betrat das Bild mit einer viel effizienteren Nutzung der verlustbehafteten Komprimierung (die ich weiter unten erläutern werde) und wurde zum dringend benötigten Nachfolger von JPG.

Sie können eine großartige Demonstration dieses Unterschieds sehen, wenn KeyCDN den Unterschied in der Dateigröße eines komprimierten JPG mit WebP vergleicht:

Beachten Sie, wie signifikant der Unterschied in Bezug auf die Dateigröße ist, selbst nachdem das JPG auf eine vergleichbare Qualität komprimiert wurde. Wie Adrian James hier erklärt, muss man jedoch bei der WebP-Komprimierung vorsichtig sein.

„Die Komprimierungseinstellungen stimmen nicht eins zu eins mit JPEG überein. Erwarten Sie nicht, dass ein JPEG mit 50 % Qualität einem WebP mit 50 % Qualität entspricht. Die Qualität fällt auf der WebP-Skala ziemlich stark ab, also beginne mit einer hohen Qualität und arbeite dich nach unten.“

Wenn man bedenkt, wie viel mehr Dateigrößen mit WebP im Vergleich zu JPG schrumpfen, sollte dies jedoch kein allzu großer Knackpunkt sein. Es ist nur etwas, worüber Sie nachdenken sollten, wenn Sie erwägen, die Grenzen dessen, was WebP leisten kann, noch weiter zu verschieben.

Im Laufe der Zeit entwickelte Google die WebP-Technologie weiter und brachte sie schließlich an einen Punkt, an dem sie nicht nur True-Color-Webgrafiken, sondern auch XMP-Metadaten, Farbprofile, Kacheln, Animationen und Transparenz unterstützte.

Schließlich brachte Google verlustfreie Komprimierung zu WebP und machte es auch zu einem brauchbaren Konkurrenten für PNG .

Verlustfreie Komprimierung für WebP

Verlustfreie Komprimierung verschlechtert die Bildqualität nicht so wie verlustbehaftet. Stattdessen werden kleinere Dateigrößen erreicht, indem überschüssige Metadaten aus dem Backend der Datei entfernt werden. Auf diese Weise bleibt die Qualität des Bildes erhalten, während seine Größe reduziert wird. Allerdings kann die verlustfreie Komprimierung nicht die Dateigrößen erreichen, die eine verlustfreie Komprimierung erreichen kann.

Das war, bis die verlustfreie Komprimierung von WebP auftauchte.

Sie können einige schöne Beispiele dafür sehen, wie sich die verlustbehaftete und verlustfreie Komprimierung von WebP gegen PNG in den WebP-Galerien von Google behauptet:

Wenn sich die Qualität der WebP-Bilder verschlechtert, wird dies für Ihre Besucher kaum wahrnehmbar sein. Das einzige, was sie wirklich bemerken werden, ist, wie schnell Ihre Website geladen wird.

Was sind die Vorteile der Verwendung von WebP?

Es reicht nicht zu sagen, dass WebP „besser“ ist als JPG und PNG. Es ist wichtig zu verstehen, wie WebP funktioniert und warum es so vorteilhaft ist, es gegenüber anderen Dateiformaten zu verwenden.

Bei herkömmlichen Bildformaten führt die Komprimierung immer zu einem Kompromiss.

Die verlustbehaftete JPG-Komprimierung führt zu einer Verschlechterung der Klarheit und Feinheit eines Bildes. Einmal angewendet, kann es nicht rückgängig gemacht werden.

Die verlustbehaftete WebP-Komprimierung hingegen verwendet eine sogenannte Vorhersagecodierung, um die Pixel in einem Bild genauer anzupassen. Wie Google erklärt, spielen auch andere Faktoren eine Rolle:

„Auch die blockadaptive Quantisierung macht einen großen Unterschied. Filtern hilft bei mittleren/niedrigen Bitraten. Die boolesche arithmetische Codierung bietet 5 % bis 10 % Komprimierungsgewinne im Vergleich zur Huffman-Codierung.“

Im Durchschnitt schätzt Google, dass die verlustbehaftete Komprimierung von WebP zu Dateien führt, die zwischen 25 % und 34 % kleiner sind als JPGs derselben Qualität.

Was die verlustfreie PNG-Komprimierung betrifft, so funktioniert sie gut, um die Qualität eines Bildes beizubehalten, aber sie hat keinen so großen Einfluss auf die Bildgröße wie ihr JPG-Pendant. Und schon gar nicht im Vergleich zu WebP.

WebP handhabt diese Art der Komprimierung effizienter und effektiver. Dies liegt an der Vielfalt der verwendeten Komprimierungstechniken sowie an der Entropiecodierung, die auf Bilder angewendet wird. Auch hier erklärt Google, wie es funktioniert:

„Die auf das Bild angewendeten Transformationen umfassen die räumliche Vorhersage von Pixeln, die Farbraumtransformation, die Verwendung lokal entstehender Paletten, das Packen mehrerer Pixel in ein Pixel und den Alpha-Ersatz.“

Im Durchschnitt schätzt Google, dass die verlustfreie WebP-Komprimierung zu Dateien führt, die etwa 26 % kleiner sind als PNGs derselben Qualität.

Das ist nicht alles. WebP hat die Fähigkeit, etwas zu tun, was kein anderes Dateiformat kann. Designer können die verlustbehaftete WebP-Codierung für RGB-Farben und die verlustfreie Codierung für Bilder mit transparentem Hintergrund (Alphakanal) verwenden.

Animierte Bilder, die ansonsten im GIF-Format bereitgestellt werden, profitieren ebenfalls von WebP-Komprimierungssystemen. Dafür gibt es eine Reihe von Gründen:

Als Ergebnis dieser leistungsstarken Kombination aus verlustfreier und verlustbehafteter Komprimierung können animierte Videos viel kleiner werden als ihre GIF-Pendants.

Google schätzt die durchschnittliche Reduzierung auf etwa 64 % der Originalgröße eines GIFs bei verlustbehafteter Komprimierung und 19 % bei verlustfreier Komprimierung.

Unnötig zu sagen, dass es nichts gibt, was WebP schlagen kann, wenn es um Geschwindigkeit geht und gleichzeitig die Bildintegrität gewahrt bleibt.

„

Akzeptanz von WebP bei Browsern, Geräten und CMS

Wie Sie sich vorstellen können, wurde WebP bei der ersten Veröffentlichung nur von den Browsern und Geräten von Google unterstützt. Im Laufe der Zeit haben jedoch andere Plattformen damit begonnen, WebP-Bilder zu unterstützen.

Allerdings hat WebP immer noch keine universelle Unterstützung, was Webdesignern, die dieses Bildformat standardmäßig verwenden, Probleme bereiten kann.

Lassen Sie uns einen Blick darauf werfen, wo Sie volle Akzeptanz Ihrer WebP-Bilder erwarten können, wo nicht, und dann werden wir besprechen, was Sie tun können, um diesen Schluckauf zu umgehen.

Zum Zeitpunkt des Schreibens dieses Artikels im Jahr 2019 hat Can I use… die folgenden Plattformen berücksichtigt, die WebP unterstützen:

Die neuesten Versionen der folgenden Plattformen werden unterstützt:

• Rand
• Feuerfuchs
• Chrom
• Oper
• Opera Mini
• Android-Browser
• Opera Mobile
• Chrome für Android
• Firefox für Android
• UC-Browser für Android
• Samsung-Internet
• QQ-Browser
• Baidu-Browser

Die Plattformen, die die Unterstützung weiterhin zurückhalten, sind:

• Internet Explorer
• Safari
• iOS-Safari
• KaiOS-Browser

Es sind nicht nur Browser, die sich über WebP streiten. Bildbearbeitungssoftware und Content-Management-Systeme sind es auch.

ImageMagick, Pixelmator und GIMP unterstützen beispielsweise alle WebP. Mit Sketch können Benutzer Dateien als WebP exportieren. Und für Software, die WebP nicht nativ unterstützt, wie Photoshop, können Benutzer normalerweise ein Plugin installieren, mit dem sie Dateien als WebP öffnen und speichern können.

Content-Management-Systeme befinden sich an einem ähnlichen Punkt. Einige haben die Führung übernommen und ihre Benutzer auf WebP umgestellt, unabhängig davon, ob sie ihre Dateien in diesem Format hochgeladen haben oder nicht. Shopify und Wix sind zwei Website-Builder, die Bilder automatisch im WebP-Format konvertieren und bereitstellen.

Obwohl es andere Plattformen gibt, die WebP nicht nativ unterstützen, gibt es normalerweise Erweiterungen oder Plugins, mit denen Sie WebP-Bilder hochladen oder hochgeladene Bilder in dieses Format der nächsten Generation konvertieren können.

WordPress ist eine dieser Plattformen. Drupal ist ein weiteres beliebtes CMS, das Benutzern WebP-Module zur Verfügung stellt, die WebP-Unterstützung hinzufügen. Magento ist noch eine andere.

Es ist ziemlich selten, keine Art von Add-On-Unterstützung für WebP zu finden. Das einzige mir bekannte Beispiel, das dies nicht akzeptiert, ist Squarespace.

Herausforderungen bei der Konvertierung und Bereitstellung von WebP

Okay, WebP hat also keine 100%ige Unterstützung im Web. Jedenfalls noch nicht. Das ist okay. Zum größten Teil haben wir eine Art Problemumgehung in Bezug auf das Hinzufügen von Unterstützung für die Tools, die wir zum Entwerfen und Erstellen von Websites verwenden.

Aber was machen wir mit dem Browserteil? Wenn unsere Besucher auf einem iOS-Gerät angezeigt werden, wie stellen wir sicher, dass ihnen immer noch ein Bild angezeigt wird, wenn unser Standardbild WebP ist?

Zunächst müssen Sie wissen, wie Sie Bilder in WebP konvertieren.

Letztes Jahr hat der Frontend-Entwickler Jeremy Wagner genau zu diesem Thema einen Leitfaden für das Smashing Magazine geschrieben. Darin behandelt er die Konvertierung in WebP mit:

• Skizzieren,
• Photoshop,
• Die Befehlszeile,
• Basch,
• Node.js,
• Schluck,
• Grunzen,
• Webpaket.

Jede dieser Optionen hilft Ihnen, Ihre PNGs und JPGs in WebPs zu konvertieren. Ihre Bildbearbeitungssoftware bringt Sie jedoch nur zur Hälfte ans Ziel.

Es übernimmt die Konvertierung, hilft Ihnen aber nicht dabei, Ihren Ursprungsserver so zu ändern, dass er weiß, wann WebPs und wann ein herkömmliches Bildformat an Besucher geliefert werden soll.

Mit einigen dieser Methoden können Sie bestimmen, wie Ihr Server Bilder liefert, basierend auf den Beschränkungen der Browser Ihrer Besucher. Dennoch ist es ein wenig Arbeit, die Ursprungsserver zu ändern, um dies zu erreichen. Wenn Sie sich damit nicht wohlfühlen oder sich nicht damit befassen möchten, hat KeyCDN eine Lösung.

Die Lösung: Vereinfachen Sie die WebP-Bereitstellung mit KeyCDN

KeyCDN weiß, wie wichtig es ist, eine Website zu haben, die blitzschnell geladen wird. Das ist es, was KeyCDN im Geschäft ist. Aus diesem Grund ist es nicht verwunderlich, dass es eine integrierte WebP-Caching- und Bildverarbeitungslösung entwickelt hat, die Entwicklern dabei hilft, den Besuchern die richtigen Dateiformate einfacher bereitzustellen.

Was ist WebP-Caching?

Caching ist ein wesentlicher Bestandteil, um eine Website schnell laufen zu lassen. Und WebP-Caching wird es nur noch besser machen. Im Wesentlichen handelt es sich um eine Form der Inhaltsaushandlung, die im HTTP-Header stattfindet.

Es funktioniert so:

Jemand besucht eine Website, auf der das WebP-Caching von KeyCDN aktiviert ist. Der Browser des Besuchers sendet als Teil der Anfrage einen accept -HTTP-Header mit einer Liste bevorzugter Asset-Typen an den Server. Aber anstatt zum Ursprungsserver (beim Webhost) zu gehen, wird die Anfrage vom Edge-Server (beim KeyCDN) verarbeitet. Der Edge-Server überprüft die Liste der akzeptablen Dateitypen und sendet als Antwort einen content-type Header.

Hier ist ein Beispiel, wie das aussehen könnte:

 curl -I 'https://ip.keycdn.com/example.jpg' -H 'accept: image/webp' HTTP/2 200 server: keycdn-engine date: Thu, 06 Jun 2019 08:29:50 GMT content-type: image/webp content-length: 56734 last-modified: Tue, 14 May 2019 23:36:28 GMT etag: "5cdb50fc-1040a" expires: Thu, 13 Jun 2019 08:29:50 GMT cache-control: max-age=604800 x-ip: 1 x-ip-info: osz=56734 odim=700x467 ofmt=webp x-cache: HIT x-shield: active x-edge-location: chzh access-control-allow-origin: * accept-ranges: bytes

Ein Beispiel für eine Inhaltstypanforderung, die KeyCDN an Browser sendet, die WebP akzeptieren. (Quelle: KeyCDN)

Für Google Chrome content-type: image/webp automatisch akzeptiert und die zwischengespeicherten WebP-Assets würden an den Browser geliefert.

Für Safari-Benutzer hingegen würde die Anfrage nicht akzeptiert werden. Aber das ist OK. Ihr CDN weiß, welches Dateiformat stattdessen gesendet werden soll. In der ersten Zeile im obigen Beispiel sehen Sie, dass das ursprüngliche Bildformat JPG ist, also die Version der Datei, die geliefert würde.

Wie Sie sehen, ist es nicht erforderlich, den Ursprungsserver zu ändern oder mehrere Versionen Ihrer Dateien vorzubereiten, um die WebP-Kompatibilität zu berücksichtigen. Das KeyCDN WebP-Caching kümmert sich um alles.

Wie verwenden Sie das KeyCDN WebP-Caching?

Es gibt zwei Möglichkeiten, wie KeyCDN-Benutzer die WebP-Caching-Funktion nutzen können.

Bildverarbeitung durch KeyCDN

Das erste erfordert nichts weiter als das Umlegen eines Schalters und das Einschalten der Bildverarbeitung von KeyCDN. Nach der Aktivierung wird der accept -Request-Header automatisch geladen.

Natürlich können Sie den Bildverarbeitungsdienst für mehr als nur WebP-Caching nutzen. Sie können es verwenden, um die Größe, den Zuschnitt, die Drehung, die Unschärfe und andere physische Attribute Ihrer gelieferten Bilder anzupassen. Aber wenn Sie versuchen, Ihr Bildbereitstellungssystem zu vereinfachen und die Dinge einfach mit WebP beschleunigen möchten, aktivieren Sie einfach die Funktion und lassen Sie KeyCDN die Arbeit erledigen.

WebP-Caching über Ihren Ursprungsserver

Angenommen, Sie haben Ihre eigenen WebP-Bildelemente erstellt. Sie können weiterhin die Vorteile der WebP-Caching-Lösung von KeyCDN nutzen.

Dazu müssen Sie Ihre WebPs korrekt generieren. Auch hier ist ein Link zu der Anleitung, die Ihnen zeigt, wie das geht.

Es liegt dann an Ihnen, Ihren Ursprungsserver so zu konfigurieren, dass er WebPs nur ausliefert, wenn accept: image/webp vorhanden ist. KeyCDN bietet einige Beispiele dafür, wie Sie dies mit Nginx tun:

 # http config block map $http_accept $webp_ext { default ""; "~*webp" ".webp"; } # server config block location ~* ^(/path/to/your/images/.+)\.(png|jpg)$ { set $img_path $1; add_header Vary Accept; try_files $img_path$webp_ext $uri =404; }

KeyCDN zeigt, wie Sie den Ursprungsserver mit Nginx ändern können, um Ihre eigenen zwischengespeicherten WebP-Assets bereitzustellen. (Quelle: KeyCDN)

Und mit Apache:

 <IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{HTTP_ACCEPT} image/webp RewriteCond %{DOCUMENT_ROOT}/$1.webp -f RewriteRule ^(path/to/your/images.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1] </IfModule> <IfModule mod_headers.c> Header append Vary Accept env=REDIRECT_accept </IfModule> AddType image/webp .webp

KeyCDN zeigt, wie Sie den Ursprungsserver mit Apache ändern können, um Ihre eigenen zwischengespeicherten WebP-Assets bereitzustellen. (Quelle: KeyCDN)

Offensichtlich gibt Ihnen diese Option mehr Kontrolle über die Verwaltung Ihrer Bildformate und wie sie den Besuchern bereitgestellt werden. Wenn Sie jedoch neu in der Verwendung von WebP sind, ist das automatisierte WebP-Caching und die Bildverarbeitung von KeyCDN wahrscheinlich die beste Wahl.

Eine Alternative für WordPress- und Magento-Designer

Wenn Sie Websites in WordPress oder Magento entwerfen, verfügt KeyCDN über Plugins, mit denen Sie WebP-Unterstützung und Caching hinzufügen können.

Für WordPress verwenden Sie den benutzerdefinierten Cache Enabler von KeyCDN zusammen mit Optimus.

Cache Enabler prüft, ob Ihre Bilder eine WebP-Version haben. Wenn es existiert und der Browser des Besuchers es unterstützt, wird es in der zwischengespeicherten Datei geliefert. Wenn es nicht existiert, wird einfach das vorhandene JPG, PNG oder GIF verwendet.

Magento-Entwickler haben auch eine vereinfachte Problemumgehung für die Konvertierung und Bereitstellung von WebP. Zuerst müssen Sie die Webp-Erweiterung installieren. Dann müssen Sie die WebP-Binärdateien auf Ihrem Server konfigurieren.

Einpacken

Nicht umsonst hat sich Google die Mühe gemacht, ein neues Bildformat zu entwickeln und es wird von immer mehr Browsern, Designsystemen und Content-Management-Systemen unterstützt.

Bilder können Websites, die ansonsten schlank und gemein aufgebaut sind, viele Probleme bereiten. Wenn sie nicht in der richtigen Größe hochgeladen werden, wenn sie nicht komprimiert sind und wenn das Caching nicht aktiviert ist, könnten Ihre Bilder der Grund dafür sein, dass die Geschwindigkeit Ihrer Website Besucher abschreckt.

Aber mit WebP wird Ihre Website sicher schneller geladen. Darüber hinaus muss kein Kompromiss zwischen Bildqualität (oder Quantität!) eingehen, um diese Geschwindigkeit zu erreichen. WebP komprimiert Dateien effizient und bewahrt dabei die Integrität des Bildinhalts.

Wenn Sie wirklich Schwierigkeiten haben, die Geschwindigkeit Ihrer Website zu erhöhen, sollte WebP das nächste Tool sein, an das Sie sich wenden, um Hilfe zu erhalten.