Viele Menschen wählen das Bildformat aus Gewohnheit — „ich speichere immer in JPG" oder „PNG hat die bessere Qualität" — ohne zu verstehen, was die Formate wirklich unterscheidet. Das Ergebnis sind Produktfotos, die als PNG gespeichert 5× mehr wiegen als nötig, Logos, die als JPG mit degradierten Kanten gespeichert werden, und Screenshots in JPG mit unlesbarem Text.

Dieser Leitfaden deckt alle relevanten Formate 2026 ab: was jedes ist, wie der Kompressionsalgorithmus funktioniert, wo es glänzt, wo es versagt, und die richtige Entscheidung für jeden Anwendungsfall.

Rasterisierte vs. vektorielle Formate: die grundlegende Unterscheidung

Bevor wir auf die einzelnen Formate eingehen, musst du die wichtigste Unterscheidung verstehen: rasterisiert vs. vektoriell.

Rasterisierte Bilder (JPG, PNG, WebP, AVIF, GIF, BMP) speichern das Bild als Raster aus Pixeln — jeder Punkt hat eine definierte Farbe. Die Auflösung ist fix: eine Vergrößerung über die Originalgröße hinaus erzeugt Pixelbildung, weil für die neuen Pixel keine Daten existieren. Es ist wie der Versuch, ein gedrucktes Foto zu vergrößern — die Druckpunkte werden sichtbar.

Vektorbilder (SVG) speichern das Bild als mathematische Anweisungen — „zeichne einen Kreis mit Radius 50 an Position X,Y in Farbe Z". Das Rendering geschieht in Echtzeit, berechnet für jede Auflösung. Es skaliert unendlich ohne Qualitätsverlust.

Die Wahl zwischen rasterisiert und vektoriell ist keine Geschmacksfrage — sie wird durch die Art des Inhalts bestimmt. Fotografien brauchen immer rasterisierte Formate. Logos, Icons und geometrische Illustrationen profitieren vom Vektorformat.

Die Formate im Detail

JPG / JPEG  Joint Photographic Experts Group

Rasterisiert Lossy (verlustbehaftet) Keine Transparenz Keine Animation Kompatibilität: 100 %

1992 von der Joint Photographic Experts Group entwickelt, wurde JPG speziell dafür konzipiert, Fotografien effizient zu komprimieren. Der Algorithmus teilt das Bild in 8×8-Pixel-Blöcke und wendet die Diskrete Kosinustransformation (DCT) an, um jeden Block als Kombination von Frequenzen darzustellen — wobei die hochvariablen Frequenzen verworfen werden, die das menschliche Auge weniger wahrnimmt. Das Ergebnis ist eine verlustbehaftete Kompression: ein Teil der Originaldaten wird dauerhaft verworfen.

Warum es bei Fotos so gut funktioniert: Fotografien haben sanfte, allmähliche Farbverläufe — genau die Art von Information, die JPG am effizientesten komprimiert. Ein Landschaftsfoto in JPG mit 80 % Qualität kann 10× kleiner sein als dieselbe Datei ohne Kompression, mit auf dem Bildschirm kaum wahrnehmbarem visuellem Unterschied.

Wo es versagt: Der 8×8-Block-Algorithmus erzeugt sichtbare Artefakte an scharfen Kanten, Text und Bereichen mit einheitlicher Farbe. Ein schwarzes Logo auf weißem Hintergrund in JPG zeigt graue Flecken um die Buchstaben herum — die berüchtigten „JPEG-Artefakte". JPG unterstützt zudem keinen Alphakanal (Transparenz).

Wann verwenden: Fotografien für Web, Druck und E-Mail. Produktfotos, Banner, Blog-Bilder. Jedes Bild mit vielen Farbvariationen und ohne Transparenzbedarf.

Wann nicht verwenden: Logos, Icons, Screenshots mit Text, Bilder mit transparentem Hintergrund, Illustrationen mit scharfen Kanten, Bilder, die mehrfach neu bearbeitet und gespeichert werden.

