Bildformate erklärt: PNG, JPG, WebP, AVIF — wann was nutzen

Jedes CMS, jeder Blogartikel über Bildoptimierung und jedes "Mach deine Seite schneller"-Video sagt dir, du sollst "das richtige Format" verwenden. Fast keiner sagt dir, welches das ist und warum. Du landest mit einem Ordner voller PNG-Dateien, die JPG hätten sein sollen, einem 4-MB-Hero-Banner, weil niemand die Bildgröße angepasst hat, und einem vagen Verdacht, dass WebP irgendwie "besser" sei, ohne zu wissen, wann. Dieser Ratgeber ist die Version, die ich vor fünf Jahren hätte lesen wollen. Kein Format ist universell am besten — jedes gewinnt in einer bestimmten Situation und steht in anderen im Weg.

Was eine Bilddatei wirklich groß macht

Vor dem Format entscheiden drei Zahlen darüber, wie viel Speicher ein Bild belegt:

• Pixelmaße. Ein 4000×3000-Foto enthält das 16-fache an Daten desselben Fotos in 1000×750. Die Formatwahl rettet dich nicht davor, ein 4000-Pixel-Bild in ein 600-Pixel-Element zu laden — du wirfst nur Bytes auf die CPU des Nutzers.
• Farbtiefe und Kanäle. Ein 8-Bit-RGB-Pixel belegt 3 Byte; ein 8-Bit-RGBA-Pixel (mit Alphakanal für Transparenz) belegt 4. 16 Bit pro Kanal verdoppelt das. Die meisten Fotos sind 8-Bit-RGB — das passt.
• Komprimierung. Hier kommt das Format endlich ins Spiel. Zwei Bilder mit identischen Pixeln können 5 MB oder 200 KB groß sein, je nachdem welcher Codec sie mit welcher Qualität kodiert hat.

Der günstigste Größengewinn liegt fast immer in Schritt 1: vor dem Komprimieren die Bildgröße ändern. Ein 600 Pixel breites Thumbnail als perfekt eingestelltes AVIF schlägt ein 4000-Pixel-JPG immer noch. Wenn das Bild noch nicht auf seine tatsächlichen Anzeigemaße gebracht wurde, mach das zuerst — zum Beispiel mit unserem Bildgrößen-Änderer, bevor du zur Formatkonvertierung greifst.

Die vier Formate, die heute zählen

Es gibt dutzende Bildformate. 2026 musst du nur vier davon gut verstehen: PNG, JPG, WebP und AVIF. GIF und SVG tauchen ebenfalls auf, aber aus engen Gründen — dazu am Ende mehr.

PNG — verlustfrei, transparenzfreundlich, groß

PNG ist ein verlustfreies Format. Jeder Pixel, den du hineinsteckst, kommt identisch wieder heraus, egal wie oft du die Datei neu speicherst. Es unterstützt einen vollen Alphakanal (echte Transparenz, nicht nur eine "transparente Farbe"), und es ist das einzige Mainstream-Format, das jedes Bildwerkzeug und jeder Browser seit den 90ern fehlerfrei behandelt.

Diese Verlässlichkeit hat einen Preis: PNGs von Fotografien sind katastrophal groß. Ein 1200×800-Foto kann als PNG 3 MB groß sein und als JPG 180 KB — ohne sichtbaren Unterschied. PNG ist gut bei langen Reihen identischer Pixel (Logos, Symbole, UI-Screenshots, Strichgrafik) und schlecht bei den rauschigen Details echter Fotografien.

PNG nutzen für: Logos mit Transparenz, UI-Screenshots, Diagramme, alles wo exakte Pixel oder gestochen scharfer Text bleiben müssen. Nicht für PNG geeignet: Fotografien — das bläht dein Seitengewicht ohne Qualitätsgewinn auf.

JPG — der uralte Arbeiter für Fotos

JPG (oder JPEG, dasselbe) stammt aus 1992 und macht einen Job noch immer besser als fast alles andere: Fotografien komprimieren. Die verlustbehaftete Komprimierung wirft visuelle Details weg, die du kaum sehen kannst — subtile Farbverschiebungen in Schatten, hochfrequentes Rauschen in Hauttönen — und das Resultat ist bei Qualität 75 bis 85 auf normaler Betrachtungsdistanz meist nicht vom Original zu unterscheiden, bei einem Bruchteil der Größe.

JPG hat keinen Alphakanal. Es kann keine Transparenz. Ein Logo mit transparentem Hintergrund als JPG zu exportieren gibt dir weißen Hintergrund auf allem — jedes Mal die falsche Antwort. JPG verschlechtert sich außerdem mit jedem erneuten Speichern; die Artefakte addieren sich. Bearbeite in PNG oder im Originalformat (RAW), exportiere am Ende einmal als JPG.

