Bildformate erklärt: JPEG, PNG, WebP, AVIF und mehr
Jedes Bild im Web nutzt ein Format. JPEG, PNG, WebP, AVIF. Jedes komprimiert anders, unterstützt andere Funktionen und eignet sich besser für bestimmte Bildtypen.
Wählst du das falsche Format, sind deine Bilder größer als nötig. Deine Seiten laden langsamer. Deine Besucher springen ab. Wählst du das richtige, bekommst du scharfe Bilder bei einem Bruchteil der Dateigröße.
Dieser Leitfaden erklärt dir jedes wichtige Bildformat. Du erfährst, was jedes Format kann, wo es glänzt und welches du für dein Projekt verwenden solltest.
Was ist ein Bildformat und warum ist es wichtig?
Ein Bildformat bestimmt, wie ein Bild als Datei gespeichert wird. Es steuert drei Dinge: Dateigröße, visuelle Qualität und welche Funktionen das Bild unterstützt.
Manche Formate nutzen verlustbehaftete Komprimierung. Sie werfen Daten weg, die deine Augen nicht vermissen. So werden die Dateien kleiner. JPEG macht das. WebP und AVIF auch.
Andere Formate nutzen verlustfreie Komprimierung. Sie verkleinern die Datei, ohne ein einziges Pixel an Detail zu verlieren. PNG funktioniert so. WebP im verlustfreien Modus auch.
Das Format, das du wählst, beeinflusst:
- Dateigröße. Ein Foto als AVIF kann 50% kleiner sein als dasselbe Foto als JPEG.
- Qualität. Manche Formate zeigen Farbverläufe und Hauttöne besser. Andere bewahren scharfen Text und Kanten.
- Funktionen. Brauchst du Transparenz? PNG, WebP und AVIF unterstützen das. JPEG nicht. Brauchst du Animation? GIF, WebP und AVIF können das.
- Geschwindigkeit. Kleinere Dateien laden schneller. Bei Websites beeinflusst die Formatwahl direkt die Ladezeit und die Core Web Vitals.
Für einen detaillierten Blick auf die Funktionsweise von Komprimierung schau dir unseren kompletten Leitfaden zur Bildkomprimierung an.
Was ist JPEG und wann solltest du es verwenden?
JPEG ist das meistverwendete Bildformat der Welt. 1992 entwickelt, wird es von jedem Gerät, Browser, jeder App und jedem Betriebssystem unterstützt.
JPEG nutzt verlustbehaftete Komprimierung. Es analysiert das Bild in kleinen 8x8-Pixel-Blöcken und entfernt Details, die schwer zu erkennen sind. Bei hohen Qualitätseinstellungen (80-95%) ist der Verlust unsichtbar. Bei niedrigeren Einstellungen siehst du blockartige Artefakte.
JPEG eignet sich am besten für:
- Fotos und Bilder mit vielen Farben
- Bildversand per E-Mail oder Messenger
- Druckabläufe, bei denen universelle Kompatibilität wichtig ist
- Jede Situation, in der du "funktioniert überall" brauchst
JPEG hat Schwächen bei:
- Transparenz (JPEG unterstützt das nicht)
- Screenshots, Text oder Grafiken mit scharfen Kanten (Artefakte zeigen sich schnell)
- Kleinstmögliche Dateigröße (WebP und AVIF schlagen es um 25-50%)
Die JPEG-Qualitätseinstellungen reichen von 0-100. Für Webnutzung bietet 75-85 die beste Balance zwischen Größe und Qualität. Über 90 hinaus wächst die Dateigröße ohne sichtbare Verbesserung.
JPEG ist immer noch der sichere Standard zum Teilen von Fotos. Aber fürs Web komprimieren neuere Formate besser. Es gibt keinen Grund, 2026 noch JPEG auf deiner Website auszuliefern, wenn WebP dasselbe bei 30% weniger Dateigröße schafft.
Was ist PNG und wie unterscheidet es sich von JPEG?
PNG nutzt verlustfreie Komprimierung. Jedes Pixel bleibt genau so, wie es war. Nichts geht verloren.
Das macht PNG perfekt für Bilder, bei denen Präzision zählt. Screenshots, Logos, Diagramme, UI-Elemente und alles mit Text oder scharfen Linien. PNG hält diese Kanten knackig.
PNG unterstützt auch Transparenz. Du kannst ein Logo mit durchsichtigem Hintergrund haben oder eine Grafik, die sanft in jede Seitenfarbe übergeht. JPEG kann das nicht.
Der Kompromiss ist die Dateigröße. Ein Foto als PNG ist 3-10x größer als dasselbe Foto als JPEG. Das liegt daran, dass Fotos Millionen leicht unterschiedlicher Farbwerte haben. Verlustfreie Komprimierung kann diese nicht so effizient verkleinern wie verlustbehaftete.
PNG eignet sich am besten für:
- Screenshots und UI-Mockups
- Logos und Icons mit transparentem Hintergrund
- Grafiken mit Text, scharfen Linien oder Flächenfarben
- Quelldateien in Bearbeitungsabläufen, bei denen du null Qualitätsverlust brauchst
PNG hat Schwächen bei:
- Fotos im Web (viel zu groß)
- Situationen, in denen Dateigröße wichtiger ist als pixelgenaue Genauigkeit
- Animation (nutze stattdessen GIF, WebP oder AVIF)
Es gibt zwei PNG-Varianten. PNG-8 unterstützt nur 256 Farben (wie GIF) und erzeugt winzige Dateien für einfache Grafiken. PNG-24 unterstützt Millionen Farben und volle Transparenz. Die meisten Tools geben standardmäßig PNG-24 aus.
Für Webgrafiken wird PNG von WebP und SVG abgelöst. Verlustfreies WebP ist 25-30% kleiner als PNG bei identischer Qualität. SVG ist noch kleiner für Logos und Icons, weil es Mathematik statt Pixel verwendet.
Was ist WebP und warum ersetzt es JPEG?
WebP ist ein modernes Format, das Google 2010 entwickelt hat. Es kann alles, was JPEG und PNG können, aber mit kleineren Dateien.
WebP unterstützt sowohl verlustbehaftete als auch verlustfreie Komprimierung. Es beherrscht Transparenz. Es unterstützt Animation. Ein Format deckt alle Anwendungsfälle ab, die vorher JPEG, PNG und GIF separat brauchten.
Die Zahlen sprechen für sich:
- Verlustbehaftetes WebP ist 25-35% kleiner als JPEG bei gleicher Qualität
- Verlustfreies WebP ist 25-30% kleiner als PNG
- Animiertes WebP ist 30-50% kleiner als GIF
Die Browserunterstützung ist nahezu vollständig. Chrome, Firefox, Safari, Edge und alle großen mobilen Browser unterstützen WebP. Über 97% der weltweiten Nutzer können WebP-Bilder nativ anzeigen.
WebP ist der praktische Standard für Webbilder in 2026. Es bringt dir spürbare Einsparungen bei der Dateigröße ohne Kompatibilitätssorgen.
Die technischen Details behandeln wir in unserem eigenen Leitfaden: WebP-Komprimierung: Warum sie besser ist als JPEG.
Was ist AVIF und ist es besser als WebP?
AVIF ist das neueste etablierte Bildformat. Es basiert auf dem AV1-Video-Codec, entwickelt von einer Gruppe, zu der Google, Apple, Mozilla und Netflix gehören.
AVIF komprimiert noch besser als WebP. Dateien sind typischerweise 20-30% kleiner als WebP bei gleicher visueller Qualität. Im Vergleich zu JPEG können AVIF-Dateien 50% kleiner sein.
AVIF glänzt bei Fotos mit sanften Farbverläufen, Hauttönen und feinen Farbübergängen. Es hält die Qualität besser als jedes andere Format bei sehr kleinen Dateigrößen. Wenn du die Komprimierung stark aufdrehst, sieht AVIF immer noch sauber aus, während JPEG und WebP Artefakte zeigen.
| Format | Typische Größe vs. JPEG | Transparenz | Animation | Browserunterstützung |
|---|---|---|---|---|
| JPEG | Referenzwert | Nein | Nein | 100% |
| PNG | 3-10x größer | Ja | Nein | 100% |
| WebP | 25-35% kleiner | Ja | Ja | 97%+ |
| AVIF | 40-50% kleiner | Ja | Ja | 93%+ |
Die Nachteile? AVIF kodiert 5-20x langsamer als WebP. Das spielt eine Rolle bei Echtzeit-Komprimierung und großer Stapelverarbeitung. Die Browserunterstützung liegt bei ca. 93%. Gut, aber noch nicht ganz universell.
Für einen detaillierten Direktvergleich lies AVIF vs. WebP: Was komprimiert besser?
Was ist mit GIF, SVG und JPEG XL?
Neben den vier Großen gibt es noch weitere Formate für bestimmte Zwecke.
GIF
GIF ist das Original-Animationsformat. Es unterstützt nur 256 Farben. Das macht es schlecht für Fotos, aber gut genug für einfache Animationen, Memes und Reaktionsbilder.
GIF-Dateien sind groß im Vergleich zu modernen Alternativen. Animiertes WebP und AVIF erzeugen viel kleinere Dateien mit besserer Qualität. Aber GIF funktioniert ausnahmslos überall. Und das Format ist so fest in der Messaging-Kultur verankert, dass es nicht verschwinden wird.
Nutze GIF für: Kurze Animationen in sozialen Medien und Messenger-Apps. Für alles andere nimm lieber animiertes WebP.
SVG
SVG unterscheidet sich grundlegend von jedem anderen Format auf dieser Liste. Es ist ein Vektorformat. Statt Pixelfarben speichert es mathematische Beschreibungen von Formen, Linien und Kurven.
Das bedeutet: SVG-Bilder skalieren auf jede Größe ohne Qualitätsverlust. Ein Logo sieht bei 16px genauso scharf aus wie bei 1600px. Und SVG-Dateien sind winzig für einfache Grafiken. Ein Logo, das als PNG 50 KB groß ist, kann als SVG nur 3 KB haben.
Nutze SVG für: Logos, Icons, Illustrationen, Diagramme und jede Grafik aus Formen und Text. Nutze SVG nie für Fotos.
JPEG XL
JPEG XL wurde als echter Nachfolger von JPEG entwickelt. Es bietet bessere Komprimierung als WebP und AVIF, unterstützt verlustbehaftete und verlustfreie Modi, beherrscht HDR und erweiterten Farbraum und kann bestehende JPEG-Dateien verlustfrei transkodieren (20% kleiner, ohne Qualitätsverlust).
Auf dem Papier ist JPEG XL das beste Bildformat aller Zeiten. In der Praxis hat es ein Problem: Chrome hat die Unterstützung 2023 eingestellt. Ohne Chrome kann das Format im Web nicht Fuß fassen. Safari unterstützt es. Firefox hat es hinter einem Flag.
JPEG XL könnte noch seinen Platz in Fotografie-Workflows und Archivierung finden. Aber fürs Web bleib bei WebP und AVIF.
Wie wählst du das richtige Format?
Hier ist ein einfacher Entscheidungsbaum:
Ist es ein Logo, Icon oder eine einfache Grafik? Nimm SVG. Wenn SVG keine Option ist, nimm PNG oder verlustfreies WebP.
Ist es ein Foto fürs Web? Nimm WebP. Wenn dein Setup Format-Aushandlung unterstützt, liefere AVIF mit WebP-Fallback.
Ist es ein Foto zum Teilen oder Drucken? Nimm JPEG. Es funktioniert überall.
Braucht es Transparenz? Nimm WebP oder PNG. Vermeide AVIF, wenn du maximale Kompatibilität brauchst.
Ist es eine Animation? Nimm WebP für Qualität. Nimm GIF für maximale Kompatibilität.
Ist es ein Screenshot oder ein Bild mit Text? Nimm PNG oder verlustfreies WebP. Verlustbehaftete Komprimierung erzeugt Artefakte um Text.
Für die meisten Websites ist die praktische Strategie:
- SVG für Logos und Icons
- WebP für alle Fotos und Inhaltsbilder
- JPEG als Fallback für die wenigen Nutzer mit uralten Browsern
Wenn du eine stark besuchte Website betreibst und die kleinstmöglichen Dateien willst, nimm AVIF dazu. Liefere es an Browser, die es unterstützen. Für den Rest fällt es auf WebP zurück.
Für Hilfe bei der Wahl der richtigen Komprimierungseinstellungen schau dir unseren Leitfaden zu verlustbehafteter vs. verlustfreier Komprimierung an.
Wie sieht die Zukunft der Bildformate aus?
Der Trend ist klar: Formate werden immer besser bei der Komprimierung und halten gleichzeitig die Qualität hoch.
AVIF gewinnt weiter an Verbreitung. Wenn die Kodierungsgeschwindigkeiten steigen und die Browserunterstützung wächst, wird es in den nächsten Jahren wahrscheinlich zum neuen Standard.
JPEG XL könnte wieder auftauchen, falls Chrome seine Entscheidung revidiert oder ein wichtiger Anwendungsfall (wie Apples Ökosystem) die Verbreitung antreibt.
KI-basierte Komprimierung ist ebenfalls im Kommen. Neuronale Bild-Codecs können Bilder noch kleiner komprimieren als AVIF, indem sie Muster in Bilddaten erlernen. Das ist heute noch experimentell, könnte aber die Bildkomprimierung in Zukunft grundlegend verändern.
Für den Moment ist der praktische Rat einfach. Nutze WebP als Standard-Webformat. Füge AVIF hinzu, wo es sinnvoll ist. Behalte JPEG und PNG für bestimmte Fälle, in denen Kompatibilität oder verlustfreie Präzision gefragt ist.
Deine Bilder machen den Großteil deines Seitengewichts aus. Das richtige Format kann dieses Gewicht halbieren. CompressIMG macht es dir leicht. Lade deine Bilder hoch, komprimiere sie ins beste Format und sieh den Unterschied sofort. Keine Anmeldung nötig.
CompressIMG
Bilder komprimieren ohne Qualitätsverlust. Kostenlos, schnell und direkt im Browser.
CompressIMG kostenlos testenArtikel in diesem Ratgeber
WebP-Komprimierung: Warum sie besser ist als JPEG
WebP-Dateien sind 25-35% kleiner als JPEG bei gleicher Qualität. Erfahre wie WebP-Komprimierung funktioniert, Browser-Support und wie du deine Bilder konvertierst.
AVIF vs WebP: Welches Format komprimiert besser?
AVIF und WebP im direkten Vergleich. Dateigröße, Browser-Support, Encoding-Speed und Qualität. Finde das richtige Format für deine Bilder.
Lossy vs. Lossless Komprimierung: Was ist der Unterschied?
Lerne den Unterschied zwischen verlustbehafteter und verlustfreier Komprimierung. Finde heraus, welche Methode deine Bildqualität erhält und welche mehr Speicher spart.
TinyPNG vs Squoosh vs CompressIMG: Ehrlicher Vergleich
Vergleiche TinyPNG, Squoosh und CompressIMG im Detail. Welches Tool gewinnt bei Stapelverarbeitung, Formatunterstützung, Qualität, Preis und API?