---
title: "Bilder in WordPress optimieren: WebP, AVIF und Lazy Loading richtig nutzen"
date: 2026-09-30T21:51:14+02:00
modified: 2026-10-23T22:12:34+02:00
category: wordpress
type: how_to
author: Marcel Schönfelder
canonical: https://s-edv.com/anleitungen/wordpress-bilder-optimieren-webp-avif-lazy-loading
keywords:
  - WordPress
  - Bilder
  - WebP
  - AVIF
  - Performance
  - WP-CLI
reading_time: 10
---

# 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.

**Kurzfassung:** Prüfen Sie unter *Werkzeuge > Website-Zustand > Bericht > Medienverarbeitung*, ob Ihr Server WebP und AVIF schreiben kann. Das Plugin „Modern Image Formats“ des WordPress-Performance-Teams erzeugt danach für neue JPEG- und PNG-Uploads WebP- oder AVIF-Zwischengrößen, wahlweise mit JPEG als Rückfalloption im `<picture>`-Element. Wer lieber ohne Plugin arbeitet, nutzt den Filter `image_editor_output_format` in einem Must-Use-Plugin. Vorhandene Bilder wandeln Sie mit `wp media regenerate --skip-delete` um, damit alte Dateinamen in Beiträgen erreichbar bleiben, und tauschen die Bildadressen wichtiger Seiten danach gezielt aus. Lazy Loading setzt WordPress selbst, das erste große Bild bekommt stattdessen `fetchpriority="high"`.

## 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:

```bash
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:

```plaintext
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.

> **Prüfen:** 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“](https://wordpress.org/plugins/webp-uploads/), 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:

```bash
$ 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:

```plaintext
<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](https://s-edv.com/anleitungen/wordpress-staging-umgebung-wp-cli-einrichten).

> **Prüfen:** 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.

Datei: `wp-content/mu-plugins/bilder-webp.php`

```php
<?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.

> **Prüfen:** `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](https://s-edv.com/anleitungen/wordpress-backup-strategie-dateien-datenbank-aufbewahrung).

```bash
# Einzelnes Bild testen (ID aus der Mediathek)
```

```bash
$ wp media regenerate 4 --skip-delete --yes
```

```bash
# Danach alle Bilder
```

```bash
$ 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:

```bash
$ 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](https://s-edv.com/anleitungen/wordpress-updates-wp-cli-core-plugins-themes).

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`.

> **Prüfen:** 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"`:

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

Prüfen Sie zusätzliche Lazy-Load-Funktionen in Plugins. Doppelte Mechanismen erschweren die Fehlersuche, wenn das oberste Bild zu spät erscheint.

> **Prüfen:** 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](https://wordpressupdate.de/?utm_source=s-edv.com&utm_medium=artikel&utm_campaign=52) ü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.

## 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](https://wordpressupdate.de/?utm_source=s-edv.com&utm_medium=fazit&utm_campaign=52).

## Weiterführende Anleitungen und Quellen

- [Staging-Umgebung für WordPress einrichten](https://s-edv.com/anleitungen/wordpress-staging-umgebung-wp-cli-einrichten)
- [WordPress-Updates per WP-CLI](https://s-edv.com/anleitungen/wordpress-updates-wp-cli-core-plugins-themes)
- [WordPress-Backup-Strategie: Dateien, Datenbank und Aufbewahrung](https://s-edv.com/anleitungen/wordpress-backup-strategie-dateien-datenbank-aufbewahrung)
- [Make WordPress Core: WordPress 6.5 adds AVIF support](https://make.wordpress.org/core/2024/02/23/wordpress-6-5-adds-avif-support/)
- [Modern Image Formats im Plugin-Verzeichnis von wordpress.org](https://wordpress.org/plugins/webp-uploads/)
- [Developer Reference: image_editor_output_format](https://developer.wordpress.org/reference/hooks/image_editor_output_format/)
- [Developer Reference: wp_omit_loading_attr_threshold](https://developer.wordpress.org/reference/hooks/wp_omit_loading_attr_threshold/)
- [WP-CLI-Handbuch: wp media regenerate](https://developer.wordpress.org/cli/commands/media/regenerate/)