Eine häufige Empfehlung von PageSpeed Insights lautet: „Bilder in modernen Formaten anzeigen“. WebP ist bei gleicher sichtbarer Qualität in der Regel 25–35 % kleiner als JPEG, AVIF ist noch kleiner, wird jedoch langsamer erstellt. Hierfür ist nicht unbedingt ein Plugin erforderlich: Der integrierte Bildeditor von WordPress kann aus den hochgeladenen JPEG- und PNG-Bildern auch Miniaturansichten im WebP- oder AVIF-Format erstellen.

Die in diesem Artikel beschriebene Konfiguration haben wir auf einer Test-Website mit cPanel-Hosting ausprobiert.

Was bietet das Webhosting?

Auf den cPanel-Servern von aWh unterstützt die PHP-Bildverarbeitungsbibliothek (GD) die Formate WebP und AVIF, sodass WordPress beide Formate generieren kann. Sie können dies im Verzeichnis Ihrer Website mit WP-CLI überprüfen:

cd ~/public_html
wp eval 'foreach ( [ "image/webp", "image/avif" ] as $m ) echo $m, ": ", wp_image_editor_supports( [ "mime_type" => $m ] ) ? "igen" : "nem", PHP_EOL;'

Über die Oberfläche „Select PHP Version“ können Sie auch das imagick-Plugin aktivieren (Verwaltung der PHP-Erweiterungen); WordPress wählt dieses anstelle von GD und verbraucht bei großen Bildern weniger PHP-Speicher.

Externe Programme (wie beispielsweise „cwebp“ oder „vips“) können mit PHP auf unseren Servern nicht ausgeführt werden, da die Funktion „exec“ und ähnliche Funktionen aus Sicherheitsgründen deaktiviert sind. Die Codeausschnitte aus älteren Anleitungen, die einen Befehlszeilenkonverter aufrufen, funktionieren daher hier nicht; der integrierte Bildbearbeitungseditor von WordPress hingegen schon.

WebP aktivieren

Erstellen Sie ein „must-use“-Plugin in der Datei „wp-content/mu-plugins/kep-formatum.php“ (legen Sie den Ordner „mu-plugins“ an, falls dieser noch nicht vorhanden ist; dies können Sie auch über den cPanel-Dateimanager tun):

<?php
/**
 * Plugin Name: JPEG és PNG képek mentése WebP formátumban
 */
add_filter( 'image_editor_output_format', function ( $formats ) {
    $formats['image/jpeg'] = 'image/webp';
    $formats['image/png']  = 'image/webp';
    return $formats;
} );

Die „Must-Use“-Plugins werden automatisch geladen; sie müssen nicht aktiviert werden und werden in der Erweiterungsliste in einer separaten Gruppe („Must-Use“) angezeigt.

Anschließend sieht das Ergebnis unseres Tests anhand eines hochgeladenen JPEG-Bildes wie folgt aus:

kep.jpg              <- az eredeti, változatlanul megmarad
kep.webp             <- teljes méretű WebP-másolat
kep-150x150.webp
kep-300x188.webp
kep-768x480.webp
kep-1024x640.webp
kep-1536x960.webp

WordPress fügt den Beiträgen bereits die WebP-Varianten hinzu, und auch das srcset-Attribut verweist auf diese. Das ursprüngliche JPEG-Bild bleibt weiterhin zum Herunterladen verfügbar.

Geben Sie für AVIF anstelle von „image/webp“ den Wert „image/avif“ ein. AVIF erzeugt kleinere Dateien, die Codierung ist jedoch langsamer, weshalb das Hochladen großer Bilder länger dauert. Aktuelle Browser unterstützen beide Formate.

Die vorhandenen Bilder

Die Einstellung gilt nur für neu hochgeladene Dateien. Thumbnails für alte Bilder können Sie mit WP-CLI neu generieren:

wp media regenerate --yes

