Zum Hauptinhalt springen

PNG vs JPG vs WebP vs AVIF

PNG, JPG, WebP und AVIF komprimieren dieselben Pixel unter unterschiedlichen Bedingungen. PNG ist verlustfrei und unterstützt Transparenz; JPG ist verlustbehaftet, bei Fotos viel kleiner und ohne Alphakanal. WebP und AVIF können beides und sind jeweils rund ein Viertel kleiner als das jeweils vorherige Format. 2026 dekodieren alle vier nativ in jedem gängigen Browser.

Nur lokal

PNG vs JPG vs WebP vs AVIF erklärt

Jede Bilddatei beantwortet dieselbe Frage – wie speichere ich diese Pixel in weniger Bytes? – mit einer anderen Strategie. PNG weigert sich, Information zu verlieren, und komprimiert stattdessen Struktur. JPG wirft Information systematisch weg – geordnet und blind gegenüber dem, was Menschen sehen – und erzielt damit drastische Einsparungen bei Fotos. WebP und AVIF sind die moderne Generation: Sie erledigen beides mit besserer Mathematik und in der Regel kleineren Dateien.

Die Abwägungen drehen sich heute fast nur noch um den Inhalt, nicht um die Kompatibilität. WebP kam 2020 in alle großen Browser, AVIF zog bis 2023-2024 nach; 2026 dekodieren die vier Formate also nativ überall dort, wo es zählt, auch in Safari. Entscheidend ist, was das Bild enthält: harte Kanten oder Verläufe, Text oder Haut, ein Screenshot oder ein Foto – und ob Transparenz oder eine Ziel-Dateigröße nicht verhandelbar ist.

Dieser Leitfaden vergleicht die vier Formate genau entlang dieser Achsen, erklärt, warum jedes von ihnen bestimmte Inhalte schlecht komprimiert, und behandelt die Metadaten, die im Container mitkommen. Alles, was hier verlinkt ist – Konverter, Komprimierer, Größenänderer –, läuft lokal in Ihrem Browser, sodass es nichts kostet und nichts hochlädt, eine Theorie an Ihrer eigenen Datei zu testen.

Sobald Sie ein Format gewählt haben, ist der schnellste Weg, es in die Tat umzusetzen, der Bildkonverter – er wandelt PNG, JPG, WebP und AVIF direkt im Tab ineinander um, ganz ohne Upload.

Geht es um eine harte Größengrenze statt um ein Format, lohnt ein Blick auf Komprimieren auf ein 100KB-Ziel – dort wird Schritt für Schritt gezeigt, wie Sie die Qualitätsschraube bis zu einem exakten Ziel herunterdrehen und nach jedem Schritt die Qualität per Auge prüfen.

Verlustfrei gegen verlustbehaftet: die Entscheidung, der alles andere folgt

Verlustfreie Kompression ordnet Daten so um, dass sich bitidentische Pixel rekonstruieren lassen; verlustbehaftete Kompression nähert das Bild an und behält, was das menschliche Sehen am wenigsten vermissen dürfte. Verlustfrei ist nicht per Definition kleiner – bei einem verrauschten Foto kann sie schlecht abschneiden –, und verlustbehaftet ist nicht per Definition hässlich. Jedes gewinnt bei dem Inhalt, für den es entworfen wurde; deshalb lautet die erste Frage nie, welches Format das beste ist, sondern was das Bild enthält.

Drei Inhaltseigenschaften entscheiden. Fotos und weiche Verläufe überstehen verlustbehaftete Kompression mühelos; Grafiken mit harten Kanten, Text und Screenshots strafen sie mit Ringing-Artefakten entlang jeder Kante ab. Rauschen schadet jedem Format, aber es vernichtet verlustfreie Kompressionsraten, denn Rauschen ist maximale Information. Und Transparenz ist eine harte Anforderung, die JPG sofort disqualifiziert.

FormatKompressionTransparenzTypisch geeignet für
PNGVerlustfrei (DEFLATE)Voller AlphakanalScreenshots, UI, Logos, Strichzeichnungen
JPGVerlustbehaftet (DCT-Blöcke)KeineFotos, kontinuierliche Tonwerte
WebPVerlustbehaftet und verlustfreiVoller AlphakanalBeide Rollen; starker Allrounder
AVIFVerlustbehaftet und verlustfreiVoller AlphakanalFotos bei den kleinsten Größen; Animation

PNG: exakte Pixel, Alphakanal und Metadaten

PNG speichert Pixel verlustfrei: Der Dekoder rekonstruiert das Originalbild jedes Mal exakt; deshalb ist PNG die Standardwahl für Screenshots, Design-Exporte und alles, was Text enthält. Die Kompression filtert jede Scanline gegen ihre Nachbarzeile und wendet danach allgemeine DEFLATE-Kompression an – dieselbe Familie von Verfahren wie bei ZIP. Diese Strategie liebt wiederholte Struktur (flächige Farben, ausgerichtetes UI, scharfe Kanten), und deshalb komprimiert ein sauberer App-Screenshot oft auf einen Bruchteil seiner Rohgröße.

