PNG, JPG, WebP oder AVIF: ein Entscheidungsbaum

Die meisten Format-Ratgeber beantworten “welches Bildformat soll ich nehmen” mit einer Spec-Tabelle und einem Schulterzucken. Du liest über Farbtiefe und Chroma-Subsampling und weißt am Ende weniger als vorher. Hier läuft es andersrum. Find dein Bild unten, folg dem Ast, nimm das Format am Ende. Eine Empfehlung pro Fall, dazu der Kompromiss, den du dabei wirklich eingehst.

Kurz gesagt: Fotos werden AVIF oder WebP. Grafiken mit flachen Farben und alles, was Transparenz braucht, werden PNG, oder WebP wenn die Größe zählt. JPG nur, wenn etwas weiter unten in der Kette nichts Neueres lesen kann. AVIF ist das kleinste, hat aber die jüngste Unterstützung.

Fang damit an, was das Bild ist

Kompression teilt sich in zwei Lager, und das Lager entscheidet fast alles.

Verlustbehaftete Formate (JPG, WebP, AVIF) werfen Details weg, die dein Auge kaum bemerkt, um Dateien klein zu machen. Klasse für Fotos, wo die Daten ohnehin unruhig sind und ein bisschen Verlust unsichtbar bleibt. Furchtbar für den Screenshot von scharfem Text, wo der Verlust als Schmiererei um jeden Buchstaben auftaucht.

Verlustfreie Formate (PNG) behalten jeden Pixel exakt. Perfekt für flache Farben, scharfe Kanten und Transparenz. Verschwendung bei Fotos, wo “jeden Pixel behalten” eine riesige Datei bedeutet.

Die erste Frage ist also nie “welches Format ist das beste”. Sie lautet “was schau ich mir da überhaupt an”.

Der Entscheidungsbaum

Ist es ein Foto?

Ein Kamerafoto, ein Produktbild, ein Render mit Textur. Viele Farben, weiche Verläufe, kein harter Text.

Nimm AVIF. Es liefert bei gegebener Qualität die kleinste Datei und stellt Himmel- und Hautverläufe ohne das klotzige Banding dar, das ältere Formate zeigen. Wenn du nicht garantieren kannst, dass der Browser oder die App des Betrachters aktuell ist, exportier stattdessen WebP, oder behalte ein JPG als universellen Fallback. Der Kompromiss ist die Unterstützung: AVIF wird überall Modernen gelesen, ist aber das jüngste der vier, also kann sich ein vereinzelt alter Client verschlucken. WebP ist die sichere Mitte. JPG ist der Boden, den alles liest.

Was auch immer du hier wählst, nimm kein PNG. Ein PNG-Foto ist oft drei- bis fünfmal größer als dasselbe Bild als JPG, ohne sichtbaren Vorteil.

Ist es ein Screenshot von einer UI, von Text oder einem Diagramm?

Scharfe Kanten, lesbarer Text, große Flächen in einer Farbe.

Nimm PNG. Verlustbehaftete Kompression zerlegt harte Kanten, also macht JPG aus schwarzem Text auf Weiß einen grauen Schleier aus Artefakten. PNG hält die Buchstaben scharf und komprimiert flache Hintergründe gut. Wenn der Screenshot schwer ist und du den Betrachter kontrollierst, macht WebP im verlustfreien Modus denselben Job kleiner. Der Kompromiss bei PNG ist die Dateigröße bei vollen Screenshots, aber Lesbarkeit gewinnt hier.

Ist es ein Logo, ein Icon oder eine Grafik mit flachen Farben?

Wenige Farben, durchgehende Flächen, vielleicht ein transparenter Hintergrund.

Nimm PNG, oder WebP wenn du es kleiner willst und kontrollierst, wo es geladen wird. Beide halten Kanten sauber und beide unterstützen Transparenz. Wenn die Grafik wirklich einfache Geometrie ist und du Vektoren nutzen kannst, schlägt SVG alle hier, aber das ist eine ganz andere Datei und nichts, was du nachträglich aus einer Rastergrafik machst. Der Kompromiss: PNG wird überall unterstützt und ist etwas größer, WebP ist kleiner und etwas weniger universell.

Braucht es einen transparenten Hintergrund?

Ein freigestelltes Produkt, ein Logo über einem farbigen Abschnitt, ein Sticker.

Nimm PNG oder WebP, niemals JPG. JPG hat überhaupt keinen Alphakanal, also fällt Transparenz auf eine einfarbige Fläche zusammen, fast immer weiß. Das ist der mit Abstand häufigste Formatfehler: jemand speichert ein Freisteller als JPG und bekommt einen weißen Kasten drumherum. AVIF unterstützt Transparenz ebenfalls und lohnt sich, wenn das Bild zusätzlich fotografisch ist. Für flache Grafiken mit Transparenz ist PNG der Standard und WebP die kleinere Option.

