JPG in WebP umwandeln ohne Plugin ab WordPress 5.8

Seit der Version WordPress 5.8 ist es möglich, WebP Bilder hochzuladen und anzuzeigen. Jetzt heißt es: JPG und PNG in WebP umwandeln. Denn in puncto Bildoptimierung liegt das WebP-Format ganz weit vorn. Aber bitte nicht wieder ein Plugin installieren! Ich erkläre dir, worum es bei WebP geht und was es zu beachten gibt, bevor du die Bilder auf deine WordPress-Website hochlädst.

Das Grafikformat WebP

Nun ist es soweit. Das vor über 10 Jahren von Google in Zusammenarbeit mit On2 entwickelte Grafikformat WebP (siehe Google’s Originalseite) hat Einzug in die Open-Source-Software WordPress.org gefunden.

Die Fehlermeldung „Dieser Dateityp ist aus Sicherheitsgründen leider nicht erlaubt“ beim Hochladen von WebP-Bilddateien ist damit Vergangenheit. Zusätzliche Codes in der functions.php des Child-Themes oder gar WordPress-Plugins sind somit überflüssig geworden. Die altbekannte Photoshop-Funktion „Für Web speichern …“ kann man sich nun auch sparen. Selbst in der WordPress-Medienübersicht werden WebP-Bilder jetzt angezeigt. Außerdem wird das WebP-Format mittlerweile von allen gängigen Browsern akzeptiert.

Viele gute Gründe, jetzt umzusteigen. WebP kann nämlich gegenüber herkömmlichen Bildformaten wie JPG, JPEG oder PNG die Leistung der Website tatsächlich steigern. Warum ist das so? Weil man bei der Umwandlung ins WebP-Bildformat eine deutlich geringere Dateigröße erreichen kann. Hier ein Vergleichsbeispiel:

Wie du anhand der Bildbeschreibungen erkennen kannst, ist die Dateigröße nach der Umwandlung ins WebP-Format auf rund 20 Prozent geschrumpft. Es macht nämlich einen gravierenden Unterschied für die Leistung der Website, ob man 200 JPG-Bilder à 283 KB oder 200 WebP-Bilder à 54,9 KB auf dem Webserver der WordPress-Website gespeichert hat.

Auf einer meiner Websites habe ich beispielsweise im Laufe der Jahre über 15.000 JPG-Bilder hochgeladen, da macht sich jedes Kilobit (KB) bemerkbar – zumal WordPress auch noch automatisch drei weitere Bildgrößen anlegt sowie das Theme (die WordPress-Vorlage) und vielleicht noch das Galerie-Plugin zusätzliche Bildgrößen (Thumbnails) erzeugt, sodass aus 15.000 Bildern locker 150.000 Bilder auf dem Webserver werden können.

Wer da schon beim Anlegen der WordPress-Website nicht die richtigen Einstellungen wählt und die Bilder nicht verkleinert und konvertiert vor dem Hochladen, kann schnell den Webspace (Speicherplatz der Website auf dem Server des Webhosters) aufbrauchen. Das wiederum bedeutet, dass die Website langsamer lädt und im Ernstfall ein teueres Webhosting-Paket gewählt werden muss. Daher merke dir bitte:

Je geringer die Dateigröße der Bilddateien, die du auf deine WordPress-Website hochlädst, desto weniger Webspace wird verbraucht, desto schneller lädt die Website, desto kostengünstiger wird das Webhosting.

Das Grafikformat von Google kann da Abhilfe schaffen – insbesondere für Fotografen, die ihre Bilder auf der Website präsentieren wollen. Denn WebP kann noch mehr:

Mit WebP so gut wie verlustfreie Komprimierung

Ich habe absichtlich ein Foto mit blauem Himmel gewählt, da hierbei immer die Gefahr besteht, dass der Himmel nach der Komprimierung in Streifen erscheint. Das macht sich nicht gut für die Präsentation auf der Website.

Zur Information:

Bei der Umwandlung (Konvertierung) vom zum Beispiel JPG- ins WebP-Bildformat sollte das Bild auch komprimiert (die Dateigröße reduziert) werden, sonst könnte die .webp-Datei größer als die .jpg-Datei ausfallen.

Wie du bei meinen Beispielbildern erkennen kannst, ist nach der Umwandlung von JPG in WebP von Streifen keine Spur. (Hobby-) Fotograf:innen bekommen mit WebP also ein Bildformat an die Hand, das ihnen hilft, ihre Fotografien so gut wie verlustfrei (originalgetreu wie möglich) auf jeder Website anzuzeigen, ohne dass die Performance der Website darunter leidet.

„So gut wie“ deshalb, weil ich doch noch ein paar Mankos entdeckt habe:

