JPEG vs. PNG vs. WebP — Das richtige Bildformat wählen und konvertieren

Vor einigen Jahren machte ich ein Performance-Audit auf einer kleinen Unternehmenswebsite. Die Ursache der schlechten Lighthouse-Werte war sofort klar: Elf Bilder auf der Startseite, alle im PNG-Format, alle Produktfotos. Das größte war 4,2 MB. Allein das Hero-Bild 2,8 MB.

Niemand hatte absichtlich etwas falsch gemacht. Die Fotos wurden aus einem Design-Tool exportiert, das PNG als Standard verwendete, und da die Bilder gut aussahen, hinterfragte niemand das Format. Sie sahen tatsächlich gut aus. Hätte man sie mit 80% Qualität in JPEG konvertiert, wären sie für das menschliche Auge nicht zu unterscheiden gewesen — aber die gesamte Bildlast wäre von ca. 18 MB auf ca. 2,5 MB gesunken.

Dieses Problem ist im Web weit verbreitet und vollständig lösbar, wenn man versteht, was jedes Format eigentlich macht.

JPEG: Das Arbeitstier für Fotos

JPEG existiert seit 1992 und ist nach wie vor das am häufigsten verwendete Bildformat im Internet. Der Grund: Es ist für seinen Zweck wirklich gut geeignet — Fotos zu komprimieren.

Fotos haben kontinuierliche Tonwertverläufe — sanfte Farbverläufe, die ineinander übergehen. JPEG-Kompression teilt das Bild in 8×8-Pixel-Blöcke und verwirft Hochfrequenzdetails, für die das menschliche Auge wenig empfindlich ist. Das Ergebnis ist eine Datei, die ein Zehntel der unkomprimierten Größe haben kann, mit kaum sichtbarer Qualitätsverschlechterung.

Wann JPEG gut funktioniert:

• Produktfotos, redaktionelle Bilder, Hero-Images
• Bilder mit sanften Verläufen und natürlicher Farbvariation
• Social-Media-Uploads, E-Mail-Anhänge, wo Dateigröße zählt

Wann JPEG versagt:

• Bilder mit scharfen Kanten und Text (Logos, Screenshots, Diagramme) — Kompression erzeugt sichtbare Ringing-Artefakte an kontrastreichen Kanten
• Bilder, die Transparenz benötigen — JPEG hat keinen Alpha-Kanal
• Bilder, die wiederholt bearbeitet werden — jedes Speichern fügt Qualitätsverlust hinzu

Die 80%-Regel: Unter 70-75% werden JPEG-Artefakte in den meisten Fotos sichtbar. Über 85-90% wächst die Dateigröße deutlich ohne sichtbaren Qualitätsgewinn. Der Bereich 75-85% ist der Sweet Spot.

PNG: Wenn Pixel exakt sein müssen

PNG wurde Mitte der 1990er Jahre als patentfreie Alternative zu GIF geschaffen. Es verwendet verlustfreie Kompression — jeder Pixel in einem PNG wird exakt so gespeichert.

Wann PNG die richtige Wahl ist:

• Screenshots von Interfaces, Code oder Text
• Logos und Icons mit Flächen und scharfen Kanten
• Bilder, die Transparenz benötigen (vollständiger Alpha-Kanal)
• Bilder für weitere Bearbeitung — kein Generationsverlust
• Pixel-Art und Diagramme

Wann PNG die falsche Wahl ist:

• Fotos. Ein PNG eines Fotos ist fast immer 3 bis 5 Mal größer als ein gleichwertiges JPEG ohne sichtbaren Qualitätsunterschied. Das war der Fehler am Anfang des Artikels.

WebP: Das Format, das jetzt Standard sein sollte

WebP wurde von Google entwickelt und 2010 veröffentlicht. Safari fügte Unterstützung erst 2020 hinzu, aber seit 2021 unterstützen alle großen Browser WebP. Das "Browser-Support"-Problem ist praktisch gelöst.

WebP unterstützt:

• Verlustbehaftete Kompression (wie JPEG, aber typischerweise 25-35% kleiner bei gleicher Qualität)
• Verlustfreie Kompression (wie PNG, aber typischerweise 26% kleiner)
• Transparenz (Alpha-Kanal in verlustbehafteten und verlustfreien Modi)
• Animation

In der Praxis ist WebP für die meisten fotografischen Inhalte ein striktes Upgrade gegenüber JPEG. Gleiches Bild, kleinere Datei, gleiche Qualität.