PNG  Portable Network Graphics

Rasterisiert Lossless (verlustfrei) Volle Transparenz (Alphakanal) Keine native Animation Kompatibilität: 100 %

1996 als Alternative zu GIF entwickelt (das Patentbeschränkungen unterlag), nutzt PNG verlustfreie Kompression — es werden keine Daten verworfen. Der DEFLATE-Algorithmus (eine Kombination aus LZ77 und Huffman-Codierung) organisiert die Pixeldaten effizienter, ohne etwas wegzuwerfen. Das garantiert, dass das entpackte Bild pixelgenau dem Original entspricht, egal wie oft die Datei gespeichert wird.

Der Alphakanal: PNG unterstützt neben RGB einen vierten Kanal pro Pixel — den Alphakanal, der die Deckkraft von 0 (vollständig transparent) bis 255 (vollständig deckend) steuert. Das ermöglicht volle Transparenz, Halbtransparenz und weich anti-aliaste Kanten auf jedem Hintergrund.

PNG-8 vs. PNG-24 vs. PNG-32: PNG-8 verwendet eine Palette von bis zu 256 Farben (wie GIF), ideal für einfache Icons und Bilder mit wenigen Farben. PNG-24 verwendet volle Farben (16 Millionen) ohne Transparenz. PNG-32 verwendet volle Farben mit Alphakanal — das ist die häufigste Art, wenn von „transparentem PNG" die Rede ist.

Wo es versagt: Für Fotografien ist PNG ineffizient — Fotodateien in PNG können 3–10× größer sein als das JPG-Äquivalent. Die verlustfreie Kompression kann die Farbvariation von Fotografien nicht effizient eliminieren.

Wann verwenden: Logos und Icons mit transparentem Hintergrund, Screenshots mit Text, Infografiken, Bilder mit einheitlichen Farbflächen, digitale Kunst mit scharfen Kanten, Bilder, die ohne kumulierten Verlust neu bearbeitet werden müssen.

Wann nicht verwenden: Fotografien für das Web (nutze JPG oder WebP), Bilder, die kleine Dateien brauchen, E-Mail-Marketing, wo JPG bessere Kompatibilität bietet.

WebP  Web Picture format

Rasterisiert Lossy und Lossless Volle Transparenz (Alphakanal) Animation unterstützt Kompatibilität: ~97 % (2026)

Von Google auf Basis des VP8-Videocodecs entwickelt, wurde WebP 2010 als universeller Nachfolger von JPG und PNG im Web eingeführt. Es unterstützt beide Modi: lossy (basierend auf VP8, für Fotos) und lossless (basierend auf einem eigenen Algorithmus, für Grafiken). Im Lossy-Modus nutzt WebP Block-Vorhersage und adaptive Transformation — ausgefeiltere Techniken als die DCT von JPG — um Dateien zu erzeugen, die 25–35 % kleiner sind bei gleichwertiger visueller Qualität.

Das Beste aus beiden Welten: WebP ersetzt nicht nur JPG für Fotos (Lossy-Modus), sondern auch PNG für Logos und Grafiken (Lossless-Modus mit Alphakanal), meist mit 20–30 % kleineren Dateien. Es ist das einzige Format, das die Anwendungsfälle von JPG und PNG mit besserer Effizienz in beiden vereint.

Kompatibilität 2026: unterstützt von Chrome, Firefox, Safari (seit 14), Edge und Opera — das deckt über 97 % der Web-Nutzer ab. Die Hauptausnahme sind ältere E-Mail-Clients (besonders Outlook) und veraltete Unternehmenssysteme mit IE11.

Wann verwenden: praktisch jedes Bild für das Web — Fotos, Logos, Icons, Banner. Es ist das empfohlene Standardformat für jeden Upload auf modernen Websites. Googles PageSpeed Insights empfiehlt WebP ausdrücklich, wenn es JPG oder PNG erkennt, wo WebP verwendet werden könnte.