• Je nachdem, welchen Konverter und welche Einstellungen man wählt, kann die Farbqualität darunter leiden (im obigen Beispiel erscheint das vom JPG- ins WebP-Format konvertierte Bild in Magenta-Tönen anstatt Himmelblau).
• Nicht alle Galerie-Plugins für WordPress unterstützen bisher das WebP-Format.
• In manchen Foren wird derzeit von einer Fehlermeldung in WordPress berichtet, dass wohl nur die WebP-Bilder akzeptiert werden, die vor dem Hochladen vom JPG oder PNG ins WebP umgewandelt wurden. Vielleicht haben manche WordPress-Anwender:innen GIF- oder RAW-Dateien in WebP umgewandelt und versucht, in WordPress hochzuladen. An dieser Stelle sollte WordPress.org offenbar nachbessern.
• Einige Lightboxes funktionieren nicht mit WebP-Bildern.
• Beim Veröffentlichen/Verlinken in sozialen Medien erscheint das WebP-Bild nicht.
• Dann existiert noch das Problem, dass auf manchen Computern (zum Beispiel älteren Windows-Versionen) WebP-Bilder nicht angezeigt werden (zum Beispiel im Explorer) – ist aber machbar. Diesem Thema widme ich mich im nächsten Artikel.
• Des Weiteren gibt es Bildbearbeitungsprogramme, mit denen man eine Bilddatei direkt als WebP abspeichern kann. Das ist meiner Erfahrung nach keine gute Idee. Diese WebP-Dateien werden oftmals in einer viel zu großen Dateigröße ausgegeben, wenn man nicht über komplizierte Voreinstellungen die richtige Auswahl trifft.

Da Google bereits an dem Nachfolgeformat „WebP2“ arbeitet, wird es demnach höchste Zeit, dass Theme- und Plugin-Anbieter nachziehen! Denn „Fallback“-Lösungen, wonach pro Bild zum Beispiel eine JPG- und eine WebP-Version hochgeladen werden soll, damit die Lightbox oder das Galerie-Plugin auswählen kann, welches von beiden Formaten kompatibel ist, ist keine Lösung, sondern bewirkt das Gegenteil von dem, was WebP bewirken soll: den Webserver mit unnötigen Bildern belasten.

PNG oder JPG/JPEG in WebP umwandeln

Hast du dich erstmal für WebP entschieden, rate ich zu folgenden Schritten:

1. Wenn du dein Foto mit einer hohen Auflösung / Bildgröße aufgenommen hast (zum Beispiel mit einer DSLR-Kamera oder einem Smartphone), verkleinere zuerst dein Foto (zum Beispiel von 4800 px auf 1500 px in der Breite) mit einem Fotobearbeitungsprogramm deiner Wahl. Achte darauf, dass du nicht „Schärfer“ beim Verkleinern auswählst bei Bildern mit viel Himmel am Horizont (sonst könnten dabei bereits Streifen entstehen). Speichere das kleinere Bild in der höchstmöglichen Qualität und unter einem anderen Namen (zum Beispiel Vogelblau-1500.jpg) auf deinem Computer.
2. Wähle ein Programm aus dem Internet, mit dem du JPG bzw. JPEG und PNG-Bilder in WebP umwandeln (sog. „Konverter“ bzw. auf Englisch „Converter“) und offline auf deinem Computer bearbeiten kannst (man weiß ja nie, wo die Bilder landen). Dann befasse dich in Ruhe mit den Einstellungen des Programms und probiere erst mal an Bildern aus, die nicht so wichtig sind, damit du nicht deine besten Fotos aus Versehen „kaputt“ konvertierst. Erst wenn du zufrieden bist, wage dich an die guten Fotos.
3. Sobald du alle Bilder ins WebP-Format konvertiert hast, lade sie wie gewohnt in deiner Website hoch. Seit WordPress.org 5.8 werden WebP-Bilder wie alle anderen Bildformate behandelt und finden sich in der Medienübersicht wieder.

TIPPs:

Am schnellsten findest du Bildkonverter-Programme, indem du „JPG to WebP“, „PNG to WebP“ oder „RAW to WebP“ in die Suchmaschine eingibst.

Befindet sich noch ein WordPress-Plugin auf deiner Website, das beispielsweise JPG zu WebP konvertieren kann, deaktivere oder besser lösche es. Das brauchst du nicht mehr, wenn du mit WordPress 5.8 und höher arbeitest (ausgenommen, auf deiner Website sind so viele JPG- oder PNG-Bilder vorhanden, dass du diese mit einem Plugin automatisch umwandeln möchtest).

FAZIT: Trotz einiger Mankos kann ich dir empfehlen, WebP-Bilder in deine WordPress-Website einzubinden. Hast du einmal den Dreh raus, bereitet es echte Freude, damit zu arbeiten. 🙂

Code statt Plugin für ältere WordPress-Versionen

Arbeitest du mit einer älteren Version von WordPress.org (Version vor 5.8)? Dann tauchen wahrscheinlich die oben genannten Probleme auf (zum Beispiel Fehlermeldung beim Hochladen der WebP-Dateien, fehlende Anzeige in der Bilderübersicht).

In diesem Fall kann ich dir empfehlen, folgenden Code (dessen Quelle mir leider entwichen ist) einzubinden:

//** *Enable upload for webp image files.*/
function webp_upload_mimes($existing_mimes) {
$existing_mimes['webp'] = 'image/webp';
return $existing_mimes;
}
add_filter('mime_types', 'webp_upload_mimes');

//** * Enable preview / thumbnail for webp image files.*/
function webp_is_displayable($result, $path) {
if ($result === false) {
$displayable_image_types = array( IMAGETYPE_WEBP );
$info = @getimagesize( $path );

if (empty($info)) {
$result = false;
} elseif (!in_array($info[2], $displayable_image_types)) {
$result = false;
} else {
$result = true;
}
}

return $result;
}
add_filter('file_is_displayable_image', 'webp_is_displayable', 10, 2);

Kopiere einfach den Code und füge ihn „als reinen Text“ (rechte Maustaste, „Als reinen Text einfügen“ o.Ä.) in die functions.php deines Child-Themes (!) ein. Schon funktioniert es mit dem Hochladen und Erkennen von WebP-Dateien in WordPress.

Dieser Artikel wurde aktualisiert am 7. September 2023