Bitte beachten Sie: Durch die Neugenerierung werden die alten JPEG-Thumbnails gelöscht und stattdessen WebP-Versionen erstellt (im Test wurde „kep-300x188.jpg“ durch „kep-300x188.webp“ ersetzt). Sollten die Beiträge im Inhalt die skalierten Bildnamen enthalten (beispielsweise „kep-1024x640.jpg“, wie sie sowohl vom Block-Editor als auch vom klassischen Editor eingegeben werden), existieren diese Namen anschließend nicht mehr. Aufgrund des „srcset“-Attributs laden die Browser meist die WebP-Version, doch der im Inhalt angegebene Dateiname führt zu einem 404-Fehler, und auch die alten, von anderen Stellen aus verknüpften Bild-URLs sind nicht mehr gültig. Daher:

• Probieren Sie es zunächst auf einer Staging-Kopie aus und sehen Sie sich einige ältere Beiträge an;
• oder lassen Sie die alten Bilder unverändert und laden Sie neue Bilder ausschließlich im WebP-Format hoch;
• Oder ersetzen Sie die im Inhalt enthaltenen Titel mit dem Befehl „wp search-replace“, wobei Sie zunächst einen Testlauf durchführen sollten.

Führen Sie die Neugenerierung der gesamten Mediathek nicht ohne vorherige Sicherung durch (WordPress-Sicherung).

Mit einem Plugin

Wenn Sie keinen Code schreiben möchten oder alte Bilder im WebP-Format bereitstellen möchten, ohne deren URL zu ändern, fügen Sie mithilfe eines Plugins zur Bildoptimierung (z. B. Converter for Media, EWWW Image Optimizer, Imagify) die WebP-Version hinzu und stellen Sie diese dem Browser entweder über das <picture>-Element oder über eine Umschreibungsregel zur Verfügung. Einige Punkte, die Sie beachten sollten:

• Wo findet die Konvertierung statt? Plugins, die Daten an einen externen Dienst weiterleiten, belasten das Hosting nicht, jedoch werden Ihre Bilder an einen Drittanbieter übertragen. Plugins, die die Konvertierung lokal durchführen, nutzen die Ressourcen des Hostings; die Erstverarbeitung einer Mediathek mit mehreren tausend Bildern kann an die Ressourcenbeschränkungen von CloudLinux stoßen. Führen Sie den Vorgang daher in kleinen Portionen und zu Zeiten mit geringem Datenverkehr durch.
• Hosting: Für jedes Bild und jedes Miniaturbild wird eine weitere Datei angelegt. Überprüfen Sie die Werte für „Festplattennutzung“ und „Dateinutzung“ auf der Startseite von cPanel-Hosting (Inodes).
• Cache und CDN: Wenn das Plugin einem Browser, der ein JPEG anfordert (basierend auf dem „Accept“-Header des Browsers), unter derselben Adresse ebenfalls ein WebP-Bild bereitstellt, muss der Cache diesen Header ebenfalls berücksichtigen; andernfalls könnte ein veralteter Browser ein WebP-Bild erhalten. Bei der Lösung mit dem <picture>-Element stellt dies kein Problem dar.

Befindet sich die Website hinter Cloudflare, erfolgt die Bildoptimierung bei den kostenpflichtigen Paketen über das CDN, sodass auf dem Webhosting-Server keine Einstellungen vorgenommen werden müssen.

Überprüfung

Öffnen Sie eine Seite in Ihrem Browser, filtern Sie im Reiter „Netzwerk“ der Entwicklertools nach Bildern und überprüfen Sie die Spalte „Typ“: Dort sollte „webp“ oder „avif“ stehen. Über die Befehlszeile:

curl -s https://pelda.hu/ | grep -o 'wp-content/uploads/[^" ]*\.\(webp\|avif\)' | head -5

Führen Sie anschließend die PageSpeed Insights-Messung erneut durch. Über die Bildgröße hinaus finden Sie weitere Tipps zur Optimierung in dem Artikel über die Optimierung von WordPress.