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.
⭐ Newsletter abonnieren und Foto-E-Book downloaden
Wir zeigen dir die schönsten Orte der Welt, nehmen dich mit auf spannende Outdoor-Abenteuer und bringen deine Foto-Skills auf ein neues Level. Außerdem verpasst du nie wieder die neuesten → Fotokurstermine und unser Gewinnspiel für alle Abonnenten.
Unser Dankeschön
Als Dankeschön schenken wir dir unser Foto-E-Book "So gelingt dir das perfekte Landschaftsfoto". Hier kannst du dich kostenlos zum → Newsletter anmelden.
Hallo Florian,
spannender Artikel. Nur habe ich eine Verständnisfrage: Warum werden denn alle deine Bilder auf dieser Seite (zumindest diesem Blog-Artikel) doch als .jpg und nicht als .webp ausgeliefert? Mein Chrome Browser könnte diese ja eigentlich darstellen. Und auf deinem Server liegen ja die entsprechenden .webp-Versionen der Bilder.
Wenn ich ein Bild mit rechter Maustaste anklicke und “Bild in neuem Tab öffnen” bekomme ich immer nur eine .jpg-Version angezeigt? Ändere ich dann .jpg in der Browserzeile gegen .webp wird mir die entsprechende webp-Variante angezeigt.
(Beispiel: https://phototravellers.de/wp-content/uploads/2019/01/xnconvert-einstellungen.jpg)
Ansonsten: Danke, sehr verständlich erklärt!
Gruß, Tom
Hallo Tom,
wir hatten ein paar technische Probleme und haben inzwischen das Verfahren etwas geändert. Bei uns wollte aus nicht ersichtlichen Gründen Shortpixel nicht mehr so recht funktionieren. Ich muss den Artikel dahingehend einmal überarbeiten.
Wann genau jpg und wann WebP ausgeliefert werden, weiß ich nicht genau. Mein Chrome zeigt die WebP-Dateien an (auch in diesem Artikel), mein iPhone zeigt die Jpgs an. Die Google-Tools jedenfalls registrieren, dass wir die WebP-Variante nutzen.
Viele Grüße
Florian
Hallo Florian,
danke für die schnelle Rückmeldung. Aber das Wichtigste ist ja: “Die Google-Tools jedenfalls registrieren, dass wir die WebP-Variante nutzen.”
Euch ein schönes Wochenende und Gruß aus Köln, Tom
Danke und einen guten Wochenstart :-)
Hey Leute
Gerade euren interessanten Artikel durchgelesen. Ich komprimiere meine Bilder immer bis ans Limit vor dem upload. Ein 1000x800px grosses Bild wird mit meinem Workflow weit unter 100KB ohne Sichtbaren Qualiverlust. Wie sieht das mit diesem neuen Format aus? wie gross (oder wie klein) wir die erwähnte Datei ?
Was aber noch fast wichtiger ist: unbedingt einen Hinweis im Artikel anbringen, dass die Leute vor dem ganzen Komprimieren und Plugin installieren und Ftp hochladen etc ein Backup der Webseite machen. Und zwar eines der Files sowie der Datenbank.
Ansonsten super sache diese neue Format. Die Technik steht nie still ;)
Grüsse, Urs
Hi Urs,
das weiß ich nicht, das musst du selbst einmal ausprobieren. Geht ja schnell :-)
Mit dem Hinweis, das stimmt, das trage ich nach.
Viele Grüße
Florian
Interessantes Thema, hab mich bisher nicht mit webp befasst.
Erste Versuche mit online Convertern haben gezeigt das ich bei meinen Fotos die Dateigrösse um bis zu 30% verkleinern kann.
Mal schauen ob man die Bilder auch direkt ab der eigenen Festplatte als webp hochladen und in den eigenen Blog integrieren kann.
Hallo Marco,
Ja klar geht das. Das ist ja in Teil 2 des Beitrags beschrieben. Aber du musst halt dem Blog den Befehl geben, dass webp anzuzeigen. Das ist natürlich mega praktisch mit Shortpixel.
Viele Grüße
Florian