WebP: so stellst du deinen Blog mit Shortpixel um

So baust du das WebP-Format in deinen Blog ein

Eine Anleitung

Obwohl Google schon lange auf sein WebP-Format für Bilder setzt, hat sich das relativ neue Bildformat noch nicht so richtig durchgesetzt. Das wird sich jetzt wohl ändern. Wir verraten dir, warum und wie du mit WebP deinen Blog in eine neue Geschwindigkeitsliga katapultierst.

Was ist dieses WebP?!?

Zunächst einmal klären wir aber die Frage: Was ist WebP überhaupt? Das ist ein bereits 2010 von Google entwickeltes Bilderformat für verlustbehaftet oder verlustfrei komprimierte Bilder. Die Bilder können statisch oder animiert sein – das spielt keine Rolle. Der Clou: WebP-Bilder sind deutlich kleiner als vergleichbare Bilder im Jpg-Format. Wir haben unsere Bilder zum Teil um 50 Prozent und mehr verkleinert. Bei der Qualität sieht man dabei keinen Unterschied. Der große Vorteil: Kleinere Bilder werden schneller geladen, was deinen Blog insgesamt viel flotter macht. Und wir wissen ja alle: Google liebt schnelle Blogs! Es gibt also viele Gründe, auf das neue Bildformat zu setzen.

WebP ist auf dem Vormarsch

Trotz der Vorteile, die das WebP-Format bietet, hat es sich noch nicht ganz durchgesetzt. In Deutschland soll nur etwa die Hälfte der Internetnutzer über einen WebP-kompatiblen Browser verfügen, in den USA sollen es etwa drei Viertel der Nutzer sein. Google Chrome und Android Handys zeigen WebP-Bilder natürlich an – beides kommt ja aus dem Haus von Alphabet (dem Google-Mutterkonzern). Microsoft Edge ist erst seit Ende 2018 dabei. Firefox hatte sich bisher geweigert, das WebP-Format zu unterstützen. Bis jetzt. Die Ende Januar 2019 erschienene Version Mozilla Firefox 65 unterstützt jetzt auch WebP. Es ist also nur noch eine Frage der Zeit, bis nahezu alle Internetnutzer WebP-Bilder sehen können.

Wir haben es getan!

Wir haben bei uns auf dem Blog ebenfalls das neue Format integriert. Dabei musst du beachten: Da noch lange nicht jeder Internetnutzer WebP-Bilder angezeigt bekommt, muss das Bild auch immer als Jpg- oder Dng-Datei auf dem Server liegen. Die Umsetzung ist weniger kompliziert als gedacht. Hier möchte ich einmal den Workflow auf unserem Blog beschreiben.

Shortpixel erledigt alles von alleine

Wir nutzen schon lange das Komprimierungs-Tool Shortpixel (wenn du dich → hier* über uns bei Shortpixel anmeldest, bekommst du 100 Bildervolumen im Monat extra). Das WordPress-Plugin ist in der Grundversion kostenlos. Nur wer viele Bilder komprimieren will, muss dafür zahlen. Der Preis ist angesichts der enormen Größenersparnis bei Bildern aber absolut okay. Das Plugin komprimiert Jpg-Bilder automatisch beim Upload in den Blog. Schon die normalen Jpg-Bilder sind nach der Komprimierung mit Shortpixel (das passiert vollautomatisch im Hintergrund) rund ein Fünftel kleiner, zumindest bei uns. An der Bildqualität siehst du nichts! Es gibt in dem Plugin auch die Möglichkeit, die Stärke der Komprimierung einzustellen. Ein wichtiger Hinweis noch: Du solltest natürlich immer ein Backup deines WordPress machen. Sicher ist sicher!

Wir haben die Komprimierung auf Mittel (Glossy) gestellt. Wie gesagt, hier erkenne ich keinen Unterschied zum Original (die im Übrigen auf Wunsch in einem Extraordner auf deinem Server gespeichert werden, nur für den Fall der Fälle).

In Shortpixel gibt es unter dem Shortpixel-Reiter „Erweitert“ auch die Option „Also create WebP versions of the images, for free.“ Genau das solltest du tun. Lädst du jetzt neue Bilder in deinen Blog, erstellt Shortpixel von jedem dieser Bilder auch eine WebP-Version. Und das kostenlos. Damit alleine ist es aber noch nicht getan. Jetzt muss dem Browser deines Lesers, der auf deinen Blog kommt, ja noch gesagt, dass es eine WebP-Version des Bildes gibt.

Auch hier bietet Shortpixel eine tolle Funktion an. „Deliver the WebP versions of the images in the front-end„. Wenn du diese Option aktivierst, kommt noch einmal die Auswahl:

