Bilder in WordPress optimieren: WebP, AVIF und Lazy Loading richtig nutzen

Bilder sind auf den meisten Unternehmenswebsites der größte Teil der Datenmenge einer Seite. Ein Foto direkt aus dem Smartphone hat schnell vier bis acht Megabyte, und wenn WordPress daraus nur JPEG-Varianten erzeugt, lädt jeder Besucher deutlich mehr als nötig. WordPress bringt seit Version 6.5 Unterstützung für AVIF mit, WebP bereits länger, und setzt Lazy Loading automatisch. Diese Anleitung zeigt, wie Sie moderne Formate einschalten, vorhandene Bilder umwandeln und Lazy Loading kontrollieren. Alle Schritte liefen im Labor mit WordPress 7.1.2 und PHP 8.4.

Voraussetzungen

• WordPress: Version 6.5 oder neuer für AVIF, getestet mit WordPress 7.1.2 in deutscher Sprache.
• PHP: mindestens PHP 7.4, das verlangt auch das Plugin „Modern Image Formats“ 2.7.1 laut Plugin-Seite. Im Labor lief PHP 8.4 mit den Erweiterungen Imagick und GD.
• Bildbibliothek auf dem Server: Imagick (ImageMagick) oder GD mit WebP- bzw. AVIF-Unterstützung. Ob das vorhanden ist, klärt Schritt 1. Fehlt es, kann nur der Hoster nachrüsten.
• Zugriff: Rolle Administrator im Backend. Für das Umwandeln vorhandener Bilder in Schritt 4 SSH mit WP-CLI, für die Variante ohne Plugin SFTP oder SSH.
• Backup: eine aktuelle Sicherung von Datenbank und wp-content/uploads, bevor Sie vorhandene Bilder neu erzeugen lassen.

Schritt 1: Prüfen, welche Formate Ihr Server erzeugen kann

WordPress nutzt zum Umwandeln eine Bildbibliothek von PHP, bevorzugt Imagick, sonst GD. Beide schreiben WebP und AVIF nur, wenn sie mit den passenden Bibliotheken gebaut wurden. Ohne diese Prüfung bleibt später unklar, warum weiter nur JPEG-Dateien entstehen.

Öffnen Sie im Backend Werkzeuge > Website-Zustand, wechseln Sie auf den Reiter „Bericht“ und klappen Sie den Abschnitt „Medienverarbeitung“ auf. Dort stehen der „Aktive Editor“ sowie die Listen „Von ImageMagick unterstützte Dateiformate“ und „Von GD unterstützte Dateiformate“. Suchen Sie darin nach WEBP und AVIF.

Mit WP-CLI geht die Prüfung schneller und liefert eine eindeutige Antwort je Format:

wp eval 'foreach ( array( "image/jpeg", "image/webp", "image/avif" ) as $m ) {
  echo $m . ": " . ( wp_image_editor_supports( array( "mime_type" => $m ) ) ? "ja" : "nein" ) . PHP_EOL;
}
echo _wp_image_editor_choose() . PHP_EOL;'

Im Labor mit dem offiziellen Image wordpress:7.1.2-php8.4-apache lautete die Ausgabe:

image/jpeg: ja
image/webp: ja
image/avif: ja
WP_Image_Editor_Imagick

Steht bei AVIF „nein“, können Sie trotzdem mit WebP arbeiten, das unterstützen nahezu alle Server. Steht auch bei WebP „nein“, fragen Sie Ihren Hoster nach einer aktuelleren PHP-Version oder Imagick.

Verifizieren: Sie wissen, welcher Editor aktiv ist und ob WebP und AVIF mit „ja“ gemeldet werden. Davon hängt ab, welches Zielformat Sie in Schritt 2 wählen.

Schritt 2: Moderne Formate für neue Uploads einschalten

Seit WordPress 6.5 können Sie AVIF- und WebP-Dateien direkt hochladen, WordPress erzeugt dann die Zwischengrößen im selben Format. Im Labor lieferte ein AVIF-Upload alle Zwischengrößen als AVIF. JPEG- und PNG-Uploads wandelt WordPress dagegen von sich aus nicht um.

Dafür gibt es das Plugin „Modern Image Formats“, das vom Performance-Team von WordPress entwickelt wird und früher „WebP Uploads“ hieß. Installieren Sie es unter Plugins > Neues Plugin hinzufügen oder per WP-CLI:

wp plugin install webp-uploads --activate