Dieselbe Strategie ist der Grund, warum PNG bei Fotos schwächelt: Organische Textur liegt nahe am Zufall, die Filter können sie nicht vorhersagen, und die Datei bläht sich auf. PNG trägt zudem einen vollen 8-Bit-Alphakanal, sodass Logos mit weichen Kanten über beliebigen Hintergründen sauber bleiben, und sein Container bietet Platz für umfangreiche Metadaten – einschließlich EXIF-Blöcken –, was im letzten Abschnitt dieses Leitfadens wieder relevant wird.

JPG: verlustbehaftet, winzig bei Fotos, allergisch gegen Kanten

JPG teilt das Bild in Blöcke aus 8 mal 8 Pixeln, transformiert jeden Block in Frequenzdaten (die diskrete Kosinustransformation) und verwirft die Frequenzen, auf die das Auge am wenigsten empfindlich reagiert. Die Qualitätseinstellung ist der Regler fürs Wegwerfen: Bei 80-90 sieht ein Foto im Wesentlichen unberührt aus – bei einem Bruchteil der Rohgröße; unter etwa 50 werden die Blöcke selbst sichtbar, die markanten Blockartefakte des Formats.

Zwei Folgen des Designs sind in der Praxis relevant. Erstens: keine Transparenz, niemals – das Format hat keinen Alphakanal, und eine Datei, die Sie freistellen wollen, kommt mit eingebranntem Hintergrund an. Zweitens leiden harte Kanten: Eine 1-Pixel-Kante im UI oder kleiner Text verteilt seine Energie über mehrere 8×8-Blöcke, und die Rekonstruktion verschmiert sie zu Mosquito-Rauschen und Geisterbildern. Chroma-Subsampling (Mitteln der Farbdetails bei halber Auflösung) macht roten und blauen Text zusätzlich weicher. Halten Sie JPG für das, wofür es gebaut wurde: Fotos mit kontinuierlichen Tonwerten.

WebP und AVIF: das moderne Paar

WebP von Google erledigt beide Aufgaben: einen verlustbehafteten Modus, der auf denselben prädiktiven Kodierungsideen wie Videokompression beruht (VP8), und einen separaten verlustfreien Modus, der PNG üblicherweise um rund ein Viertel schlägt. Seine verlustbehafteten Fotos landen rund 25-35% kleiner als JPG bei vergleichbarer visueller Qualität, und anders als JPG unterstützt es Alphakanäle in beiden Modi – so passt ein Foto mit echter Transparenz endlich in eine kleine Datei.

AVIF, aufgebaut auf dem AV1-Videocodec, markiert die aktuelle Spitze: Intra-Frame-Kodierung plus reichhaltigere Vorhersagewerkzeuge machen es auf typischen Inhalten rund 20% kleiner als WebP, mit deutlich besserem Umgang mit Verläufen, in denen andere Formate Bänder zeigen; dazu unterstützt es 8-Bit und größere Farbtiefen, Animation und Alphakanäle. Die Kosten sind aber real: Die Kodierung ist dramatisch langsamer (Sekunden statt Millisekunden bei hohem Aufwand), und die Werkzeugunterstützung ist dünner. Es ist das Format der Wahl, wenn Bytes die bindende Grenze sind und die Kodierzeit es nicht ist.

Gegenüber JPG bei ähnlicher QualitätTypische ErsparnisEinschränkung
WebP (verlustbehaftet)≈ 25-35% kleinerDer verlustfreie Modus ist ein separater Codec und misst sich stattdessen mit PNG
AVIF (verlustbehaftet)≈ 20% kleiner als WebPDeutlich langsamere Kodierung; dünnere Werkzeugunterstützung
WebP (verlustfrei)≈ 25% kleiner als PNGVerliert nirgends gegen PNG – dieselbe verlustfreie Garantie

Browser-Unterstützung im Jahr 2026

Die Kompatibilitätsfrage ist entschieden. WebP ist seit Safari 14 im Jahr 2020 überall verfügbar; AVIF kam 2020-2021 in Chrome 85 und Firefox 93 und 2023 in Safari 16.4, was über die Releases von 2024-2025 hinaus eine vollständige Abdeckung aller Evergreen-Browser ergibt. Animiertes WebP und animiertes AVIF dekodieren ebenfalls überall in den aktuellen Versionen.

Die verbleibenden Einschränkungen betreffen den Rand, nicht den Mainstream: Sehr alte Safari-Versionen (iOS 13 und älter) beherrschen kein WebP; manche AVIF-Dateien mit exotischen Profilen hoher Farbtiefe oder 12-Bit-Profilen dekodieren in weniger Engines; und die AVIF-Unterstützung in Nicht-Browser-Software – OS-Vorschauen, ältere Designwerkzeuge, CMS-Pipelines – hinkt der Browser-Unterstützung noch hinterher. AVIF mit einem WebP- oder JPG-Fallback über das picture-Element auszuliefern bleibt das defensive Muster für alles, was Nutzer einbringen.