JPG nutzen für: Fotografien, komplexe Farbverläufe, alles wo "wahrgenommen identisch" statt "bytegenau identisch" reicht. Nicht für JPG geeignet: Logos, Symbole, Screenshots mit Text, alles mit Transparenz.

WebP — der sichere moderne Standard

WebP wurde 2010 von Google veröffentlicht und wird seit etwa 2020 von allen großen Browsern unterstützt. Ein Format, das sowohl verlustfreie als auch verlustbehaftete Komprimierung beherrscht, Alphakanal unterstützt und sowohl PNG als auch JPG bei gleicher Bildqualität konsistent in der Dateigröße schlägt. Für Fotos ist WebP bei Qualität 80 typischerweise 25 bis 35 Prozent kleiner als das vergleichbare JPG. Für PNG-artige Inhalte (Logos, UI) ist verlustfreies WebP typischerweise 20 bis 30 Prozent kleiner als PNG.

Das "konsistent" zählt. WebP hat keinen magischen Ausreißer, wo es die Konkurrenz pulverisiert — es ist einfach stetig besser über die Bank. Das macht es zu einem guten Standard, wenn du nicht pro Bild optimierst.

Haken: Wenige Altsysteme (sehr alte E-Mail-Clients, manche Bildbearbeitungssoftware, gewisse CMS-Exportpipelines) akzeptieren WebP immer noch nicht. Für eine Webseite ist es sicher. Für eine Datei, die du an einen nicht-technischen Kunden mailst, schick JPG oder PNG.

WebP nutzen für: fast jedes Webbild, wenn du die Oberfläche kontrollierst. Nicht für WebP geeignet: Lieferungen an Systeme, die es vielleicht nicht akzeptieren, oder Geschäfts-E-Mail-Anhänge.

AVIF — der neue Champion, mit Vorbehalten

AVIF (2019, basierend auf dem AV1-Videocodec) ist das neueste Format auf dieser Liste. Bei gleicher visueller Qualität produziert es Dateien, die 30 bis 50 Prozent kleiner als WebP sind — und WebP war bereits kleiner als JPG. Browserunterstützung ist jetzt in allen Evergreen-Browsern universell.

Zwei Vorbehalte. Erstens: AVIF-Kodierung ist langsam — spürbar langsamer als JPG oder WebP. Für ein einmaliges Hero-Bild egal; für eine Charge von 5000 Produktfotos nicht. Zweitens: Die Qualität der Kodierer schwankt stark — ein schlecht eingestellter AVIF-Kodierer kann in flachen Bereichen (Himmel, weiche Verläufe) seltsam blockige Artefakte produzieren, die ein vergleichbares WebP nicht hat. Nimm einen bekannt guten Kodierer und prüfe das Ergebnis.

AVIF nutzen für: performancekritische Seiten, bandbreitenempfindliche Kontexte (mobil, aufstrebende Märkte), Bilder, die du einmal ausspielst und aggressiv cachst. Nicht für AVIF geeignet: Bilder, die du noch weiterbearbeiten musst, Lieferungen an Systeme die es nicht akzeptieren (Großteil der E-Mail, ältere Designwerkzeuge).

Die zwei lobenden Erwähnungen: GIF und SVG

GIF ist weitgehend tot. Es kodiert nur 256 Farben, produziert enorme Dateien für alles Fotografische, und die eine Sache die es gut konnte (kurze Animationen) macht heute kurzes MP4/WebM-Video besser, ebenso animiertes WebP und animiertes AVIF. Ausnahme: winzige Pixel-Art-Animationen und gewisse Meme-Kontexte, wo "GIF" kulturell die richtige Datei ist.

SVG ist überhaupt kein Rasterformat — es ist ein Vektorformat. SVGs beschreiben Formen, Pfade und Text mathematisch, skalieren also auf jede Größe ohne Schärfe zu verlieren und sind oft winzig (wenige KB). Nutze SVG für jedes Logo, Symbol oder jede Illustration, die du als Vektor hast. Versuch nicht, SVG für Fotos einzusetzen — falsches Werkzeug.

Entscheidungsbaum: welches Format, jetzt

Geh durch. Die erste Übereinstimmung ist deine Antwort.

