In meinem kleinen Beispiel siehst du einen Vergleich des gleichen Bilds als PNG, JPG & WebP. <\/p>\n\n\n\n
Die Dateigr\u00f6\u00dfen sind wie folgt: PNG = 116kb, JPG = 23kb, WebP = 13kb<\/p>\n\n\n\n
Das WebP Bildformat ist also auch in meinem Test deutlich kleiner, als JPG & PNG.<\/p>\n\n\n\n Da ein Gro\u00dfteil der Dateigr\u00f6\u00dfe von Websites durch Bilder zustande kommt, kannst du mit der Umwandlung deiner Bilder in WebP also definitiv Ladezeit einsparen.<\/p>\n\n\n\n Das Format wird von so ziemlich allen g\u00e4ngigen Browsern unterst\u00fctzt. Lediglich der Internet Explorer unterst\u00fctzt sie nicht und Safari nur teilweise:<\/p>\n\n\n\n Selbst wenn Teile deiner Zielgruppe mit einem Browser ohne WebP Unterst\u00fctzung arbeitet, ist das kein Problem. In dieser Anleitung zeige ich dir, wie du mit WordPress WebP Bilder zwar auslieferst, aber f\u00fcr solche Browser auch die Originalbilder zur Verf\u00fcgung stellst.<\/p>\n\n\n\n F\u00fcr Grafiken wie Logos oder Icons ist \u00fcbrigens das Dateiformat SVG super geeignet. Alles dar\u00fcber erf\u00e4hrst du hier: Wie du in WordPress SVG Dateien erlaubst & hochl\u00e4dst<\/a><\/p>\n\n\n\n Egal ob du Photoshop, Affinity Photo oder Canva nutzt, von Haus aus bietet keines der \u00fcblichen Bildbearbeitungsprogramme einen Export des Bildes als WebP Datei an.<\/p>\n\n\n\n Trotzdem ist es kein gro\u00dfer Aufwand, WebP in WordPress zu nutzen, da es Tools und WordPress Plugins f\u00fcr diesen Zweck gibt. <\/p>\n\n\n\n Hier sind einige M\u00f6glichkeiten, wie du deine Bilder in das WebP Format umwandeln (lassen) kannst:<\/p>\n\n\n\n Ich empfehle den Weg \u00fcber das ShortPixel Image Optimizer Plugin, worauf die folgende Anleitung auch basiert.<\/p>\n\n\n\n Bevor du mit dieser Anleitung loslegst, lege ein frisches Backup deiner Website <\/a>an. Zwar kommt es hier in der Regel nicht zu Problem, aber sicher ist sicher.<\/p>\n\n\n\n Ich empfehle dir in dieser Anleitung das kostenlose Plugin ShortPixel Image Optimizer. Es hilft dir nicht nur bei der Erstellung und Auslieferung der WebP Bilder, sondern ist auch mein Lieblingsplugin zur automatischen Bildoptimierung.<\/p>\n\n\n\n Zun\u00e4chst navigierst du unter „Plugins“ -> „Plugin installieren“ und installierst dir das Plugin „ShortPixel Image Optimizer“.<\/p>\n\n\n\n Nach der Installation musst du einen API-Schl\u00fcssel anfordern, indem du deine E-Mail Adresse angibst. <\/p>\n\n\n\n Das ist notwendig, da die Verarbeitung der Bilder nicht auf deinem Server, sondern auf dem von Shortpixel durchgef\u00fchrt wird.<\/p>\n\n\n\n Hat alles geklappt, wirst du direkt auf die Shortpixel Einstellungsseite weitergeleitet und dein API-Schl\u00fcssel ist automatisch hinterlegt.<\/p>\n\n\n\n Du bekommst jeden Monat 100 Credits von Shortpixel, wenn du es kostenlos nutzt. Damit kannst du 100 Bilder optimieren.<\/p>\n\n\n\n Wenn du deine Website gerade erst startest, kann das also vollkommen ausreichen. <\/p>\n\n\n\n Hast du eine bestehende Website mit vielen Bildern, die du auch r\u00fcckwirkend optimieren und in WebP umwandeln m\u00f6chtest, empfehle ich dir einen einmaligen Kauf von Credits.<\/p>\n\n\n\n Insbesondere, wenn in deiner WordPress Installation viele verschiedene Versionen der Bilder angelegt werden, hast du die 100 Credits schnell aufgebraucht.<\/p>\n\n\n\n Ich selber schnappe mir immer f\u00fcr einmalig 20 $ das Paket mit 30.000 Credits. <\/p>\n\n\n\n Es gibt aber auch eine Alternative, die dir eine Menge Arbeit abnimmt:<\/p>\n\n\n\n Shortpixel Credits f\u00fcr die automatische Bildoptimierung sind in meiner WordPress Wartung<\/a> im Komplett-Paket inklusive, ebenso wie das Durchf\u00fchren der Bildoptimierung und korrekte Einstellung des Plugins.<\/p>\n\n\n\n \u00dcber meinen Link<\/a> bekommst du sogar noch mal 50 % mehr Credits (bei dem 30.000er Paket also 15.000 Credits zus\u00e4tzlich) geschenkt. <\/strong> Damit kommst du in der Regel eine ganze Weile hin.<\/p>\n\n\n\n Alternativ kannst du auch ein Abo abschlie\u00dfend<\/a>, um monatlich mehr Credits zu erhalten.<\/p>\n\n\n\n Du wurdest jetzt direkt in die Einstellungen des Plugins weitergeleitet.<\/p>\n\n\n\n Shortpixel hilft uns nicht nur die WebP Bilder zu erstellen, sondern auch bestehende und neu hochgeladene Bilder zu optimieren. Darum m\u00fcssen wir jetzt ein paar Einstellungen vornehmen (keine Sorge, es sind nicht viele), vorher aber erst einmal den „Advanced Mode“ einschalten:<\/p>\n\n\n\n Wir starten im Reiter „Image Optimization“.<\/p>\n\n\n\n Du solltest ausw\u00e4hlen, welche Komprimierungsart genutzt werden soll, „Verlustbehaftet“, „Gl\u00e4nzend“ oder „Verlustfrei“.<\/p>\n\n\n\n Damit ist gemeint, wie sehr die Qualit\u00e4t deiner Bilder reduziert werden darf. „Verlustbehaftet“ reduziert die Dateigr\u00f6\u00dfe am meisten, aber auch die Qualit\u00e4t. „Verlustfrei“ reduziert die Dateigr\u00f6\u00dfe kaum, daf\u00fcr bleibt die Bildqualit\u00e4t gleich.<\/p>\n\n\n\n Um den Unterschied herauszufinden, kannst du hier ein Bild hochladen<\/a> und die gew\u00fcnschte Komprimierungsart w\u00e4hlen.<\/p>\n\n\n\n Ich empfehle dir die Einstellung „Gl\u00e4nzend“:<\/p>\n\n\n\n Die weiteren Einstellungen kannst du so stehen lassen, wie sie von Haus aus gekommen sind. Nat\u00fcrlich kannst du hier Anpassungen vornehmen, wenn du m\u00f6chtest, aber du musst es nicht.<\/p>\n\n\n\n Hier kannst du Ausnahmen der Vorschaubild-Gr\u00f6\u00dfen anhaken, welche nicht optimiert werden sollen.<\/p>\n\n\n\n Wenn du nicht wei\u00dft, welche Gr\u00f6\u00dfen hiervon du nicht nutzt oder ben\u00f6tigst, lass einfach alle unangehakt.<\/p>\n\n\n\n Hier kannst du die Einstellungen ebenfalls so stehen lassen, wie sie von Haus aus sind.<\/p>\n\n\n\n Medien nach Upload optimieren<\/strong> Hintergrundmodus<\/strong> Backup Originals<\/strong> Individuelle Medienordner<\/strong> Hier wird es jetzt wichtig und interessant.<\/p>\n\n\n\n Create WebP Images<\/strong> Create AVIF Images<\/strong> Deliver the next generation images using the ShortPixel CDN<\/strong> Serve WebP\/AVIF images from locally hosted files (without using a CDN) <\/strong> Anschlie\u00dfend kannst du deine Einstellungen speichern und zur Sammelverarbeitung gehen.<\/p>\n\n\n\n Du findest die Sammelverarbeitung jederzeit unter „Medien“ \u2192 „ShortPixel Sammelverarbeitung“.<\/p>\n\n\n\n Hier kannst du deine bestehenden Medien mit ShortPixel optimieren.<\/p>\n\n\n\n Starte die Verarbeitung mit einem Klick auf den „Start Optimization“ Button.<\/p>\n\n\n\n Setze jetzt den Haken bei „Auch WebP-Versionen der Bilder erstellen“, damit f\u00fcr deine bestehenden Bilder in WordPress WebP Versionen erstellt werden und starte die Optimierung \u00fcber den Button ganz unten:<\/p>\n\n\n\n W\u00e4hrend die Optimierung l\u00e4uft, lasse den Tab offen. <\/p>\n\n\n\n Falls du nicht genug Credits hast, kaufe dir bei Shortpixel ein Paket. \u00dcber meinen Link<\/a>* bekommst du 50 % mehr Credits (bei dem 30.000er Paket also 15.000 Credits zus\u00e4tzlich) geschenkt.<\/p>\n\n\n\n Nach Abschluss der Sammelverarbeitung kannst du nun pr\u00fcfen, ob WordPress im Frontend wirklich die WebP Bilder ausliefert.<\/p>\n\n\n\n Um herauszufinden, ob deine Website die WebP Bilder auch wirklich ausliefert, rufe sie in Google Chrome oder Firefox einem inkognito Tab auf (damit du keinerlei Caching oder eine Ansicht f\u00fcr eingeloggte Nutzer hast).<\/p>\n\n\n\n Anschlie\u00dfend machst du einen Rechtsklick auf ein Bild, das als WebP Version ausgeliefert werden sollte und klickst auf „Bild in neuem Tab \u00f6ffnen“:<\/p>\n\n\n\n Anschlie\u00dfend \u00f6ffnet sich das Bild in einem neuen Tab und du kannst in der Adresszeile am Ende der URL das Dateiformat erkennen. Steht dort „.webp“ wird die WebP Version des Bildes ausgeliefert und alles klappt super:<\/p>\n\n\n\n Hast du deine Bilder in WebP Versionen umwandeln lassen und merkst bei der \u00dcberpr\u00fcfung, dass die WebP Bilder nicht ausgeliefert werden, kann das folgende Gr\u00fcnde haben:<\/p>\n\n\n\n Du k\u00f6nntest bei der Sammelverarbeitung oder in den Einstellungen des ShortPixel Image Optimizer Plugins einen Haken (nicht) gesetzt haben, welcher das gepr\u00fcfte Bild ausgeschlossen hat.<\/p>\n\n\n\n Beispielsweise kann das passieren, wenn du in der Sammelverarbeitung den Haken bei „Vorschaubilder einschlie\u00dfen“ nicht gesetzt hast und jetzt in der \u00dcberpr\u00fcfung ein Vorschaubild pr\u00fcfst.<\/p>\n\n\n\n Lasse in diesem Fall die Sammelbearbeitung nochmals mit ver\u00e4nderten Einstellungen durchlaufen und pr\u00fcfe anschlie\u00dfend erneut.<\/p>\n\n\n\n Hast du deine Bilder in WebP umgewandelt, solltest du den Servercache leeren. Jedes gute Caching-Plugin bietet dir hierf\u00fcr eine M\u00f6glichkeit.<\/p>\n\n\n\n![\"WebP](\"https:\/\/wp-ninjas.de\/wp-content\/uploads\/2022\/02\/webp-jpg-png-vergleich.jpg\")
<\/a>![\"WebP](\"https:\/\/wp-ninjas.de\/wp-content\/uploads\/2022\/02\/webp-browser-kompatibilitaet.jpg\")
<\/a>M\u00f6glichkeiten zur Erstellung von WebP Bildern<\/h2>\n\n\n\n
\n
So erstellst du WebP Bilder in WordPress mit 5 Schritten<\/h2>\n\n\n\n
1. Installiere dir ShortPixel Image Optimizer<\/h3>\n\n\n\n
![\"Shortpixel](\"https:\/\/wp-ninjas.de\/wp-content\/uploads\/2022\/02\/shortpixel-image-optimizer.jpg\"){kind=tracking}
<\/a><\/figure>\n\n\n\n![\"Screenshot](\"https:\/\/wp-ninjas.de\/wp-content\/uploads\/2022\/02\/shortpixel-api-key.jpg\"){kind=tracking}
<\/a>2. Achte auf deine Credits<\/h3>\n\n\n\n
Das Paket findest du hier bei Shortpixel*<\/a>.<\/strong><\/p>\n\n\n\n![\"Shortpixel](\"https:\/\/wp-ninjas.de\/wp-content\/uploads\/2022\/02\/shortpixel-image-optimizer-preise.jpg\"){kind=tracking}
<\/a><\/figure>\n\n\n\n3. Hinterlege die richtigen Einstellungen<\/h3>\n\n\n\n
![\"Screenshot](\"https:\/\/wp-ninjas.de\/wp-content\/uploads\/2022\/02\/shortpixel-advanced-mode.jpg\"){kind=tracking}
<\/a>Image Optimization<\/h4>\n\n\n\n
![\"Screenshot](\"https:\/\/wp-ninjas.de\/wp-content\/uploads\/2022\/02\/shortpixel-image-optimization.jpg\"){kind=tracking}
<\/a><\/figure>\n\n\n\nExclusions<\/h4>\n\n\n\n
Wird verarbeitet<\/h4>\n\n\n\n
Wenn diese Einstellung aktiv ist, werden Bilder beim Upload automatisch optimiert.<\/p>\n\n\n\n
Du kannst die Optimierung im Hintergrund laufen lassen, wenn du diese Einstellung aktivierst. Allerdings funktioniert das nur, wenn deine Website Besucher hat.<\/p>\n\n\n\n
Ist diese Einstellung aktiv, werden die hochgeladenen Bilder gesichert, bevor sie optimiert werden. So hast du jederzeit ein Backup der Originale.<\/p>\n\n\n\n
Diese Funktion erlaubt es dir, Bilder zu optimieren, die nicht in der Mediathek sind.<\/p>\n\n\n\nWebP\/AVIF & CDN<\/h4>\n\n\n\n
Aktiviere diese Einstellung, damit die WebP-Bilder erstellt werden.<\/p>\n\n\n\n
Alternativ zu den WebP-Bildern k\u00f6nntest du diese Einstellung aktivieren, um stattdessen AVIF-Bilder erstellen zu lassen.<\/p>\n\n\n\n
Du kannst die WebP- oder AVIF-Bilder \u00fcber das CDN von ShortPixel ausliefern lassen. Es kommt hier auf den Anwendungsfall an, in der Regel w\u00fcrde ich dir aber empfehlen, diese Einstellung deaktiviert zu lassen und die n\u00e4chste zu aktivieren:<\/p>\n\n\n\n
Aktiviere diese Einstellung, damit die umgewandelten Bilder ausgeliefert werden.
Beachte hier zwei Dinge:<\/p>\n\n\n\n\n
![\"Screenshot](\"https:\/\/wp-ninjas.de\/wp-content\/uploads\/2022\/02\/shortpixel-webp-auslieferung.jpg\"){kind=tracking}
<\/a>4. Starte die Sammelverarbeitung<\/h3>\n\n\n\n
![\"Screenshot](\"https:\/\/wp-ninjas.de\/wp-content\/uploads\/2022\/02\/shortpixel-sammelverarbeitung.jpg\"){kind=tracking}
<\/a>5. Pr\u00fcfe, ob WordPress WebP Bilder ausliefert<\/h3>\n\n\n\n
![\"\"](\"https:\/\/wp-ninjas.de\/wp-content\/uploads\/2022\/02\/webp-pruefen.jpg\")
<\/a><\/figure>\n\n\n\n![\"WebP](\"https:\/\/wp-ninjas.de\/wp-content\/uploads\/2022\/02\/webp-check.jpg\")
<\/a><\/figure>\n\n\n\nTroubleshooting: Gr\u00fcnde, wieso WebP Bilder nicht ausgeliefert werden<\/h2>\n\n\n\n
Deine ShortPixel Einstellungen haben dieses Bild ausgeschlossen<\/h3>\n\n\n\n
Dein (Server-)Cache wurde nicht geleert oder das Caching Plugin nicht angepasst<\/h3>\n\n\n\n