Wann nicht verwenden: E-Mail-Marketing (uneinheitliche Kompatibilität), grafischer Druck, YouTube-Thumbnails (akzeptiert kein WebP), Download-Dateien, die Endnutzer lokal auf älteren Systemen öffnen.

AVIF  AV1 Image File Format

Rasterisiert Lossy und Lossless Volle Transparenz (Alphakanal) Animation unterstützt Kompatibilität: ~88 % (2026)

AVIF leitet sich vom AV1-Videocodec ab (entwickelt von der Alliance for Open Media, zu der Google, Mozilla, Netflix, Amazon und andere gehören). Es ist das neueste und technisch fortschrittlichste Format für Bilder im Web — es erzeugt in vielen Fällen 20–50 % kleinere Dateien als WebP bei gleichwertiger visueller Qualität, besonders bei niedrigeren Qualitätsstufen, wo WebP sichtbar Artefakte zu zeigen beginnt.

Warum es so effizient ist: AV1 nutzt viel ausgefeiltere Kompressionstechniken als das VP8 von WebP — darunter Intra-Frame-Vorhersagemodi, Transformationen mit variabler Größe und Loop-Filter. Das Ergebnis ist besonders beeindruckend bei hochkomplexen Fotos und feinen Verläufen.

Das Encoding-Problem: Bilder in AVIF zu konvertieren ist deutlich langsamer als in WebP — ein AVIF-Encoder kann 10–100× länger brauchen, um dasselbe Bild zu verarbeiten. Für Websites mit vielen Bildern oder Build-Pipelines, die Bildversionen in Echtzeit erzeugen, ist dieser Rechenaufwand relevant.

Kompatibilität 2026: Chrome 85+, Firefox 93+, Safari 16+. Nicht unterstützt von IE11 oder den meisten E-Mail-Clients. Die Unterstützung ist noch geringer als bei WebP, und es wird empfohlen, AVIF mit Fallback auf WebP und JPG über das <picture>-Tag auszuliefern.

Wann verwenden: Websites mit hohem Traffic, wo jedes eingesparte KB die Bandbreitenkosten spürbar senkt; hochwertige Bilder, bei denen der visuelle Unterschied zu WebP wahrnehmbar ist; neue Projekte, deren Build-Pipeline AVIF bereits unterstützt.

Wann nicht verwenden: wenn die Encoding-Zeit ein kritischer Faktor ist; für die Nutzung im ImageTools-Konverter (der AVIF-Encoder über die Canvas-API in Browsern ist nicht optimiert und kann größere Dateien als das Original erzeugen — verwende serverseitige Tools wie sharp für hochwertiges AVIF).

SVG  Scalable Vector Graphics

Vektoriell Verlustfrei (naturgemäß) Volle Transparenz Animation via CSS/JS Kompatibilität: 98 %+

SVG unterscheidet sich radikal von allen anderen Formaten dieser Liste. Statt Pixel zu speichern, speichert es mathematische Anweisungen in XML — „zeichne ein Rechteck mit Breite 200 an Position X,Y in Farbe #3ecf8e". Der Browser oder die Software berechnet die Pixel in Echtzeit in der benötigten Auflösung. Ein 5-KB-SVG kann perfekt in einem 16px-Favicon oder auf einer 20 Meter breiten Werbetafel dargestellt werden.

Warum es das ideale Format für Logos und Icons ist: Logos und Icons bestehen aus geometrischen Formen — Rechtecken, Kreisen, Bezierkurven, Text. SVG beschreibt genau diese Formen ohne jeglichen Informationsverlust. Ein Logo-PNG in 200px wird bei 2000px pixelig; dasselbe Logo als SVG bleibt in jeder Größe perfekt.

Editierbar via CSS und JavaScript: Inline-SVG-Elemente im HTML lassen sich wie jedes andere DOM-Element manipulieren — Farbe per CSS ändern, Animationen über CSS-Transitions oder JS hinzufügen, Interaktivität mit Maus-Events. Es ist wie HTML für Bilder.