Gibt es ein hartes Upload-Limit?

Ein Formular, das alles über ein paar Megabyte ablehnt, eine Obergrenze für E-Mail-Anhänge, ein Marktplatz, der Anzeigenfotos deckelt.

Nimm AVIF, wenn das Ziel es akzeptiert, sonst WebP, sonst JPG mit einer niedrigeren Qualitätseinstellung. Diese drei lassen dich ein bisschen sichtbare Qualität gegen deutlich weniger Gewicht tauschen, und AVIF gibt dir den meisten Spielraum, bevor Qualitätseinbußen auffallen. Vermeide PNG, wenn du gegen ein Größenlimit kämpfst, außer das Bild ist flache Farbe, denn verlustfrei auf einem Foto schießt direkt über das Limit hinaus. Der Kompromiss ist der Generationsverlust, dazu unten mehr.

Bewegt es sich?

Eine kurze Schleife, ein Reaction-Clip, ein animiertes Logo.

Nimm WebP für Animation. Animiertes WebP ist deutlich kleiner und deutlich hochwertiger als das alte animierte GIF, mit voller Farbe statt der 256-Farben-Grenze von GIF. AVIF kann auch animieren und geht noch kleiner, mit etwas schmalerer Unterstützung. Die ehrliche Antwort für alles, was länger als ein paar Sekunden ist, ist eine echte Videodatei (MP4 oder WebM), die noch kleiner ausfällt, aber für eine echte kurze Schleife ist animiertes WebP die Wahl. Gegenüber GIF gibt es keinen Kompromiss, der der Rede wert wäre; GIF überlebt nur aus Gewohnheit.

Die Vergleichstabelle

	JPG	PNG	WebP	AVIF
Kompression	Verlustbehaftet	Verlustfrei	Beides	Beides
Am besten für	Fotos (Fallback)	Flache Farben, Text, Transparenz	Fotos, Grafiken, Animation	Fotos, kleinste Größe
Transparenz	Nein	Ja	Ja	Ja
Animation	Nein	Nein	Ja	Ja
Relative Dateigröße (Foto)	Basiswert	Viel größer	~25-35 % kleiner	~50 % kleiner
Browser-Unterstützung	Universell	Universell	Sehr breit	Breit, am jüngsten

Die Dateigrößen-Zahlen sind grob und hängen vom Bild ab, aber die Reihenfolge bleibt: AVIF schlägt WebP schlägt JPG bei Fotos, und PNG ist in diesem Rennen nicht dabei, weil es ein anderes Problem löst.

Generationsverlust, die Falle, vor der dich niemand warnt

Jedes Mal, wenn du ein verlustbehaftetes Bild speicherst (JPG, WebP oder AVIF im verlustbehafteten Modus), wirft es ein bisschen mehr weg. Bearbeite ein JPG, speicher, öffne neu, bearbeite, speicher wieder, und du komprimierst bereits komprimierte Daten. Artefakte stapeln sich. Das Bild wird über ein paar Runden weich und fleckig.

Zwei Regeln halten dich auf der sicheren Seite. Behalte ein Original in einem verlustfreien Format (PNG oder das Kamera-Raw) als Master und exportier verlustbehaftete Kopien daraus, statt die verlustbehaftete Kopie immer wieder zu bearbeiten. Und konvertiere von deiner Quelle mit der höchsten Qualität, nicht von einer Kopie, die schon zusammengequetscht wurde. Ein müdes JPG nach AVIF zu konvertieren macht den Schaden nicht rückgängig, den das JPG schon angerichtet hat; es friert ihn nur ein.

Also, welches denn nun

• Foto für eine moderne Seite: AVIF, mit WebP oder JPG als Fallback.
• Foto, das du per E-Mail verschickst oder blind weitergibst: JPG.
• Screenshot, Diagramm oder Textbild: PNG.
• Logo oder flache Grafik, mit oder ohne Transparenz: PNG, oder WebP um Gewicht zu sparen.
• Alles, was gegen ein Größenlimit kämpft: AVIF oder WebP bei vernünftiger Qualität.
• Eine kurze Schleife: WebP, oder ein echtes Video für alles Längere.

Wenn das Format, das du hast, nicht das Format ist, das du brauchst, kannst du alle vier direkt im Browser umwandeln, auf image.hivly.net. Es wird nichts hochgeladen, es gibt keine Anmeldung, und die Dateien verlassen deinen Rechner nie, was zählt, wenn das Bild ein privater Screenshot oder ein unveröffentlichtes Produktbild ist. Wandle ein schweres PNG-Foto in AVIF um, mach einen transparenten JPG-Fehler wieder zu PNG, oder schrumpf einen Ordner voller Kamera-JPGs zu WebP, bevor sie an ein Upload-Limit stoßen, alles auf image.hivly.net.