Der Vorbehalt: Einige ältere CMS-Plattformen, E-Mail-Clients und Design-Tools haben noch eingeschränkte WebP-Unterstützung. Bei der Vorbereitung von Newsletter-Bildern lohnt es sich zu prüfen, ob die E-Mail-Plattform WebP verarbeitet.

Konvertierungsszenarien

PNG zu JPEG: Die häufigste und wirkungsvollste Konvertierung. Produkt- oder Hero-Fotos als PNG zu konvertieren reduziert typischerweise die Dateigröße um 60-80% ohne sichtbaren Qualitätsverlust. Was dabei verloren geht, ist Transparenz — falls das PNG einen Alpha-Kanal verwendet, muss eine Hintergrundfarbe eingefüllt werden.

PNG zu WebP: Das Beste aus beiden Welten. Transparenzunterstützung wie PNG und kleinere Dateigröße besser als JPEG.

JPEG zu WebP: Eine solide Routineoptimierung. Vorhandene JPEG-Archive können für Besucher mit modernen Browsern als WebP ausgeliefert werden, mit 25-35% Bandbreiteneinsparung. Viele Frameworks und CDNs tun das heute automatisch.

WebP zu JPEG oder PNG: Nötig, wenn Bilder an Plattformen oder Tools übermittelt werden müssen, die kein WebP akzeptieren. Bei hohen Qualitätseinstellungen sollte das Ergebnis visuell verlustfrei sein.

Das Bildformat-Konverter-Tool auf ToolboxHubs

Der Bildformat-Konverter läuft vollständig im Browser über die Canvas API:

1. Bild hochladen — Drag & Drop oder Klick. JPEG, PNG, WebP und GIF werden als Eingabe akzeptiert.
2. Ausgabeformat wählen — JPEG, PNG oder WebP aus dem Dropdown auswählen.
3. Qualität einstellen — Für verlustbehafteten JPEG- und WebP-Output gibt es einen Qualitäts-Slider (Standard 80%). PNG-Lossless hat keine Qualitätseinstellung.
4. Konvertieren und herunterladen — Konvertieren anklicken und das Ergebnis herunterladen.

Die Vorschau aktualisiert sich bei Qualitätsänderungen, sodass der Kompromiss vor dem Download beurteilt werden kann.

Bekannte Einschränkungen: Animierte GIFs werden als Standbild (erster Frame) konvertiert. SVGs werden nicht unterstützt.

Was die Qualitätseinstellungen bedeuten

Der Prozentsatz ist kein direktes Qualitätsmaß — es ist ein Kompressionsparameter, der steuert, wie aggressiv der Encoder Informationen verwirft:

• 90-100%: Nahezu verlustfrei. Große Dateien. Für Bilder, die erneut bearbeitet werden oder gedruckt werden sollen.
• 75-85%: Web-Standard. Für fast alle Web-Bilder richtig.
• 60-75%: Sichtbar kleinere Dateien. Artefakte können bei Hochkontrastbereichen oder genauer Betrachtung sichtbar werden.
• Unter 60%: Sichtbare Blöckigkeit und Unschärfe.

Der Performance-Effekt ist real

Konkret: Eine typische fotolastige Landing Page mit nicht optimierten PNGs kann 15-25 MB Bilddaten haben. Mit WebP bei 80% Qualität kann das auf 2-4 MB sinken. Bei 10 Mbps durchschnittlicher Mobilbandbreite ist das der Unterschied zwischen 12-20 Sekunden und 1,6-3,2 Sekunden Bildladezeit.

Googles Core Web Vitals — insbesondere Largest Contentful Paint (LCP) — werden stark von der Bildgröße beeinflusst. Wenn das LCP-Element ein Bild ist (was meist so ist), sind Format und Kompression dieses Bilds einer der direktesten Hebel für den Performance-Score.

Verwandte Tools

Bild-Komprimierung — Um Dateigröße zu reduzieren ohne Format zu ändern.

Bild-Resizer — Ein 3000px-Bild für 400px-Anzeige ausliefern? Größe anpassen ist ebenso wichtig wie Format wählen.

Fazit

Die einfache Entscheidungsregel: Web-Fotos → JPEG oder WebP. Bilder mit Transparenz → WebP (oder PNG für ältere Umgebungen). Logos, Screenshots, Text-Bilder → PNG. Qualitäts-Slider bei 80% starten und bei spezifischen Problemen anpassen.

Der Bildformat-Konverter erledigt die Konvertierung. Die Entscheidung, welches Format zu wählen ist, hat dieser Artikel übernommen.