Wo es versagt: Fotografien und Bilder mit vielen Farben und komplexen Verläufen ergeben riesige, unpraktikable SVGs — und selbst dann wäre die Qualität schlechter als bei JPG, weil SVG nicht dafür konzipiert ist, fotografische Daten darzustellen.

Wann verwenden: Logos, Icons, geometrische Illustrationen, Datengrafiken, Karten, jede Grafik, die auf mehrere Größen skalieren muss, interaktive Icons in Web-Oberflächen.

Wann nicht verwenden: Fotografien, Bilder mit vielen Farben und Texturen, soziale Netzwerke (die meisten akzeptieren keinen SVG-Upload), E-Mail-Marketing.

GIF  Graphics Interchange Format

Rasterisiert Lossless (aber begrenzte Palette) Teilweise Transparenz (1 Farbe) Animation unterstützt Kompatibilität: 100 %

1987 von CompuServe entwickelt, nutzt GIF den LZW-Algorithmus (Lempel-Ziv-Welch) für verlustfreie Kompression — aber mit einer grundlegenden Einschränkung: es unterstützt nur 256 Farben pro Frame. Jedes Pixel ist ein Index in einer Palette mit bis zu 256 Einträgen, was das Format für Fotos (mit Millionen von Farben) ineffizient macht, aber für einfache Bilder mit wenigen Farben geeignet.

Warum GIF bis heute überlebt hat: Es ist das einzige weit kompatible rasterisierte Format, das nativ Animationen mit mehreren Frames unterstützt — und dieses Merkmal hat es Jahrzehnte nach dem Aufkommen technisch überlegener Formate am Leben gehalten. Animiertes WebP und animiertes AVIF sind effizientere Alternativen, aber die Kompatibilität und die kulturelle Präsenz des animierten GIF sichern ihm seinen Platz.

Teilweise Transparenz: GIF unterstützt nur eine „transparente" Farbe pro Frame — ohne Halbtransparenz oder Anti-Aliasing. Das Ergebnis sind „gezackte" Kanten um Elemente mit gebogenen Rändern, besonders auf farbigen Hintergründen.

Wann verwenden: einfache Animationen auf Plattformen, die kein animiertes WebP oder MP4 unterstützen; animierte Icons mit wenigen Farben; Memes und Social-Media-Inhalte, wo das GIF-Format kulturell erwartet wird.

Wann nicht verwenden: statische Fotos (nutze JPG oder WebP), statische Logos (nutze PNG oder SVG), komplexe Animationen im Web (nutze MP4 oder animiertes WebP — viel effizienter).

BMP  Bitmap

Rasterisiert Keine Kompression (meist) Keine native Transparenz Keine Animation Kompatibilität: Windows/Office

BMP ist das Bitmap-Format von Windows, entwickelt von Microsoft. In den meisten Konfigurationen wird keine Kompression angewendet — jedes Pixel wird direkt mit seinem Farbwert gespeichert. Das Ergebnis sind sehr große Dateien: ein 1920×1080-Bild als 24-Bit-BMP belegt exakt 5,93 MB, immer, unabhängig vom Inhalt.

Warum es noch existiert: BMP hat garantierte Kompatibilität im gesamten Microsoft-Ökosystem — Windows, Office, Drucker und ältere Bearbeitungssoftware. Für den internen Einsatz in Bildverarbeitungs-Pipelines, wo das Fehlen von Kompression ein Vorteil ist (garantiert artefaktfreie Daten bei jedem Schritt), hat BMP noch seinen Platz.

Wann verwenden: wenn ein bestimmtes System (besonders ein Altsystem) BMP verlangt; als Zwischenformat in Verarbeitungs-Pipelines, wo Kompression unerwünschte Artefakte einführen würde; industrieller Druck in einigen spezifischen Systemen.

Wann nicht verwenden: jede Nutzung im Web, E-Mail, soziale Netzwerke oder jeder Kontext, wo die Dateigröße wichtig ist.

Vollständige Vergleichstabelle