Laut Plugin-Beschreibung erzeugt es standardmäßig AVIF, wenn der Server das kann, sonst WebP. Die Einstellungen stehen unter Einstellungen > Medien:

• Format für die Bildausgabe: WebP oder AVIF. AVIF ist meist kleiner, die Umwandlung braucht aber mehr Rechenzeit beim Upload.
• Fallback-Bilder ausgeben: Ist das aktiviert, legt das Plugin jede Größe zusätzlich als JPEG ab. Ohne diese Option bleibt nur das hochgeladene Original im Ursprungsformat erhalten.
• Das Element <picture> verwenden: Liefert das moderne Format mit dem JPEG als Rückfall aus. Funktioniert nur bei Bildern, die mit aktivierter Fallback-Option hochgeladen wurden.

Im Labor erzeugte ein JPEG-Upload mit Standardeinstellung nur AVIF-Zwischengrößen. Mit Fallback-Option lagen je Größe zwei Dateien vor, etwa foto5-1024x768.jpg und foto5-1024x768-jpg.webp, und das Picture-Element lieferte:

<picture class="wp-picture-12" style="display: contents;">
  <source type="image/webp" srcset="…" sizes="…">
  <img fetchpriority="high" decoding="async" width="1024" height="768"
       src="…/foto5-1024x768.jpg" …>
</picture>

Der Kompromiss ist ehrlich zu benennen: Das Picture-Element verdoppelt den Speicherbedarf, und das Plugin warnt selbst, dass CSS-Regeln mit Kindselektor wie figure > img dann nicht mehr greifen. Ob sich die Rückfallbilder lohnen, hängt davon ab, wie viele Ihrer Besucher sehr alte Browser nutzen. Testen Sie die Einstellung auf einer Staging-Kopie, wenn Ihr Theme eigenes CSS für Bilder mitbringt, siehe Staging-Umgebung für WordPress einrichten.

Verifizieren: Laden Sie unter Medien > Mediathek ein JPEG hoch und öffnen Sie die Anhang-Details. Die Datei-URL der Zwischengrößen endet auf .webp oder .avif. Auf dem Server zeigt ls wp-content/uploads/JAHR/MONAT/ die neuen Dateien.

Schritt 3: Alternative ohne Plugin per Must-Use-Plugin

Wer möglichst wenige Plugins betreiben möchte, erreicht den Kern der Umwandlung mit einem WordPress-Filter. image_editor_output_format legt fest, in welchem Format WordPress Zwischengrößen speichert. Legen Sie die Datei wp-content/mu-plugins/bilder-webp.php an.

<?php
/**
 * Plugin Name: Bilder als WebP ausgeben
 * Description: Zwischengrößen von JPEG und PNG als WebP speichern.
 */
add_filter( 'image_editor_output_format', function ( $formats ) {
	$formats['image/jpeg'] = 'image/webp';
	$formats['image/png']  = 'image/webp';
	return $formats;
} );

// Qualität für WebP festlegen (WordPress-Standard: 86 für WebP, 82 für JPEG).
add_filter( 'wp_editor_set_quality', function ( $quality, $mime_type ) {
	return 'image/webp' === $mime_type ? 80 : $quality;
}, 10, 2 );

// Große Fotos auf 1920 statt 2560 Pixel verkleinern.
add_filter( 'big_image_size_threshold', function () {
	return 1920;
} );

Die Filter wp_editor_set_quality und big_image_size_threshold sind optional. Ohne eigenen Wert speichert WordPress laut wp-includes/class-wp-image-editor.php WebP mit Qualität 86 und JPEG mit 82. Den Standardwert 2560 für die Verkleinerung großer Fotos zeigt der Core-Code in wp-admin/includes/image.php. Darüber legt WordPress eine verkleinerte Datei mit dem Zusatz -scaled als Hauptbild an, das Original bleibt gespeichert.

Im Labor erzeugte derselbe 3,9 MB große JPEG-Upload ohne Filter eine -scaled-Datei von 578 KB als JPEG, mit Filter und WebP als Ausgabeformat 434 KB. Zusätzlich mit 1920 Pixel Grenze und Qualität 80 waren es 149 KB. Die 1024-Pixel-Größe schrumpfte von 103 KB (JPEG) auf 48 KB (WebP, Qualität 80). Die Werte gelten für ein künstliches Testbild, bei echten Fotos weichen sie ab.

Der Unterschied zum Plugin: kein Rückfallbild, kein Picture-Element, keine Einstellungsseite. Setzen Sie nicht beides gleichzeitig ein, sonst ist unklar, welche Regel greift.