FormatÜberall verfügbar seitFallback weiterhin sinnvoll für
PNG, JPGDen 1990ernNie – wirklich universell
WebP2020 (Safari 14 war der letzte Nachzügler)iOS 13 und älter, Legacy-Einbettungen
AVIF2023 (Safari 16.4 war die letzte große Engine)Älteres Safari, Nicht-Browser-Viewer, CMS-Pipelines

EXIF: Metadaten leben im Container, nicht in den Pixeln

Eine Bilddatei besteht aus zwei Dingen: Pixeldaten und einem Container drumherum, der Metadaten tragen kann – EXIF-Blöcke mit Kameramodell, Belichtung, Ausrichtung, Zeitstempeln und oft GPS-Koordinaten. Daraus folgt eine entscheidende Eigenschaft: Metadaten gehören zur Datei, nicht zum Bild. Kopieren Sie ein JPG, reist das EXIF mit; kodieren Sie dasselbe Foto nach WebP oder AVIF um, startet der neue Container leer, es sei denn, ein Werkzeug übernimmt die alten Metadaten ausdrücklich.

Das hat zwei praktische Seiten. Privatsphäre: Ein Foto, das direkt aus der Kamera geteilt wird, kann Ihren Standort veröffentlichen; deshalb gehört das Entfernen von Metadaten zu jedem Konverter, der seinen Namen verdient – Umkodieren ist der zuverlässige Weg, sie loszuwerden. Arbeitsablauf: Ausrichtung und Zeitstempel können nützlich sein; braucht eine Pipeline sie, muss dem Werkzeug ausdrücklich gesagt werden, dass es EXIF erhalten soll, statt das anzunehmen. In jedem Fall liegt die Entscheidung im Container, und die Umwandlung ist der Ort, an dem sie fällt.

Häufig gestellte Fragen

Werden meine Bilder hochgeladen, wenn ich sie hier komprimiere oder umwandle?

Nein. Dekodieren, Umkodieren und Größe ändern laufen alle in Ihrem Browser mit dessen eigenen Bildcodecs; die Datei verlässt den Tab nie. Prüfen Sie es in den DevTools: Öffnen Sie das Network-Panel, wandeln Sie ein Bild um und beobachten Sie, wie die Anfrageliste leer bleibt. Die Content-Security-Policy der Website verbietet außerdem ausgehende Verbindungen von Seitenskripten.

Welches Format sollten Screenshots und UI-Aufnahmen verwenden?

PNG, oder WebP im verlustfreien Modus, wenn es auf die Größe ankommt. Screenshots sind voller harter Kanten, Text und flächiger Füllungen – Inhalte, die verlustfreie Kompression kraftvoll staucht und verlustbehaftete verschmiert. Ein JPG-Screenshot zeigt Ringing-Artefakte um jedes Zeichen und jeden Schaltflächenrahmen; das PNG derselben Aufnahme ist in der Regel ohnehin kleiner, weil sein Inhalt hochgradig vorhersagbar ist.

Warum ist mein PNG größer als das JPG desselben Fotos?

Weil Fotos für einen verlustfreien Codec nahezu Zufall sind. PNG muss jedes Pixel exakt rekonstruieren, und organische Textur, Sensorrauschen und Körnung besiegen seine Prädiktoren, sodass es fast alles teuer speichert. JPG verwirft stattdessen die nicht wahrnehmbaren Anteile. Dasselbe Foto ist als PNG ohne Weiteres fünf- bis zehnmal größer als ein gutes JPG oder WebP.

Entfernt das Umwandeln eines Bilds seine EXIF-Daten?

Umkodieren in ein anderes Format legt einen neuen Container an, also überlebt EXIF standardmäßig nicht – was GPS- und Kameradaten praktischerweise gleich mit entfernt. Innerhalb desselben Formats kopieren manche Werkzeuge die Metadaten mit, das Entfernen geschieht also nie von allein. Wenn es um Privatsphäre geht, wandeln Sie einmal um und prüfen die Eigenschaften des Ergebnisses; wenn es um die Ausrichtung geht, vergewissern Sie sich, dass das Werkzeug sie erhält oder fest in die Pixel übernimmt.

Ist AVIF immer kleiner als WebP?

Nein – im Schnitt rund 20% kleiner bei ähnlicher Qualität, aber die Streuung ist breit. Bei Fotos und Verläufen zieht AVIF am weitesten davon; einfache flächige Grafiken komprimieren fast auf identische Größen, und einige Bilder drehen die Rangfolge sogar um. Die Kodierzeit ist der andere Preis: AVIF mit hohem Aufwand dauert um Größenordnungen länger, was in Build-Pipelines zählt.

Welche Qualitätseinstellung sollte ich für verlustbehaftete Bilder wählen?

Bei Fotos beginnen Sie um 75-85: Darunter erscheinen Blockbildung und Unschärfe schnell; über etwa 90 zahlen Sie echte Bytes für Unterschiede, die das Auge nicht sieht. Grafiken mit Text und Kanten vertragen verlustbehaftete Kompression bei jeder Einstellung schlecht; dort ist Verlustfreiheit vorzuziehen. Beurteilen Sie per Auge an Ihren eigenen Inhalten bei 100% Zoom – die Einstellungen wirken mit Auflösung und Inhalt zusammen, nicht nur miteinander.