Format Kompression Transparenz Animation Ideal für Relative Größe (Foto)
JPG Lossy Nein Nein Fotografien Referenz (1×)
PNG-32 Lossless Voller Alphakanal Nein Logos, Icons, Screenshots 3–8× größer als JPG
WebP lossy Lossy Voller Alphakanal Ja Alles im Web 25–35 % kleiner als JPG
WebP lossless Lossless Voller Alphakanal Ja Logos, Icons 20–30 % kleiner als PNG
AVIF Lossy und Lossless Voller Alphakanal Ja Hochleistungs-Web 30–50 % kleiner als JPG
SVG Vektoriell Vollständig Via CSS/JS Logos, Icons, Illustrationen Variiert (sehr klein für einfache Formen)
GIF Lossless (256 Farben) 1 Farbe (keine Halbtransparenz) Ja (Multi-Frame) Einfache Animationen Variabel
BMP Keine Nicht nativ Nein Windows-Altsysteme 5–20× größer als JPG

Der Entscheidungsleitfaden: welches Format verwenden?

Für Fotos und Bilder mit vielen Farben

Für Logos und visuelle Identität

Für Screenshots

Für Animationen

Für Interface-Icons

🎯 Die 80-%-Regel: Fotografie → WebP (oder JPG für E-Mail/Druck). Logo und Icon → SVG (oder PNG, wo SVG nicht akzeptiert wird). Screenshot mit Text → PNG oder WebP lossless. Animation → MP4 oder GIF.

Warum dieselbe Datei im gleichen Format unterschiedliche Qualität haben kann

Ein häufiges Missverständnis: „JPG hat schlechte Qualität" oder „PNG hat immer gute Qualität". Tatsächlich ist die Qualität einer Datei keine Eigenschaft des Formats — sie ist eine Folge der beim Speichern getroffenen Entscheidungen.

Ein mit 95 % Qualität gespeichertes JPG hat exzellente visuelle Qualität — praktisch identisch zum Original. Dasselbe JPG mit 30 % Qualität gespeichert hat schwere Artefakte. Der Unterschied liegt nicht im Format: er liegt in der verwendeten Kompressionseinstellung.

PNG hat dieses Problem nicht, weil es verlustfreie Kompression nutzt — die Datei kann je nach Algorithmus und Kompressionsstufe größer oder kleiner sein, aber die visuelle Qualität ist immer identisch zum Original. PNG „verliert nie an Qualität" nicht, weil es JPG überlegen wäre, sondern weil es eine andere Art von Kompression verwendet, die keine Daten verwirft.

⚠️ Vorsicht bei JPG-Kompressionszyklen: ein JPG zu speichern, zu öffnen und erneut zu speichern wendet Kompression auf Kompression an — jeder Zyklus verwirft mehr Daten. Nach 5–10 Zyklen ist die visuelle Verschlechterung deutlich. Arbeite immer von der Original-Qualitätsdatei aus und exportiere erst im letzten Schritt nach JPG.

Zwischen Formaten konvertieren

Nutze den Bild-Konverter von ImageTools, um direkt im Browser zwischen JPG, PNG und WebP zu konvertieren — ohne Installation, ohne Dateien an externe Server zu senden. Wähle das Zielformat, lade hoch und lade das Ergebnis herunter.

Um speziell zu WebP zu konvertieren, haben wir einen eigenen Leitfaden, der alle Methoden abdeckt — online, WordPress, Kommandozeile und Node.js.

Jetzt zwischen Formaten konvertieren

JPG, PNG und WebP — kostenlose Konvertierung im Browser, ohne Registrierung, ohne Dateien an externe Server zu senden.

Bild kostenlos konvertieren

Häufig gestellte Fragen

