Bilder in modernen Formaten bereitstellen:
WebP-Anleitung

Was „Bilder in modernen Formaten bereitstellen“ bedeutet

Lighthouse und PageSpeed Insights zeigen diesen Hinweis, wenn eine Seite JPEG- oder PNG-Bilder lädt, die als WebP oder AVIF deutlich kleiner wären. Die Prüfung listet jedes Bild mit der geschätzten Einsparung auf. Neuere Versionen geben denselben Rat in der Erkenntnis Bildbereitstellung verbessern.

1. Führen Sie PageSpeed Insights aus und notieren Sie die aufgeführten Bild-URLs.
2. Erstellen Sie WebP- (oder AVIF-)Versionen: Qualität 75–85 für Fotos, verlustfrei für Screenshots.
3. Liefern Sie sie über ein <picture>-Element, Serverregeln, ein CDN oder ein CMS-Plugin aus (Details unten).
4. Wiederholen Sie den Test. Konvertierte Bilder verschwinden aus der Liste.

Das Picture-Element mit JPG-Fallback

Das HTML-Element <picture> ist die zuverlässigste Methode, um WebP mit einem Fallback für ältere Browser bereitzustellen. Es ermöglicht dem Browser, das beste verfügbare Format ohne JavaScript auszuwählen:

<picture>
  <source srcset="hero.webp" type="image/webp">
  <source srcset="hero.jpg" type="image/jpeg">
  <img src="hero.jpg" alt="Hero banner" width="1200" height="630"
       loading="lazy" decoding="async">
</picture>

Wenn der Browser WebP unterstützt, lädt er hero.webp herunter. Andernfalls fällt er auf hero.jpg zurück. Das <img>-Tag dient als letzter Fallback und enthält die Attribute alt, width, height sowie die Ladeattribute.

Für responsive images kombinieren Sie das <picture>-Element mit srcset und sizes, um je nach Viewport-Breite unterschiedliche Auflösungen bereitzustellen:

<picture>
  <source
    srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1200.webp 1200w"
    sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 600px"
    type="image/webp">
  <img
    srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
    sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 600px"
    src="photo-800.jpg" alt="Product photo" width="800" height="600"
    loading="lazy" decoding="async">
</picture>

Serverseitige Content Negotiation

Content Negotiation prüft den Accept-Header des Browsers und liefert WebP transparent aus — ohne HTML-Änderungen. Wenn ein Browser ein Bild anfordert und image/webp in seinem Accept-Header enthält, antwortet der Server mit der WebP-Version.

Nginx-Konfiguration

Setzen Sie die map in den http-Block und die location in Ihren Server-Block, um WebP-Varianten auszuliefern, wenn sie neben den Originaldateien vorhanden sind:

map $http_accept $webp_suffix {
    default   "";
    "~*webp"  ".webp";
}

server {
    location ~* \.(jpe?g|png)$ {
        add_header Vary Accept;
        try_files $uri$webp_suffix $uri =404;
    }
}

Dies prüft, ob eine .webp-Datei neben dem Original existiert (z. B. photo.jpg.webp neben photo.jpg). Unterstützt der Browser WebP und die Datei ist vorhanden, liefert Nginx sie aus. Der Header Vary: Accept stellt sicher, dass CDNs und Proxy-Caches separate Versionen für unterschiedliche Browser-Fähigkeiten speichern.

Apache .htaccess-Regeln

Für Apache-Server fügen Sie diese Rewrite-Regeln in Ihre .htaccess-Datei ein:

RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME}.webp -f
RewriteRule ^(.+)\.(jpe?g|png)$ $1.$2.webp [T=image/webp,E=accept:1,L]

Header append Vary Accept env=REDIRECT_accept

Das gleiche Prinzip gilt: Akzeptiert der Browser WebP und ist eine .webp-Variante auf dem Datenträger vorhanden, liefert Apache sie transparent aus. Keine HTML-Änderungen erforderlich. Das Flag E=accept:1 setzt die Variable, die die letzte Zeile benötigt, um den Header Vary: Accept hinzuzufügen.

CDN-Auto-Konvertierungslösungen

Der einfachste Ansatz für die meisten Websites ist es, Ihr CDN die WebP-Konvertierung automatisch übernehmen zu lassen. Sie laden JPG/PNG-Originale hoch, und das CDN liefert optimiertes WebP an unterstützte Browser mit null Code-Änderungen.

CDN-basierte Lösungen verwalten Content Negotiation, Caching und Cache-Invalidierung automatisch. Sie sind der empfohlene Ansatz für dynamische Websites, auf denen Benutzer oder Redakteure Bilder hochladen — da Sie nicht vorhersagen können, welche Bilder erscheinen werden, ist automatische Konvertierung unerlässlich.

WordPress-WebP-Einrichtung

WordPress 5.8+ unterstützt WebP-Uploads nativ, aber Sie benötigen ein Plugin, um vorhandene Bilder zu konvertieren und optimal auszuliefern:

• ShortPixel Image Optimizer: Konvertiert vorhandene Bilder on-the-fly zu WebP. Liefert WebP via <picture>-Element oder .htaccess-Rewrite. Kostenlos: 100 Bilder/Monat
• Imagify: Massenkonvertierung mit drei Qualitätsstufen (normal, aggressiv, ultra). Integriert sich mit WP Rocket für Caching. Kostenlos: 20 MB/Monat
• EWWW Image Optimizer: Erstellt beim Upload automatisch WebP-Kopien. Schreibt Bild-URLs per Plugin oder CDN um. Kostenlose unbegrenzte lokale Optimierung
• WebP Express: Schlankes Plugin, das sich ausschließlich auf WebP-Konvertierung fokussiert. Konfiguriert .htaccess oder nutzt PHP-basierte Auslieferung. Kostenlos und Open Source

