Der “neue” Standard für Bildformate im Internet

Überraschung: WebP ist keine neue Entwicklung!

„WebP ist der neue Standard für Bildformate im Internet“, „Verbessertes Google Ranking durch WebP“, „Bessere Kompression trotz vorhandener Transparenz“ … Diese oder ähnliche Sätze haben Sie gelesen oder im Gespräch mit Ihrem Kollegen aufgeschnappt und möchten sich kurz darüber informieren, was es eigentlich mit diesem webP Bildformat auf sich hat. Wir möchten Ihnen heute einen kurzen Einblick sowie eine kleine Anleitung zur Hand geben, worauf Sie achten müssen und wie Sie die Bilder in Ihrer Website oder Ihrer WordPress Installation nutzen können.

Google kündigte das neue Bildformat für das Internet bereits 2010 an und führte es in seine Produkte ein – damals unter anderem Google+. Das führte dazu, dass das Unternehmen 50 Terabyte pro Tag einsparte!

Aber Moment mal… 2010? Warum benutzt denn heute nicht schon jeder webP als den quasi Standard für Bilder?

Die Mühlen des Internets mahlen teilweise sehr langsam – trotz einer eigentlich sehr schnelllebigen Branche. Das Internet und faktisch jedes Gerät das Bilder produziert, verwendet JPG als Format. Die Kompressionstechnik dahinter liefert ebenfalls sehr gute Ergebnisse. Deshalb war es für Google schwierig die Vorteile von dem neuen Format an den Mann oder die Frau zu bringen. Nach einer Weile zogen Firefox und Microsoft mit ihren Browsern nach. Von den „großen Browsern“ unterstützt es zurzeit – wie könnte es anders sein – nur Apple und Safari nicht.

Warum brauchen wir das webP Bildformat eigentlich? In der Regel wird bei der Webentwicklung auf die beiden Bildformate JPG oder PNG gesetzt, ab und zu auch SVG-Dateien, also skalierbare Vektorgrafiken. Letztere sind in Zeiten responsiver Webseiten sehr nützlich, aber können nur schwer die hochauflösenden, farbtiefen Bitmaps von pixelbasierten Bildformaten ersetzen.

„Ein Bild sagt mehr als tausend Worte“ ist ein Sprichwort, welches sich Webentwickler/innen und Designer/innen berechtigt zu Herzen genommen haben. – Dabei hat sich allerdings ein Problem entwickelt: Schon 2015 lag der Anteil des Gewichts von Bildern für Webseiten bei 64%. Tendenz steigend. Wie kann man also die Bandbreite von Nutzern schonen? Diese Frage hat sich offenbar auch Google gestellt. Damals arbeitete Google an einem neuen Standard für Videoformate und da Videos nichts anderes sind als Bilder, die sehr schnell hintereinander abgespielt werden, sind die Entwickler zufällig auf die Idee gekommen, die Kompressionstechnik auch auf Bilder anzuwenden. Das Ergebnis war das neue webP Bildformat und webM für Videos.

WebP vereint die Fähigkeiten von JPG und PNG. PNG verwendet man im Web immer dann, wenn man Transparenzen oder eine möglichst verlustfreie Kompression benötigt. JPG im Gegenzug verwendet man hauptsächlich wegen der kleineren Kompressionsrate. Bei einer Kompressionsrate von 70-80% sieht man mit dem menschlichen Auge häufig kaum einen Unterschied zum Original. Auch PNG kann Bilder mit dem PNG-8 Format verlustbehaftet komprimieren. Allerdings sollte die Farbanzahl dann relativ gering sein – wie z.B. bei Infografiken. PNG-8 beherrscht ebenfalls Transparenzen. WebP bietet zwei grundlegende Kompressionsverfahren: Lossy compression (verlustbehaftete Kompression), welche auch Transparenzen ermöglicht, sowie lossless compression (verlustfreie Kompression), welche hauptsächlich dann eingesetzt wird, wenn die Qualität das wichtigste Kriterium darstellt. Die lossy compression Methode stellt dabei das Schweizer Taschenmesser für das Webdesign dar. Man kann damit nicht nur reine Bilddaten komprimieren, sondern auch png und jpg noch weiter optimieren – in dem man sie ersetzt. Dies verringert den Speicherplatzbedarf teils deutlich. Die Qualitätsverluste sind zumindest für uns kaum feststellbar.

Wenn wir also zukünftig WebP verwenden entfällt zukünftig die Auswahl des passenden Formats. Des Weiteren unterstützt die lossy compression auch Transparenzen, was uns die Überlegungen für das richtige Format ebenso erleichtert.

Noch müssen wir klären, wie man WebP heutzutage in seinen eigenen Projekten einbindet. Hierfür möchten wir jetzt exemplarisch auf eine freies WordPress-Plugin eingehen – sowie die Möglichkeit, das ganze per Hand in seine selbst geschriebenen Webseiten einzubinden.

WebP Integrieren in WordPress mit einem Plugin
Kommen wir zum Plugin, welche uns die WebP – Integration in WordPress leicht macht: das kostenfreie Plugin WebP Express Wir haben ein kostenfreies Plugin deswegen gewählt, damit jeder ohne großen finanziellen Aufwand die Vorteile von WebP verwenden kann. Der große Vorteil an WebP Express ist, dass es beim Hochladen der Bilder diese automatisch in das WebP – Format konvertiert.