Welches Format hat die beste Bildqualität?
Die Antwort hängt vom Kontext ab. Bei Fotografien ist Qualität eine Funktion der angewendeten Kompression — ein JPG mit 95 % oder WebP mit 90 % haben exzellente visuelle Qualität, praktisch nicht vom Original auf dem Bildschirm zu unterscheiden. PNG hat per Definition (lossless) identische Qualität zum Original, erzeugt bei Fotos aber riesige Dateien ohne visuellen Gewinn auf dem Bildschirm. SVG hat für geometrische Formen „unendliche" Qualität, weil es nicht von Pixeln abhängt. Es gibt nicht „das Format mit der besten Qualität" — es gibt das richtige Format für jede Art von Inhalt.
Warum ist mein Foto-PNG viel größer als das JPG desselben Fotos?
Weil PNG verlustfreie Kompression nutzt, die die Farbvariation von Fotografien nicht effizient eliminieren kann. Ein Foto hat Millionen von Pixeln mit leicht unterschiedlichen Farben — genau die Art von Daten, die der verlustfreie Algorithmus nicht kompakt darstellen kann. JPG (und WebP) verwerfen hochfrequente Daten, die das Auge kaum wahrnimmt, und schaffen so eine Reduzierung der Datei um 90 %+ ohne nennenswerten visuellen Verlust. PNG ist effizient für Bilder mit großen einheitlichen Farbflächen (Logos, Icons), nicht für Fotografien.
Wird WebP JPG und PNG vollständig ersetzen?
Für die Nutzung im Web hat WebP JPG und PNG in den Best Practices bereits effektiv ersetzt. Aber JPG und PNG werden noch lange bestehen bleiben, weil: das E-Mail-Ökosystem noch uneinheitliche Kompatibilität mit WebP hat; Druck- und Grafiktools mit JPG und TIFF arbeiten; JPG in Milliarden bestehender Dateien vorhanden ist; und die Vertrautheit der Nutzer mit diesen Formaten enorm ist. In der Praxis dürfte die Koexistenz der Formate Jahrzehnte andauern.
Ist AVIF besser als WebP? Sollte ich jetzt umsteigen?
AVIF ist WebP in der Kompressionseffizienz technisch überlegen — besonders bei niedrigen und mittleren Qualitätsstufen, wo WebP früher als AVIF Artefakte zeigt. Aber ein vollständiger Umstieg auf AVIF ergibt für die meisten Websites 2026 noch keinen Sinn, weil: die Kompatibilität noch geringer ist als bei WebP; das Encoding viel langsamer ist (ein Problem für Build-Pipelines); und der tatsächliche Gewinn bei den meisten typischen Website-Bildern nicht so dramatisch ist, wie Benchmarks unter Idealbedingungen suggerieren. Die Empfehlung: WebP jetzt implementieren, AVIF für spezifische Fälle mit hohem Traffic evaluieren.
Kann ich SVG für jede Art von Bild verwenden?
Nein. SVG ist nur für Bilder effizient, die sich mit geometrischen Formen beschreiben lassen — Logos, Icons, Grafiken, Diagramme, Vektorillustrationen. Für Fotografien wäre ein SVG unpraktikabel: jedes Pixel eines 12-Megapixel-Fotos als XML-Anweisung darzustellen würde eine Datei von mehreren Gigabyte ergeben, die unmöglich zu rendern wäre. SVG hat einen bestimmten Bereich, in dem es unschlagbar ist (skalierbare geometrische Formen), und andere Bereiche, in denen es völlig ungeeignet ist (Fotografien, Bilder mit Textur).
Was ist das HEIC-Format, das bei iPhone-Fotos auftaucht?
HEIC (High Efficiency Image Container) ist das Standard-Kameraformat des iPhone seit iOS 11. Es basiert auf dem HEVC-Codec (H.265) und erzeugt bei gleichwertiger Qualität etwa 50 % kleinere Dateien als JPG — ähnlich dem, was AVIF tut, aber mit einer anderen Technologie. Das Problem ist, dass die HEIC-Kompatibilität begrenzt ist: Windows 10 und 11 brauchen einen zusätzlichen Codec zum Öffnen, und viele Web-Plattformen akzeptieren keinen HEIC-Upload. Für die Nutzung im Web konvertierst du HEIC vor der Verwendung zu WebP oder JPG.