1. Ist es ein Logo, Symbol oder eine Illustration, die du als Vektor hast? → SVG.
2. Ist es ein UI-Screenshot oder Text, wo Pixelschärfe zählt, und die Datei ist klein (unter ein paar hundert KB)? → PNG (oder verlustfreies WebP, wenn du die Umgebung kontrollierst).
3. Ist es ein Foto, und du optimierst für eine moderne Webseite? → AVIF zuerst, WebP als Fallback, JPG als letzte Reserve.
4. Ist es ein Foto, das gemailt, an ein Dokument angehängt oder an einen Kunden geschickt wird? → JPG bei Qualität 85.
5. Braucht es Transparenz auf einer Nicht-Web-Oberfläche (Bearbeitungsprogramm, Präsentationsfolien)? → PNG.
6. Ist es eine Animation? → Kurzes MP4/WebM-Video für alles Moderne, animiertes WebP für In-Page-UI, GIF nur wenn kulturell erwartet.

Für die meisten realen Workflows lautet die Antwort: PNG für Grafiken mit Transparenz, JPG oder WebP für Fotos, AVIF wenn du wirklich den Bandbreitenvorteil brauchst. Hör auf, dich an Randfällen aufzuhängen.

Workflows, die wirklich Bytes sparen

Die Formatwahl ist ein Schritt in einer Reihenfolge. Die anderen Schritte zu überspringen ist der häufigste Grund für "Ich habe alles auf WebP umgestellt und die Seite ist immer noch langsam." Hier sind die Workflows, die wirklich etwas bringen.

Erst verkleinern, dann komprimieren, dann konvertieren

Die Reihenfolge zählt. Wenn dein Bild 4000 Pixel breit ist und dein Layout es bei 1200 Pixeln zeigt, verschwendet jede Konvertierung davor Arbeit — du kodierst 11 Megapixel an Detail, die der Browser anschließend wegwirft. Reduzier zuerst die Maße mit unserem Bildgrößen-Änderer, dann nutze den Bildkompressor um Bytes zu sparen, dann den Bildkonverter, wenn du auch das Format wechseln musst.

Vor dem Komprimieren zuschneiden

Wenn das Motiv 40 Prozent vom Rahmen ist und der Rest Himmel, kannst du 60 Prozent der Pixel ohne Qualitätsverlust loswerden, indem du zuschneidest. Unser Bildzuschneider ist der schnellste Weg; mach das vor der Formatkonvertierung, nicht danach. Dieselbe Logik gilt für Screenshots mit Letterboxing und für Bildschirmaufnahmen.

Qualität an den Anzeigekontext anpassen

Ein Hero-Banner auf einer Marketing-Seite verdient Qualität 85 oder höher. Ein Thumbnail in einem Kommentar-Strang überlebt bei Qualität 65 problemlos. Niemand sieht den Unterschied auf einem 200-Pixel-Thumbnail, und die Einsparung beim Seitenaufbau ist real. Die meisten Online-Kompressoren geben dir einen Qualitätsregler — nutze ihn bewusst, nicht im Sinne von "Maximum gleich am besten".

Fotos in eine einzige PDF bündeln, wenn möglich

Wenn du eine Sammlung von Bildern an jemanden schickst (einen Vertragsscan, eine Produktgalerie, ein Urlaubsalbum), ist eine einzige PDF oft kleiner als die Summe ihrer Teile und viel angenehmer zu lesen. Unser Bild-zu-PDF-Konverter bündelt sie clientseitig. Nur beachten: Die PDF erbt die Maße der Eingangsbilder — also vorher verkleinern und zuschneiden.

Fehler, die 4-MB-Bilder ausliefern

"Als PNG speichern, um die Qualität zu erhalten" bei einem Foto

Der teuerste Fehler. PNG ist verlustfrei — das klingt nach der sicheren Wahl. Bei einem Foto produziert es eine Datei, die 10× so groß ist wie das vergleichbare JPG bei Qualität 85, ohne sichtbare Verbesserung. Verlustfrei heißt nicht "hohe Qualität" — es heißt "exakte Pixel". Fotografien profitieren nicht von exakten Pixeln, weil das menschliche Auge den Unterschied nicht sieht.

JPGs wiederholt neu speichern

Jedes Speichern als JPG fügt Komprimierungsartefakte hinzu. Öffnen, bearbeiten, speichern, öffnen, bearbeiten, speichern — nach drei Runden sieht das Bild sichtbar schlechter aus. Bearbeite in der höchsten Treue, die dein Original erlaubt (RAW, PNG, das ursprüngliche WebP/AVIF), und exportiere am Ende einmal als JPG.

WebP für die "ich mail das an Oma"-Datei nutzen

Browserunterstützung ist universell. E-Mail-Clients sind keine Browser. Manche älteren Mail-Apps rendern WebP-Anhänge immer noch nicht, und der Empfänger sieht ein kaputtes Bild oder einen Download, den er nicht öffnen kann. Für E-Mail und ähnliche Altsystem-Oberflächen sind JPG und PNG nach wie vor die sicheren Standards.