• Without altering the page code (via .htaccess): Wir sind Reiseblogger und keine WordPress-Programmierer .-) Das haben wir nicht getestet. Wenn dich diese Funktion interessiert, musst du → hier weiterlesen oder den Shortpixel-Support anschreiben. Der Shortpixel-Support antwortet immer sehr schnell.
• Using the <PICTURE> tag syntax: Das ist die Option, die wir bei uns verwenden und die bei uns auch ohne Probleme funktioniert. Shortpixel schreibt dazu: „Jedes <img> wird durch einen <picture>-Tag ersetzt, der auch das WebP-Bild für jene Browser zur Auswahl stellt, die dies unterstützen. Außerdem wird die Datei picturefill.js für solche Browser geladen, die den <picture>-Tag nicht unterstützen. Falls du das Plugin „Cache Enabler“ verwendest (Anmerkung: das tun wir nicht), musst du dies nicht aktivieren, weil deine WebP-Bilder bereits von diesem Plugin verarbeitet werden. Bitte mache einen Test vor Verwendung dieser Option, da es zu Darstellungsproblemen kommen könnte, falls die von deinem Theme verwendeten Stylesheets von der Position deines <img>-Tags abhängen.“

Nach Aktivierung der Option Using the <PICTURE> tag syntax hat das Plugin (nach einer zusätzlichen Warnung, das bitte erst zu testen) wie „angedroht“ in allen Beiträgen automatisch die <img>-Tags durch das <picture>-Tag ersetzt. Bei uns machte das keinerlei Probleme. Aber jeder WordPress-Blog und jedes Theme sind anders. Du solltest vorher wirklich dringend testen, ob die Umstellung bei dir problemlos funktioniert.

Diese Optionen sind bei uns in Shortpixel aktiviert.

Was der Unterschied zwischen „Only via WordPress hooks“ und „Global (processes the whole output buffer before sending the HTML to the browser)“ ist, habe ich den Shortpixel-Support gefragt:

Only via WordPress hooks (like the_content, the_excerpt, etc): „It applies the changes before the HTML code is generated.“

Global (processes the whole output buffer before sending the HTML to the browser): „Makes the substitutions in the final HTML code generated by WP and the plugins.“

Als Nicht-Programmierer ist mir der Unterschied leider trotzdem nicht so ganz klar. Aber: Der Shortpixel-Support rät, die Option „Global“ zu aktivieren. Wenn es Probleme bei der Darstellung auf dem Blog gibt, sollte man die Option „Only via WordPress hooks“ testen. Falsch machen kannst du hier nichts, beide Optionen sind reversibel (lassen sich also einfach ein- und ausschalten, ohne das an deinem Blogcode etwas Tiefgreifendes geändert wird).

Ab nun werden alle deine Bilder, die du als Jpg auf deinen Blog lädst, automatisch auch als WebP-Datei gespeichert und bei Bedarf an den Browser des Lesers ausgeliefert. Unterstützt der Browser kein WebP-Format, wird weiterhin die Jpg-Datei angezeigt.

Alte Bilder auf dem Blog komprimieren

Du kannst sogar alte Bilder im Blog auf WebP umstellen. Dazu musst du in Shortpixel die Sammelverarbeitung starten. Hier kannst du alle alten Bilder auf dem Blog komprimieren und – wenn die Option aktiviert ist – gleichzeitig eine WebP-Version erstellen. So einfach geht das.

Willst du auch die alten Bilder auf deinem Blog komprimieren, musst du die Sammelverarbeitung starten.

Achtung, Stolperfalle

Es gibt aber eine kleine Stolperfalle. Die Aufmacher-Bilder (die dann an verschiedenen Stellen im Blog angezeigt werden) werden bei uns automatisch erstellt. Ich lade also ein Aufmacherbild in den Beitrag. Das wird nun automatisch in alle möglichen Formaten (das sind wirklich viele) verwandelt.

Es gibt dann etwa ein Bild, das heißt „Aufmacher-180×180“. Die automatisierten Aufmacherbilder (so nenne ich das jetzt einfach mal) sind aber nicht wirklich zu gebrauchen. Heißt, ich suche die sechs Formate raus, die wir für den Blog brauchen und baue diese sechs Aufmacherbilder selbst in Photoshop. Diese Bilder lade ich dann über einen FTP-Programm wie Filezilla (→ hier downloaden) direkt auf den Server und überschreibe damit die automatisiert entstandenen Aufmacherbilder.

