WebP für Websites: Warum Sie von
JPG/PNG wechseln sollten

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>

Unterstützt der Browser WebP, 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

Fügen Sie dies Ihrem Nginx-Serverblock hinzu, um WebP-Varianten bereitzustellen, 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,L]

Header append Vary Accept env=REDIRECT_accept

Das gleiche Prinzip gilt: Akzeptiert der Browser WebP und eine .webp-Variante ist auf dem Datenträger vorhanden, liefert Apache sie transparent aus. Keine HTML-Änderungen erforderlich.

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 Formaten der nächsten Generation bereitstellen" — sie sollte verschwinden. Vergleichen Sie Performance-Score, LCP und Total Blocking Time
• PageSpeed Insights: Testet Mobile und Desktop von Google-Servern aus. Im Abschnitt „Empfehlungen" sollte Bildoptimierung nicht mehr aufgeführt sein
• 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">