Blind auf "automatische" Formatkonvertierung vertrauen

Viele CMS-Plattformen liefern Bilder heute als "was der Browser akzeptiert" aus. Das ist meistens richtig, kann aber auch ein bereits komprimiertes JPG erneut als WebP kodieren — und damit eine zweite Runde verlustbehafteter Komprimierung auf die erste draufpacken. Prüf die Standardeinstellungen deiner Plattform; manchmal ist "lad einfach das JPG hoch" richtig, und die Plattform sollte es in Ruhe lassen.

Qualität 100 als "die sichere Wahl" sehen

Qualität 100 bei verlustbehafteten Formaten (JPG, WebP, AVIF) ist meist Verschwendung. Der Größenunterschied zwischen Qualität 90 und Qualität 100 ist groß; der visuelle Unterschied ist fast nichts. Für die meisten Fotos liegt der Sweet Spot bei Qualität 80 bis 85.

Datenschutz: warum browserbasierte Konvertierung zählt

Die meisten Online-Bildkonverter laden deine Datei auf einen Server, fahren ImageMagick oder eine ähnliche Pipeline und schicken das Ergebnis zurück. Für ein öffentliches Marketingfoto ist das in Ordnung. Für einen Screenshot eines privaten Chats, einen Ausweisscan, ein Foto eines Arztberichts, einen unveröffentlichten Produktrender — ist es das nicht.

Serverseitige Konverter halten deine Datei mindestens ein paar Minuten in ihrer Pipeline (oft länger wegen Zwischenspeicherung). Ihre Datenschutzerklärung behauptet vielleicht sofortige Löschung. Verifizieren kannst du das nicht. Wenn dieselbe Seite kostenlose unbegrenzte Konvertierungen anbietet, frag dich, womit sie bezahlt wird.

Clientseitige Konverter erledigen die ganze Arbeit in deinem Browser-Tab über WebAssembly oder die native Canvas-API. Die Datei wird in den Speicher geladen, lokal verarbeitet und als Download zurückgeschrieben. Öffne die DevTools, wechsel auf den Network-Tab — du wirst keinen Upload sehen. Jedes Werkzeug auf easytoolapp — der Bildkonverter, Bildkompressor, Bildgrößen-Änderer und Bildzuschneider — arbeitet so. Für alles, was du nicht öffentlich posten würdest, ist das die einzig vertretbare Wahl.

Was "verlustfrei" bei Bildern wirklich bedeutet

Verlustfrei ist eines der am stärksten missbrauchten Wörter in der Bildwerkzeug-Welt. Sei präzise, welche Bedeutung du meinst.

• Mathematisch verlustfrei — jeder Ausgangspixel ist gleich jedem Eingangspixel. PNG und verlustfreies WebP machen das. Verlustfreies AVIF existiert ebenfalls, wird aber selten verwendet.
• Visuell verlustfrei — das Ergebnis sieht auf normaler Betrachtungsdistanz identisch aus, die zugrunde liegenden Bytes unterscheiden sich aber. JPG bei Qualität 90 bis 95, WebP bei 90, AVIF bei 80 — alle qualifizieren sich für typische Fotografie.
• "Verlustfrei in diesem Workflow" — Marketingsprache. Bedeutet meist, dass das Werkzeug keine zusätzliche Komprimierung oben drauf eingeführt hat. Lies das Kleingedruckte.

Für Grafiken mit scharfen Kanten und großen flachen Flächen (Logos, UI) zählt mathematische Verlustfreiheit, weil verlustbehaftete Komprimierung diese Kanten zu schwachen Lichthöfen verschmiert. Für Fotos zählt sie fast nie; visuell verlustfrei bei einem Bruchteil der Größe ist der bessere Tausch.

Ehrliches Fazit

Erst verkleinern. Zuschneiden, wenn möglich. Wähl das Format, das zum Inhaltstyp passt, nicht das Format, das du immer verwendest. Für Fotos im Web: AVIF wenn möglich, WebP ansonsten, JPG als Fallback. Für Grafiken mit Transparenz: PNG, oder SVG falls es Vektorgrafik ist. Qualität 80 bis 85 reicht fast immer; Qualität 100 ist fast immer Verschwendung. Und wenn das Bild irgendetwas enthält, das du nicht öffentlich posten würdest, mach die Konvertierung im Browser, nicht auf dem Server von jemand anderem.

Wenn du das in der Praxis ausprobieren willst, ohne etwas hochzuladen: Unser Bildkonverter wechselt Formate, Bildkompressor drückt die Dateigröße, Bildgrößen-Änderer reduziert die Maße und Bildzuschneider trimmt den Rahmen — alles komplett im Browser, kein Upload, kein Konto.