Jetzt gibt es zwei Probleme: Durch diesen Schritt werden die Jpg-Dateien, die ich auf den Server lade, nicht von Shortpixel zusätzlich als WebP-Datei gespeichert. Noch schlimmer aber ist, dass Shortpixel von den automatisiert entstandenen Aufmacherbildern (die ja nicht zu gebrauchen sind) eine WebP-Datei erstellt hat. Heißt: Wer mit einem WebP-fähigen Browser auf den Blog kommt, sieht auf der Startseite und auf den Unterseiten ganz fürchterliche Aufmacherbilder.

Um das zu verhindern, muss ich in einem nächsten Schritt die händisch in Photoshop erstellten Aufmacherbilder ebenfalls als WebP speichern und damit die von Shortpixel erstellten WebP-Bilder (per FTP) überschreiben.

Konvertierung per XnConvert

Ich war lange auf der Suche nach einem guten Tool. Photoshop speichert leider keine Bilder im WebP-Format. Das geht offenbar nur mit einem Plugin, das ich aber einfach nicht zum Laufen bringe.

Es gibt im Internet einige Tools, die Jpg-Bilder nach WebP umwandeln. Einmal waren die WebP-Bilder größer als die Jpgs (das liegt an den Qualitäts-Einstellungen), einmal konnte ich nur zehn Bilder am Tag umwandeln und einmal musste ich ein teures Abo abschließen.

Nach langer Recherche habe ich das kostenlose Programm XnConvert (→ hier downloaden) entdeckt und getestet. Hier kannst du auf einen Schlag Tausende Jpgs in ein bis zwei Minuten umwandeln und auch noch zahlreiche Einstellungen vornehmen. Die nach WebP konvertierten Jpgs lade ich dann einfach per FTP-Programm auf unseren Server.

Hier kannst du in XnConvert die Qualität deiner Bilder einstellen. Bei Qualitätsstufe 70 waren bei uns fast alle Bilder tadellos. Wir haben auch Qualität 80 getestet, hier sind die Bilder aber zu groß! Auch die Option „Verlustfrei“ erzeugt sehr große Dateien (deutlich größer als das ursprüngliche Jpg). Wichtig: Bei Dateiname musst du alle Zusätze hinter dem „Filename“ löschen, ansonsten heißen deine Bilder anders! Die Bilder müssen beim Upload auf deinen Server den gleichen Dateinamen wie die Jpgs haben – nur eben mit der webp-Endung und nicht mit der jpg-Endung.

Wieviel Platz kann man mit WebP sparen?

Das kann man pauschal nicht sagen. Es kommt natürlich darauf an, welche Qualitätsstufe du nutzt. In XnConvert stelle ich die Qualität nach einigem Testen nun immer auf 70. Die meisten Bilder sind hier einwandfrei, es gibt nur ein paar wenige, bei denen man die Komprimierung erkennt. Das kommt immer aufs Motiv an. Problemetisch sind Fotos mit großen Flächen (das ist ein Kritikpunkt bei WebP). Bei der Qualitätsstufe 80 habe ich aber keinen Unterschied mehr erkannt. Hier werden die Dateien aber zu groß. Drehst du die Qualität indes zu weit runter, siehst du massive Qualitätseinbußen (genau wie bei Jpg). Du musst also einen Mittelweg finden und zunächst ein wenig testen.

Bei der Dateigröße ist der Unterschied enorm. Ein Beispiel: Ein Jpg mit 133KB habe ich mit WebP auf 79KB runtergerechnet. Ein anderes Jpg mit 202 KB habe ich auf 98 KB verkleinert. Das sind enorme Werte! Und wie gesagt: Zu sehen ist an der Bildqualität in der Regel nichts.

Hier der Größenvergleich zwischen Jpg- und WebP-Bildern.

Viel Spaß auf der Überholspur

So einfach baust du das WebP-Format in deinen Blog. Und jeder weiß: Google liebt schnelle Blogs. Mit dem neuen Bildformat sollte dein Blog in Sachen Geschwindigkeit deutlich zulegen. Ich hoffe, dir mit meiner Anleitung ein bißchen geholfen zu haben.

Jetzt anmelden: Der Newsletter für Abenteurer und Fotografen

Werde Teil unserer ganz besonderen Community. In unserem kostenlosen → Newsletter erzählen wir dir Geschichten, die sonst niemand kennt. Du erhältst ganz private Einblicke und erfährst Dinge, die wir nicht einmal auf Instagram verraten.

Übrigens veranstalten wir auch ein monatliches Gewinnspiel unter allen Abonnenten. Werde jetzt → Teil der Phototravellers-Community :-)

Natürlich sind wir auch auf → Instagram, → Facebook, → Youtube und → Pinterest unterwegs. Vielleicht sehen wir uns ja auch hier. Wir würden uns sehr freuen!