Für die meisten WordPress-Websites sind ShortPixel oder EWWW die sichersten Entscheidungen. Sie decken die gesamte Pipeline ab: Konvertierung beim Upload, Erstellung von WebP-Varianten, HTML-Umschreibung zur WebP-Auslieferung und Fallback auf JPG/PNG für nicht unterstützte Browser.

Build-Tool-Integration

Für statische Websites und JavaScript-Frameworks (React, Vue, Next.js, Nuxt) integrieren Sie die WebP-Generierung in Ihre Build-Pipeline, damit Bilder zur Build-Zeit automatisch konvertiert werden.

Webpack (image-minimizer-webpack-plugin)

const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");

module.exports = {
  optimization: {
    minimizer: [
      new ImageMinimizerPlugin({
        generator: [{
          preset: "webp",
          implementation: ImageMinimizerPlugin.sharpGenerate,
          options: { encodeOptions: { webp: { quality: 80 } } }
        }]
      })
    ]
  }
};

Vite (vite-plugin-imagemin)

import viteImagemin from "vite-plugin-imagemin";

export default defineConfig({
  plugins: [
    viteImagemin({
      webp: { quality: 80 }
    })
  ]
});

Build-Zeit-Konvertierung eignet sich gut für Websites mit einem bekannten Bildsatz (Marketing-Seiten, Dokumentation, Blogs). Für nutzergenerierten Content bevorzugen Sie CDN-basierte Lösungen, die Bilder dynamisch verarbeiten.

Optimale Qualitätseinstellungen

Die richtige WebP-Qualitätseinstellung ist entscheidend. Zu niedrig entstehen sichtbare Artefakte; zu hoch verlieren Sie die Dateigrößenvorteile. Hier sind empfohlene Einstellungen nach Inhaltstyp:

Den Effekt messen

Messen Sie nach der WebP-Implementierung die tatsächliche Performance-Verbesserung mit diesen Tools:

• Google Lighthouse: Führen Sie Audits vor und nach dem Wechsel durch. Prüfen Sie die Diagnose „Bilder in modernen Formaten bereitstellen“ (in neueren Versionen die Erkenntnis „Bildbereitstellung verbessern“); konvertierte Bilder sollten aus der Liste verschwinden. Vergleichen Sie Performance-Score, LCP und Total Blocking Time
• PageSpeed Insights: Testet Mobile und Desktop von Google-Servern aus. Die Bildempfehlungen (in älteren Berichten unter „Empfehlungen“, in neueren unter „Statistiken“) sollten die konvertierten Bilder nicht mehr auflisten
• WebPageTest: Liefert detaillierte Wasserfall-Diagramme mit einzelnen Bildladezeiten. Vergleichen Sie Filmstreifen-Ansichten vor und nach dem Wechsel, um Unterschiede in der visuellen Rendergeschwindigkeit zu erkennen
• Chrome DevTools Netzwerk-Tab: Filtern Sie nach Typ „Img“ und vergleichen Sie die gesamte Übertragungsgröße. Prüfen Sie, ob der Content-Type-Header image/webp für konvertierte Bilder anzeigt
• Search Console Core Web Vitals: Beobachten Sie Felddaten über 2–4 Wochen nach dem Wechsel. Achten Sie auf Verbesserungen beim LCP und beim Anteil der „Guten URLs“

Überlegungen zum Lazy Loading

WebP und Lazy Loading ergänzen sich hervorragend zur Performance-Maximierung, aber es gibt wichtige Implementierungsdetails:

• Above-the-fold-Bilder: Laden Sie Ihr Hero-Bild oder sichtbare Bilder beim ersten Seitenaufruf NICHT lazy. Verwenden Sie loading="eager" (Standard) und ergänzen Sie fetchpriority="high" für das LCP-Bild
• Below-the-fold-Bilder: Setzen Sie loading="lazy" bei allen anderen Bildern. Der Browser verzögert das Laden, bis der Nutzer in deren Nähe scrollt
• Dimensionen immer angeben: Geben Sie bei jedem <img>-Tag explizite width- und height-Attribute an, um Cumulative Layout Shift (CLS) zu vermeiden
• Asynchron dekodieren: Fügen Sie decoding="async" hinzu, damit der Browser Bilder außerhalb des Main Threads dekodieren kann

<!-- Hero image: eager loading, high priority -->
<img src="hero.webp" alt="..." width="1200" height="630"
     fetchpriority="high" decoding="async">

<!-- Below-the-fold: lazy loading -->
<img src="product.webp" alt="..." width="600" height="400"
     loading="lazy" decoding="async">

Warum die Warnung nach der Konvertierung weiter erscheint

• Altes HTML oder Cache: Seite oder CDN liefern noch das ursprüngliche JPEG aus. Leeren Sie die Caches und prüfen Sie den Content-Type des Bildes in den DevTools.
• CSS-Hintergründe: <picture> greift nicht für background-image. Verwenden Sie serverseitige Content Negotiation oder image-set() in CSS.
• Bilder von Drittanbietern: Anzeigen, Einbettungen und Widgets laden Bilder, die Sie nicht kontrollieren.
• Serverregel greift nicht: Bei Accept-basierten Rewrites muss die Anfrage image/webp enthalten, und neben dem Original muss eine .webp-Datei existieren.