Verifizieren: php -l wp-content/mu-plugins/bilder-webp.php meldet „No syntax errors detected“. Unter Plugins > Must-Use erscheint „Bilder als WebP ausgeben“, und ein neuer JPEG-Upload erzeugt Zwischengrößen mit der Endung .webp.

Schritt 4: Vorhandene Bilder umwandeln, ohne Links zu verlieren

Beide Wege wirken nur auf neue Uploads. Ältere Bilder in der Mediathek bleiben JPEG, bis die Zwischengrößen neu erzeugt werden. Das erledigt WP-CLI. Erstellen Sie vorher ein Backup, der Vorgang schreibt in Uploads-Ordner und Datenbank. Wie Sie beides sichern, beschreibt WordPress-Backup-Strategie.

# Einzelnes Bild testen (ID aus der Mediathek)
wp media regenerate 4 --skip-delete --yes

# Danach alle Bilder
wp media regenerate --skip-delete --yes

Die Option --skip-delete ist hier entscheidend. Ohne sie löscht WP-CLI die alten Zwischengrößen. Beiträge, die im Block-Editor fest auf foto-1024x768.jpg verweisen, zeigen dann ein fehlendes Bild. Im Labor lieferte die alte JPEG-Adresse nach wp media regenerate 4 --yes nur noch die Fehlerseite des Themes.

Beachten Sie eine Einschränkung, die im Labor deutlich wurde: Die Beiträge selbst werden nicht umgeschrieben. Im Block-Editor steht weiterhin alt-1024x768.jpg im src. Weil dieser Dateiname nicht mehr in den Metadaten des Anhangs steht, ließ WordPress beim Ausliefern srcset, Breite, Höhe und fetchpriority weg. Für wichtige Seiten ersetzen Sie das Bild deshalb im Editor (Bild auswählen, „Ersetzen“, dasselbe Bild aus der Mediathek wählen) oder tauschen die Adresse gezielt per WP-CLI:

wp search-replace '/2026/09/alt-1024x768.jpg' '/2026/09/alt-1024x768.webp' wp_posts --include-columns=post_content --dry-run

Der Probelauf meldete „Success: 1 replacement to be made.“ Ohne --dry-run ausgeführt, lieferte die Seite danach die WebP-Datei mit vollständigem srcset und fetchpriority="high". Ersetzen Sie nur einzelne Dateinamen, keine pauschalen Muster wie .jpg. Wie Sie WP-CLI grundsätzlich sicher einsetzen, zeigt WordPress-Updates per WP-CLI.

Große Mediatheken belasten den Server lange. Starten Sie den Befehl außerhalb der Geschäftszeiten, bei Shared Hosting in Etappen, etwa mit --image_size=large.

Verifizieren: WP-CLI meldet „Success: Regenerated 1 of 1 images.“ Die alte JPEG-Adresse eines Beitrags liefert weiterhin das Bild, und im Uploads-Ordner liegen die neuen Dateien daneben.

Schritt 5: Lazy Loading und Priorität kontrollieren

WordPress ergänzt Bilder im Inhalt automatisch um loading="lazy", der Browser lädt sie erst kurz bevor sie sichtbar werden. Für das oberste Bild wäre das schädlich. Deshalb lässt WordPress die ersten Bilder aus. Den Standardwert 3 dokumentiert der Filter wp_omit_loading_attr_threshold, der seit Version 6.3 gilt.

Im Labor mit fünf Bildern in einem Beitrag und dem Theme Twenty Twenty-Five lautete die Ausgabe:

Bild	Attribute
1	fetchpriority="high", kein loading
2 und 3	kein loading
4 und 5	loading="lazy"

Das erste große Bild erhält fetchpriority="high", damit der Browser es vorzieht. Voraussetzung für beides sind Breiten- und Höhenangaben am Bild.

Steht oben nur ein großes Bild, können Sie den Schwellenwert senken. Im Labor setzte WordPress mit diesem Filter ab dem zweiten Bild loading="lazy":

add_filter( 'wp_omit_loading_attr_threshold', function () {
	return 1;
} );

Weil WordPress das Attribut selbst setzt, prüfen Sie bei zusätzlichen Lazy-Load-Plugins oder entsprechenden Optionen in Cache-Plugins genau, ob sie noch etwas beitragen. Zwei Mechanismen für dieselbe Aufgabe erschweren die Fehlersuche, wenn das oberste Bild zu spät erscheint.

