Website-Bilder sicher auf WebP umstellen, Schritt für Schritt
WebP kann Ihre Bilder bei ähnlicher Qualität etwa ein Viertel bis ein Drittel kleiner machen als JPG, und jeder aktuelle Browser kann es anzeigen. Die Umstellung ist einfach, wenn Sie sie in der richtigen Reihenfolge vornehmen und ein paar Fallen vermeiden. Dieser Ratgeber erklärt, was dafür und dagegen spricht, und gibt Ihnen einen sicheren Plan.
Was WebP ist und warum es sich lohnt, darüber nachzudenken
WebP ist ein von Google entwickeltes Bildformat. Es kann Fotos mit etwas Datenverlust komprimieren wie JPG oder verlustfrei wie PNG und unterstützt Transparenz und Animation. Da es effizienter ist, wird dasselbe Bild meist deutlich kleiner, was schnellere Seiten und geringere Bandbreitenkosten bedeutet. Der WebP-Erklärer liefert den Hintergrund.
WebP im Vergleich zu JPG und PNG: Vor- und Nachteile
| Format | Stärken | Schwächen |
|---|---|---|
| WebP | Kleinere Dateien, Transparenz, verlustbehafteter und verlustfreier Modus | Einige ältere Programme und Plattformen lehnen es noch ab |
| JPG | Funktioniert überall | Größere Dateien, keine Transparenz |
| PNG | Verlustfrei, Transparenz | Bei Fotos sehr groß |
Vorteile der Umstellung
- Bei gleicher visueller Qualität typischerweise 25 bis 35 Prozent kleiner als JPG.
- Ein Format kann in vielen Fällen sowohl JPG als auch PNG ersetzen.
- Bessere Seitengeschwindigkeit, was die Core Web Vitals unterstützt.
Nachteile und Grenzen
- Manche E-Mail-Programme, ältere Software und Vorschauen in sozialen Netzwerken kommen mit WebP nicht gut zurecht.
- Ein bestehendes JPG neu in WebP zu kodieren spart weniger, als vom Original auszugehen.
- Sie müssen Fallbacks verwalten und Ergebnisse testen.
Welche Bilder Sie umwandeln und welche Sie in Ruhe lassen
- Umwandeln: große Fotos, Titelbilder, Produktbilder und jedes PNG, das eigentlich ein Foto ist.
- Mit Vorsicht umwandeln: PNG-Grafiken und Screenshots, bei denen verlustfreies WebP oder eine hohe Qualitätseinstellung die Kanten scharf hält.
- In Ruhe lassen: Vektorlogos und -icons, die SVG bleiben sollten, und winzige Dateien, die kaum etwas gewinnen.
- Als JPG oder PNG behalten: Open-Graph- und X-Card-Bilder (Twitter) sowie alles, was Sie per E-Mail oder in Apps teilen, die WebP womöglich nicht akzeptieren.
Schritt für Schritt: sicher umstellen
- 1Prüfen Sie die wichtigen Seiten. Lassen Sie Schlüsselseiten durch PageSpeed Insights laufen und sehen Sie sich den Hinweis zum Ausliefern von Bildern in Next-Gen-Formaten an. Er listet Dateien und mögliche Einsparungen auf.
- 2Wandeln Sie von den Originalen um. Für Fotos nutzen Sie JPG in WebP, für Grafiken und Screenshots PNG in WebP, das die Transparenz behält. Eine Qualität von 75 bis 85 passt für die meisten Fotos.
- 3Vergleichen Sie, bevor Sie ersetzen. Öffnen Sie jedes Ergebnis neben dem Original und achten Sie auf feine Details, Text und weiche Verläufe. Ist das WebP nicht kleiner oder sehen Sie Schäden, behalten Sie das Original oder erhöhen die Qualität.
- 4Liefern Sie einen Fallback aus. Verwenden Sie ein
picture-Element mit einer WebP-Quelle und einem JPG- oder PNG-img, wie im Ratgeber zu responsiven Bildern gezeigt. Viele CMS, Plugins und CDNs können das für Sie übernehmen. - 5Skalieren und komprimieren Sie auch. Die Umwandlung ist ein guter Moment, Bilder mit Bild skalieren gleich richtig zu dimensionieren.
- 6Behalten Sie die Originale. Sie sind Ihre Quelle für künftige Bearbeitungen und Ihr Sicherheitsnetz.
- 7Testen Sie erneut und beobachten Sie die Ergebnisse. Lassen Sie PageSpeed Insights noch einmal laufen, prüfen Sie Schlüsselseiten auf einem Handy und suchen Sie nach kaputten Bildern.
Häufige Fehler
- Ein stark komprimiertes JPG umwandeln, was wenig spart und sichtbare Schäden hinzufügen kann. Gehen Sie vom Original aus.
- Fallbacks ganz entfernen. Sie sind eine günstige Absicherung für ungewöhnliche Browser und Programme.
- Jede Datei umwandeln, einschließlich winziger Icons und SVG-Logos.
- WebP für Open-Graph-Bilder verwenden, die manche Plattformen ignorieren.
- Die Qualität nicht vergleichen. Sehen Sie sich das Ergebnis immer an, bevor Sie eine Datei ersetzen.
Häufig gestellte Fragen
Ist WebP besser als JPG?
Für Websites meist ja. WebP-Dateien sind bei ähnlicher Qualität typischerweise 25 bis 35 Prozent kleiner, und WebP unterstützt zudem Transparenz. JPG bleibt die sicherste Wahl, wenn Sie Dateien mit Programmen teilen, die WebP womöglich nicht akzeptieren.
Unterstützen alle Browser WebP?
Jeder aktuelle große Browser kann WebP anzeigen. Behalten Sie einen JPG- oder PNG-Fallback für ältere Browser, E-Mail-Programme und andere Werkzeuge.
Sollte ich PNG in WebP umwandeln?
Bei als PNG gespeicherten Fotos ja, die Ersparnis ist groß. Bei Grafiken und Screenshots funktioniert WebP ebenfalls und behält die Transparenz, vergleichen Sie aber das Ergebnis, damit die Kanten scharf bleiben. Behalten Sie SVG für Vektorlogos.
Schadet WebP meinem SEO?
Nein. Google kann WebP-Bilder indexieren, und kleinere Dateien helfen Ihrer Seitengeschwindigkeit. Behalten Sie beschreibenden Alternativtext und Dateinamen bei.
Sollte ich AVIF statt WebP verwenden?
AVIF kann noch kleiner sein, braucht aber länger bei der Erzeugung und ist etwas weniger universell. WebP ist für die meisten Websites die einfachere Wahl, und AVIF können Sie später mit einem picture-Element ergänzen. Was dafür und dagegen spricht, steht im AVIF-Ratgeber.