Sollte schon eine Installation vorhanden sein, kann man mit einer Stapel-Konvertierung alle Bilder komplett in WebP konvertieren.

Das Plugin selbst braucht keine großen Einstellungen, bevor es funktioniert. Eine kleine Einstellung sollte man allerdings vornehmen im Einstellungsteil Alter HTML. Hier direkt die erste Checkbox aktivieren, denn damit sorgt man dafür, dass das WebP-Bild nicht in den normalen img-Elementen einer HTML-Quelldatei liegt, sondern im picture-Element. Ursprünglich entwickelt um responsive Bilder bereit zu stellen, wählt dieses Tag das erste Bild aus, dass der Browser anzeigen kann. Zusätzlich kann man noch die Checkbox Dynamically load picturefill.js on old browsers aktivieren. Bei sehr alten Browsern kann es passieren, dass das picture-Element nativ nicht unterstützt wird. Dies wird dann mit JavaScript nachgeliefert.

Neue Bilder werden beim Hochladen direkt konvertiert, deswegen dauert auch der Upload-Vorgang etwas länger. Möchten Sie alle Ihre weiteren Medien direkt konvertieren wählen Sie hierfür die Option „Bulk Convert“ ganz unten bei „Conversion” aus.

Vorsicht: Je nachdem wieviel Bilder Sie bereits auf Ihrer WordPress-Installation hochgeladen haben, dauert der Vorgang entsprechend länger.

Lassen Sie das Fenster offen und das Plugin die Arbeit fertigstellen. Wenn alles erfolgreich gewesen ist sollten nun anstatt der JPG oder PNG Dateien WebP – Bilder an den Browser ausgeliefert werden. Dies testen Sie am leichtesten in dem Sie auf Ihre Website gehen und ein ehemaliges JPG oder PNG mit „Rechtsklick – Grafik speichern unter“ (wenn Sie den Firefox verwenden, bei anderen Browsern funktioniert dies aber ähnlich) auswählen, sollte beim Dateinamen .webp stehen (sofern sie bei Windows „Die Erweiterungen bei bekannten Dateitypen ausblenden“ deaktiviert haben). Falls Sie das nicht haben laden Sie sich das Bilder herunter und prüfen bei den Dateieigenschaften ob es sich um ein .webp-Bild handelt.

WebP in ein handprogrammiertes Projekt integrieren

Sollten Sie Ihre Website handprogrammiert haben oder keine Möglichkeit haben das Feature via Plugin nachzuliefern, ist es natürlich auch möglich das ganze manuell zu integrieren. Bei dieser Anleitung beziehen wir uns auf Apache als Webserver, da wir diesen aktuell hauptsächlich betrieblich verwenden.

Schritt 1: Konvertieren der Bilder in das WebP Format Zuerst möchte Ich Ihnen zeigen, wie Sie Ihre Dateien in webP konvertieren. Dafür gibt es mehrere Wege, entweder über Online Converter oder Programmen, die einem diese Arbeit abnehmen. Eine gute Alternative bietet das Tool xnconvert. Sobald Sie das Programm installiert haben, können Sie per Drag&Drop Ihre Bilder in dem Programm ablegen. Mit einem Klick auf den „Ausgabe“–Tab können wir unter anderem den Ausgabeordner bestimmen, aber auch in welchem Format das Programm die Bilder speichern/konvertieren soll.

Auf dem Einstellungen…-Button kann man noch die Kompressionsrate einstellen, falls einem der voreingestellte Wert nicht gefällt. Dann noch einen Klick auf Starten und das Programm sollte das Ergebnis im Ausgabe Ordner ablegen.

Schritt 2: Anpassen des Apache Webservers Bei dem Webserver müssen wir eine kleine Anpassung der .htaccess Datei machen. Diese sollte sich in der Regel im Hauptverzeichnis Ihrer Domain befinden; falls Datei nicht existiert legen Sie notfalls eine Datei mit dem Namen .htaccess an. Der Punkt vor dem Namen ist wichtig. Übernehmen Sie folgende Zeilen in die .htaccess-Datei und speichern Sie die Datei ab.

Schritt 3: HTML-Quellcode Der letzte Schritt um unser WebP-Bild in unser Projekt einzutragen ist, folgenden HTML Code an der Stelle einzutragen, an dem wir das Bild sehen möchten. Dieses Konstrukt benutzen wir zukünftig anstatt eines einfachen IMG-Elements von HTML. Das IMG-Element innerhalb des Picture-Elements muss allerdings dort stehen um ein Fallback-Bild zu garantieren – ohne funktioniert das Picture-Element nicht!

Wenn alle Schritte befolgt wurden, sollte der Browser nun webP-Images anzeigen.

Vielen Dank für Ihr Interesse!

Ihr evolved-Team

Wir übernehmen keine Haftung für das Einbinden oder möglicher Fehler von WebP! Außerdem übernehmen wir keine Haftung bei der Nutzung der vorgestellten Plugins.

Wenn Ihnen Ihre Zeit zu wertvoll ist um sich mit dem Thema webP, der Performance oder dem Webdesign einer Webseite auseinander zu setzen,
nehmen Sie Kontakt mit den hierfür ausgebildeten Experten von der Werbeagentur Boppard auf!