Verifizieren: Rufen Sie eine Seite auf und prüfen Sie den Quelltext, etwa mit curl -s https://ihre-domain.de/seite/ | grep -o '<img[^>]*>'. Das erste Bild hat fetchpriority="high" und kein loading="lazy", spätere Bilder haben loading="lazy".

Bildoptimierung bleibt Pflege: Plugins erhalten Updates, PHP und Bildbibliotheken ändern sich, nach Theme-Wechseln prüfen Sie die Ausgabe erneut. Wer diese Pflege nicht selbst im Kalender halten möchte, kann sie abgeben: Die WordPress-Wartung von wordpressupdate.de übernimmt Updates von WordPress, Plugins und Themes mit Kompatibilitätsprüfung und wöchentliche Backups auf externen Speicher, eine einmalige Homepage-Analyse gehört dazu.

Typische Fehler

• Es entstehen weiter nur JPEG-Dateien: Der Server kann das Zielformat nicht schreiben, oder die Bilder wurden vor dem Aktivieren hochgeladen. Schritt 1 wiederholen und alte Bilder mit Schritt 4 neu erzeugen.
• Bilder in alten Beiträgen fehlen nach dem Umwandeln: wp media regenerate lief ohne --skip-delete. Die gelöschten JPEG-Größen aus dem Backup zurückspielen oder den Befehl erneut mit --skip-delete ausführen und die Dateien aus der Sicherung ergänzen.
• „Der Server kann das Bild nicht verarbeiten. […] Die maximale Größe sollte 2560 Pixel nicht überschreiten.“: Der Server hat zu wenig Arbeitsspeicher oder Zeit für die Umwandlung. Bild vor dem Upload verkleinern, bei AVIF auf WebP ausweichen oder beim Hoster memory_limit erhöhen. Im Labor stand er auf 128M.
• „… überschreitet das Upload-Limit für diese Website.“: Die Datei ist größer als upload_max_filesize von PHP, im Labor 2 MB. Fotos vorher verkleinern oder den Wert beim Hoster anpassen.
• Layout verschoben nach Aktivieren des Picture-Elements: CSS mit Kindselektor wie figure > img greift nicht mehr. Option wieder abschalten oder CSS anpassen.

Häufige Fragen

WebP oder AVIF: Was soll ich wählen?

AVIF erzeugt laut Ankündigung zu WordPress 6.5 auf make.wordpress.org meist kleinere Dateien als JPEG und WebP. Die Umwandlung braucht aber mehr Rechenleistung. Auf schwachem Shared Hosting ist WebP die robustere Wahl, auf einem eigenen Server spricht wenig gegen AVIF.

Verliere ich Qualität durch die Umwandlung?

Jede verlustbehaftete Kompression kostet Qualität. WordPress speichert JPEG standardmäßig mit Qualität 82 und WebP mit 86. Das Original bleibt beim Upload immer erhalten, Sie können also später mit anderen Einstellungen neu erzeugen.

Testumfang

Wir haben den Ablauf in einer Testumgebung mit WordPress 7.1.2 und Imagick durchgespielt, vom AVIF-Upload bis zum Neuberechnen der Bildgrößen mit wp media regenerate. Auch das Plugin „Modern Image Formats“ mit Fallback-Bildern haben wir dabei geprüft.

Nicht getestet haben wir Server, auf denen nur GD läuft, sowie Shared Hosting mit knappen Limits. Probieren Sie die Schritte deshalb zuerst auf einer Kopie Ihrer Website aus.

Fazit

Mit einer kurzen Prüfung der Bildbibliothek, einem Plugin oder drei Filtern und einem vorsichtigen Neuerzeugen der vorhandenen Bilder verkleinern Sie die Datenmenge Ihrer Website deutlich, ohne Inhalte anzufassen. Lazy Loading erledigt WordPress bereits selbst, hier genügt eine Kontrolle des Quelltexts. Wenn Sie Updates und Backups rund um solche Einstellungen lieber abgeben, übernimmt das die WordPress-Wartung von Marcel Schönfelder.

Weiterführende Anleitungen und Quellen

• Staging-Umgebung für WordPress einrichten
• WordPress-Updates per WP-CLI
• WordPress-Backup-Strategie: Dateien, Datenbank und Aufbewahrung
• Make WordPress Core: WordPress 6.5 adds AVIF support
• Modern Image Formats im Plugin-Verzeichnis von wordpress.org
• Developer Reference: image_editor_output_format
• Developer Reference: wp_omit_loading_attr_threshold
• WP-CLI-Handbuch: wp media regenerate