WebP vs. JPG: Welches Format ist besser für deine Website?
Die kurze Antwort (und warum es kompliziert ist)
Für die Bereitstellung im Web ist WebP fast immer die bessere Wahl. Es liefert kleinere Dateien bei vergleichbarer Qualität und unterstützt Transparenz. Aber JPG wird nicht verschwinden, denn es wird universell unterstützt, ist kampferprobt und manchmal immer noch die einzige Option. Die eigentliche Frage ist nicht, wer der theoretische Gewinner ist, sondern welches Format zu deinem spezifischen Workflow passt. Google hat WebP 2010 eingeführt, und jahrelang war die lückenhafte Browser-Unterstützung eine valide Ausrede, es zu ignorieren. Diese Ausrede zählt nicht mehr. Stand 2024 funktioniert WebP überall dort, wo es zählt: Chrome, Firefox, Safari (seit v14), Edge und Opera. Das sind laut Can I Use über 97 % des weltweiten Browser-Traffics. Wenn du aus Gewohnheit immer noch standardmäßig JPG verwendest, lässt du Performance auf der Strecke liegen. Trotzdem gibt es Situationen, in denen JPG die pragmatischere Wahl ist. Vielleicht zerschießt dein altes CMS die WebP-Metadaten, oder dein Print-Workflow erfordert ein bestimmtes Farbprofil. Vielleicht verstehen die internen Systeme deines Kunden nur JPEG. Dieser Artikel taucht in die technischen Unterschiede ein, zeigt, wo jedes Format glänzt, und hilft dir bei der Entscheidung, was sich zu konvertieren lohnt und was du einfach in Ruhe lassen solltest.
Dateigröße und Komprimierung: Was die Zahlen wirklich zeigen
Googles eigene Benchmarks behaupten, dass verlustbehaftete WebP-Bilder 25–34 % kleiner sind als vergleichbare JPEGs. Unabhängige Tests bestätigen das, auch wenn die Ergebnisse je nach Bildinhalt variieren können. Fotos mit weichen Farbverläufen lassen sich in beiden Formaten gut komprimieren, aber bei Bildern mit scharfen Kanten, Text oder einfarbigen Flächen zeigt WebP dramatische Einsparungen, manchmal über 40 %. Nehmen wir mal echte Zahlen. Ein Produktfoto mit 1920×1080 Pixeln, das aus Photoshop als JPG mit Qualität 80 gespeichert wird (Datei > Exportieren > Exportieren als > Qualität: 80), ist vielleicht 280 KB groß. Dasselbe Bild als WebP mit einer visuell identischen Qualitätseinstellung ist oft nur 180–200 KB groß. Bei einem Produktkatalog mit 500 Bildern sind das schnell mal 40 MB Ersparnis. Das hat einen echten Einfluss auf die Ladezeiten der Seite und deine Hosting-Rechnung. Die Magie von WebP liegt in seinem fortschrittlicheren Kompressionsalgorithmus, der auf der VP8-Videokodierung basiert. Er verwendet eine prädiktive Kodierung, bei der jeder Pixelblock aus seinen Nachbarn „erraten“ und nur die winzige Korrektur gespeichert wird. Die ältere Diskrete-Kosinus-Transformation (DCT)-Technologie von JPG ist effektiv, aber einfach nicht so effizient. Sei dir bewusst, dass der Effizienzvorteil von WebP bei sehr hohen Qualitätseinstellungen (90+) fast verschwindet. Wenn du Master-Kopien archivierst oder Bilder ohne sichtbare Artefakte benötigst, wird der Größenunterschied zwischen den beiden Formaten vernachlässigbar. In diesen Fällen bist du mit PNG oder sogar AVIF besser bedient, obwohl AVIF seine eigenen Kopfschmerzen bei der Browser-Unterstützung mit sich bringt.
Wo JPG immer noch die Nase vorn hat
Die Dominanz von JPG ist nicht nur Nostalgie; es hat echte, praktische Vorteile, die du verstehen musst, bevor du deine gesamte Asset-Bibliothek per Stapelverarbeitung konvertierst. Seine größte Stärke ist die Kompatibilität. JPG-Dateien lassen sich in jeder nur denkbaren Software öffnen, vom neuesten Photoshop über Windows Paint bis hin zu irgendeinem uralten internen Tool, das deine Firma immer noch verwendet. Die Unterstützung für WebP in Desktop-Software wird besser, ist aber immer noch inkonsistent. Adobe hat in Photoshop 23.2 (Feb 2022) endlich native WebP-Unterstützung hinzugefügt, aber ältere Versionen benötigen ein Plugin. Für Nutzer von Lightroom Classic erfordert der Export nach WebP ein Plugin wie LR/Mogrify oder einen umständlichen externen Konvertierungsschritt. Jeder, der schon einmal versucht hat, ein Team von Designern auf einen Nenner zu bringen, kennt den Schmerz eines nicht unterstützten Formats. Dann ist da noch der Druck. JPG unterstützt den CMYK-Farbmodus, den der kommerzielle Druck erfordert; WebP nicht. Wenn deine Bilder möglicherweise in einer Broschüre oder auf einem Poster landen, ist die Konvertierung zu WebP und zurück eine Einladung für Farbprobleme und unnötige Komprimierungsschritte. Behalte deine für den Druck bestimmten Bilder einfach als JPG oder TIFF. Deine Kamera nimmt nicht in WebP auf. Die JPGs, die aus einer modernen Canon oder Sony kommen, sind bereits für den jeweiligen Sensor hochgradig optimiert. Diese Dateien zur Archivierung in WebP zu konvertieren, ist eine schlechte Idee – du komprimierst eine bereits komprimierte Datei erneut, was Artefakte hinzufügt, ohne einen nennenswerten Größenvorteil zu bringen. Und schließlich gibt es Plattformen, die einfach nicht mitspielen. Während große soziale Netzwerke wie Facebook und Instagram alles, was du hochlädst, neu verarbeiten, zeigen viele E-Mail-Clients (besonders ältere Outlook-Versionen) einfach ein kaputtes Bild an, wenn du ein WebP einbettest.
Transparenz, Animation und andere Format-Features
Bei der Transparenz lässt WebP das JPG-Format weit hinter sich. JPG hat keinen Alphakanal. Punkt. Wenn du einen transparenten Hintergrund für ein Logo oder ein freigestelltes Produkt brauchst, war PNG bisher deine einzige Option. WebP ändert das, indem es volle 8-Bit-Alpha-Transparenz unterstützt. Dadurch kannst du schwere PNGs durch viel kleinere WebP-Dateien ersetzen. Ein 450 KB großes transparentes PNG eines Produktfotos kann als WebP oft auf unter 150 KB schrumpfen, ohne an Qualität zu verlieren. WebP unterstützt auch Animationen, was es zu einem modernen, leichtgewichtigen Ersatz für das uralte GIF-Format macht. Laut Google sind animierte WebPs typischerweise 64 % kleiner als äquivalente GIFs. Wenn du immer noch animierte GIFs für UI-Feedback oder Produktdemos verwendest, ist der Wechsel zu animiertem WebP einer der einfachsten Performance-Gewinne, die du erzielen kannst. JPG ist ein strikt statisches, opaques Format. Keine Transparenz, keine Animation. Man weiß, woran man ist. In gewisser Weise ist diese Einfachheit ein Feature. Sie garantiert ein vorhersagbares Verhalten in jedem Tool und auf jeder Plattform, ohne Kompatibilitätsüberraschungen. Für echte verlustfreie Komprimierung ist keines der beiden Formate die erste Wahl, aber auch hier hat WebP eine Antwort parat. Der verlustfreie Modus von WebP ist typischerweise 26 % kleiner als ein äquivalentes PNG. CocoConvert unterstützt die verlustfreie WebP-Konvertierung, aber sei dir bewusst, dass ein verlustfreies WebP manchmal größer sein kann als ein hochwertiges, verlustbehaftetes WebP. Teste immer beide Optionen, bevor du dich für eine große Stapelkonvertierung entscheidest.
Wie man zwischen WebP und JPG konvertiert (und wann man es tun sollte)
Die häufigste Aufgabe ist die Konvertierung von JPGs in WebP für deine Website, und mit CocoConvert ist das ganz einfach. Lade dein JPG hoch, wähle WebP als Ausgabeformat und stelle eine Qualitätsstufe ein. Für Fotos ist eine Qualität von 80–85 ein guter Ausgangspunkt; das spart eine Menge Speicherplatz, während wahrnehmbare Details erhalten bleiben. Bei Grafiken, Icons oder Bildern mit scharfem Text solltest du vielleicht bei 90 anfangen und das Ergebnis visuell prüfen, bevor du niedriger gehst. Wenn du eine große Menge an Bildern konvertierst, solltest du dir über die Qualitätseinstellungen Gedanken machen. Der Stapel-Konverter von CocoConvert ist super, um eine Einstellung auf eine Gruppe ähnlicher Bilder anzuwenden. Aber wenn du Produktfotos, Screenshots und Illustrationen mischst, erzielst du bessere Ergebnisse, wenn du jede Kategorie separat mit einer eigenen, maßgeschneiderten Qualitätsstufe verarbeitest. WebP zurück in JPG zu konvertieren ist seltener, aber du brauchst es für den Druck, für Kollegen mit alter Software oder für Plattformen mit strengen Formatregeln. CocoConvert erledigt das genauso einfach. Hier eine ehrliche Warnung: Die Konvertierung eines WebP zurück in ein JPG führt eine zweite Runde verlustbehafteter Kompression ein. Wenn dein WebP aus einem JPG mit Qualität 80 erstellt wurde, wird das neue JPG weicher aussehen und mehr Artefakte aufweisen als das Original. Wenn du das Original-JPG hast, arbeite immer, immer von dieser Quelldatei aus. Für WordPress-Seiten können Plugins wie Imagify oder ShortPixel den gesamten Prozess automatisieren, indem sie JPGs beim Upload konvertieren und WebP an Browser ausliefern, die es unterstützen. Das ist ein solider Ansatz, wenn du die Dateien nicht manuell verwalten möchtest. CocoConvert eignet sich am besten für einmalige oder periodische Stapelverarbeitungen, nicht als serverseitiger Echtzeit-Bildprozessor, der sich in die Medien-Pipeline deines CMS integriert.
Auswirkungen auf die Performance: Was das für die Core Web Vitals bedeutet
Große Bilder sind eine der Hauptursachen für schlechte LCP-Werte (Largest Contentful Paint). Ein langsamer LCP schadet deinen Core Web Vitals, und das wirkt sich direkt auf dein Ranking in der Google-Suche aus. So einfach ist das. Wenn Googles PageSpeed Insights überdimensionierte Bilder bemängelt, empfiehlt es ausdrücklich, sie in „Next-Gen-Formaten“ auszuliefern – damit sind WebP und AVIF gemeint. Stell dir vor: Ein 600 KB großes JPG-Headerbild bei einer mobilen 4G-Verbindung verlängert deine Ladezeit um etwa 1,2 Sekunden. Die Konvertierung desselben Bildes in ein 380 KB großes WebP reduziert die Ladezeit auf etwa 0,75 Sekunden. Dieser Unterschied von einer halben Sekunde kann ausreichen, um deinen LCP-Wert von der Kategorie „Verbesserung erforderlich“ in die Kategorie „Gut“ (unter 2,5 Sekunden) zu heben. Das hat einen messbaren, positiven Einfluss sowohl auf die Nutzererfahrung als auch auf die Sichtbarkeit deiner Website in den Suchergebnissen. Die korrekte Implementierung mit einem Fallback erfolgt über das HTML-`<picture>`-Element: <picture> <source srcset="hero.webp" type="image/webp"> <img src="hero.jpg" alt="Hero image"> </picture> Dieser einfache Code weist fähige Browser an, sich das WebP zu holen, während ältere Browser automatisch auf das JPG zurückgreifen. Das ist sauber, robust und erfordert kein JavaScript. Wenn du Bilder von Hand verwaltest, ist dies das Muster, das du verwenden solltest. Wenn du ein CDN wie Cloudflare nutzt, musst du möglicherweise gar nichts tun. Aktiviere einfach 'Polish' in deinem Cloudflare-Dashboard (unter Speed > Optimization > Polish), und es kann automatisch WebP-Bilder konvertieren und an kompatible Browser ausliefern, vorausgesetzt, du hast einen kostenpflichtigen Plan.
Das Urteil: Ein Entscheidungsrahmen
Anstatt ein Format zum Gewinner zu erklären, lass uns einen einfachen Rahmen nutzen, um die richtige Entscheidung für deine Situation zu treffen. **Für deine Website oder Web-App?** Konvertiere deine JPGs zu WebP. Die Browser-Unterstützung ist solide, die Dateigrößeneinsparungen sind signifikant und die Qualität ist exzellent. Die Vorteile sind zu groß, um sie zu ignorieren. Nutze CocoConvert für Stapelverarbeitungen oder eine automatisierte Plugin/CDN-Lösung. **Für Druck, E-Mail oder Altsysteme?** Bleib bei JPG. Die universelle Kompatibilität ist in diesen Kontexten nicht verhandelbar. Der Aufwand mit WebP ist die Dateigrößeneinsparung nicht wert, und du vermeidest Qualitätsverluste durch Neukodierung. **Brauchst du Transparenz?** Teste WebP anstelle von PNG. Die Größenreduzierung kann enorm sein, besonders bei fotografischen Inhalten mit transparentem Hintergrund. Die Browser-Unterstützung für WebP mit Alpha-Transparenz ist ausgezeichnet. **Archivierung von Master-Dateien?** Nutze keines von beiden. Behalte deine originalen Kamera-RAW-Dateien oder verwende TIFF für die verlustfreie Archivierung. Deine Master-Kopien in JPG oder WebP zu komprimieren, ist eine destruktive, unumkehrbare Entscheidung. **Nutzt du eine Plattform, die Bilder für dich optimiert?** Prüfe das zuerst! Dienste wie Shopify, Squarespace oder eine moderne WordPress-Installation mit einem Optimierungs-Plugin liefern möglicherweise bereits automatisch WebP aus. Verschwende keine Zeit mit manuellen Konvertierungen, die deine Plattform bereits erledigt. Also: WebP gewinnt für die Web-Bereitstellung. JPG gewinnt für so ziemlich alles andere. Die gute Nachricht ist, dass die Konvertierung zwischen den beiden ein gelöstes Problem ist, und mit Tools wie CocoConvert musst du dich nicht für nur ein Format für deine gesamte Bibliothek entscheiden.