Die kurze Antwort
Für die meisten Website-Bilder gewinnt WebP bei der Dateigröße bei gleichwertiger Qualität. Aber jedes Format hat immer noch eine Aufgabe, bei der es wirklich besser ist, also „immer WebP verwenden“ ist nicht ganz richtig.
JPG: Das bewährte Fotografieformat
JPG bleibt das am weitesten verbreitete Format für Fotografien und komplexe Bilder mit vielen Farbtönen. Es verwendet verlustbehaftete Kompression, was bedeutet, dass einige Bilddaten entfernt werden – aber auf eine Weise, die das menschliche Auge normalerweise nicht bemerkt.
Wann JPG verwenden
- Fotografien und realistische Bilder: Porträts, Landschaften, Produktfotos. Eine typische hochauflösende Produktfoto kann von 8–12 MB (unkomprimiert) auf 400–800 KB komprimiert werden, ohne sichtbaren Qualitätsverlust.
- E-Mail-Anhänge: Nahezu alle E-Mail-Clients seit 20+ Jahren unterstützen JPG ohne Probleme.
- Druckproduktion: Druckereien erwarten häufig JPG oder TIFF-Dateien. Eine 300 DPI JPG-Datei für ein 8×10-Zoll-Druckstück liegt typischerweise bei 2–5 MB.
- Legacy-Software: Ältere Systeme, CMS-Plattformen und Geräte, die vor 2015 entwickelt wurden.
Größenbeispiel
Eine 2000×1500px Produktfoto: JPG (90% Qualität) = 350 KB vs. PNG = 1,2 MB. Das JPG ist 71% kleiner.
PNG: Das Format für Grafiken und Transparenz
PNG verwendet verlustfreie Kompression, wobei alle ursprünglichen Bilddaten erhalten bleiben. Es unterstützt auch Transparenz (Alpha-Kanal), was JPG nicht kann.
Wann PNG verwenden
- Logos und Icons: Ein Unternehmenslogo muss pixelgenau sein. PNG bewahrt scharfe Kanten und solide Farben ohne Artefakte. Eine 500×500px Icon-Datei liegt typischerweise bei 15–50 KB.
- Grafiken mit Text: Diagramme, Infografiken, Screenshots. Der Text bleibt lesbar und scharf.
- Transparenzhintergründe: Produktbilder mit transparentem Hintergrund, Website-Elemente, die über andere Inhalte gelegt werden.
- Illustration und digitale Kunst: Bilder mit flachen Farben und definierten Formen.
Größenbeispiel
Ein 800×600px Diagramm mit Text: PNG = 320 KB. Das gleiche als JPG mit sichtbarem Rauschen um Text = 280 KB, aber die Qualitätseinbuße ist störend. PNG ist hier die bessere Wahl, obwohl es größer ist.
WebP: Das moderne, effiziente Format
WebP ist von Google entwickelt und kombiniert die Vorteile beider Formate. Es unterstützt sowohl verlustbehaftete als auch verlustfreie Kompression, Alpha-Transparenz und animierte Bilder – alles mit deutlich besserer Kompressionseffizienz.
Größenvorteile (konkrete Messwerte)
- 25–34% kleiner als JPG bei gleicher visueller Qualität
- 26% kleiner als PNG bei gleicher visueller Qualität
- Beispiel: Eine 2000×1500px Foto-Sammlung mit 50 Bildern = 17,5 MB als JPG, 13 MB als WebP = 3,5 MB monatliche Bandbreiteneinsparung bei 10.000 Website-Besuchern
Browser-Unterstützung
Über 96% der Browser in aktiver Nutzung ab 2024 unterstützen WebP nativ. Das schließt Chrome, Edge, Firefox und Safari (ab Version 14, 2020) ein. Nur ältere Versionen und Opera Mini haben Probleme.
Wann WebP verwenden
- Alle modernen Websites, Blogs und E-Commerce-Seiten
- Mobile App-Inhalte (iOS und Android)
- Hochtraffic-Websites, wo Bandbreiteneinsparungen messbar sind
- Progressive Web Apps und moderne Single-Page Applications
Wann Sie JPG oder PNG trotzdem vorziehen sollten
- E-Mail-Kampagnen: Manche Mailclients (insbesondere ältere Outlook-Versionen) verarbeiten WebP inconsistent. JPG bleibt die sichere Wahl.
- Druck und Produktion: Druckereien haben oft standardisierte Workflows für JPG/TIFF. Konvertierung kostet Zeit und kann Probleme verursachen.
- Ältere Geräte und Software: Embedded-Systeme, industrielle Kameras, proprietäre Softwarelösungen die 2010–2015 entwickelt wurden.
- Archivierung: JPG und PNG sind etablierte Standards. WebP-Unterstützung in Archivierungssoftware entwickelt sich noch immer.
Die praktische Implementierungsstrategie
Für Websites empfehlen wir einen progressiven Ansatz: WebP als primäres Format mit automatischem JPG/PNG-Fallback für nicht unterstützende Browser bereitstellen. Dies kann über HTML picture-Tags oder via Server-seitige Content-Negotiation erfolgen.
Beispiel: Ein modernes CMS konvertiert hochgeladene Bilder automatisch zu WebP und speichert das Original. Für E-Mail-Versand oder Druck wird das Original oder eine JPG-Version verwendet. Dies erfordert minimale zusätzliche Speicherung bei maximaler Flexibilität.