Bildformate im Vergleich

Warum das richtige Bildformat wichtig ist

Das Dateiformat eines Bildes bestimmt drei entscheidende Faktoren: Dateigröße, Bildqualität und Kompatibilität. Ein falsch gewähltes Format kann dazu führen, dass Bilder unnötig groß sind, Ladezeiten steigen oder visuelle Details verloren gehen. Besonders für Websites, E-Mail-Anhänge und Social-Media-Posts ist die bewusste Wahl des Formats ein entscheidender Faktor für Erfolg und Nutzererfahrung.

Die Wahl hängt dabei vom Inhalt des Bildes (Foto, Grafik, Logo, Animation), vom Verwendungszweck (Web, Druck, Social Media) und von den technischen Anforderungen (Transparenz, Animation, Farbtiefe) ab. Im Folgenden stellen wir die sechs wichtigsten Bildformate im Detail vor.

Die 6 wichtigsten Bildformate im Überblick

Detailvergleich: Alle Formate auf einen Blick

JPG / JPEG – Der Klassiker für Fotos

JPEG (Joint Photographic Experts Group) ist seit über 30 Jahren das Standardformat für Fotografien. Es nutzt eine verlustbehaftete Komprimierung, das heißt: Bei jedem Speichervorgang gehen minimal Details verloren – aber die resultierende Dateigröße ist erheblich kleiner als beim Original.

Wann JPG verwenden?

• Fotografien und Bilder mit vielen Farbverläufen – Landschaften, Portraits, Produktfotos
• E-Mail-Anhänge – die meisten Empfänger können JPG problemlos öffnen
• Bewerbungsfotos – universelle Kompatibilität mit Bewerbungsportalen
• Social-Media-Posts – Instagram, Facebook und LinkedIn bevorzugen JPG

Empfohlene Qualitätsstufen

Die Qualität wird in Prozent angegeben (0–100 %). Der ideale Bereich liegt für die meisten Anwendungsfälle zwischen 75 und 85 %. In diesem Bereich ist der Qualitätsverlust mit bloßem Auge kaum erkennbar, aber die Datei wird um 60–80 % kleiner als das unkomprimierte Original.

PNG – Schärfe ohne Kompromisse

PNG (Portable Network Graphics) wurde als verbesserte Alternative zu GIF entwickelt und bietet verlustfreie Komprimierung. Das bedeutet: Die Bildqualität bleibt beim Speichern zu 100 % erhalten. Außerdem unterstützt PNG volle Transparenz (Alpha-Kanal), was es unverzichtbar für bestimmte Anwendungsfälle macht.

Wann PNG verwenden?

• Logos und Wasserzeichen – Transparenz und scharfe Kanten sind entscheidend
• Screenshots – Text und UI-Elemente bleiben gestochen scharf
• Grafiken mit Text – JPG erzeugt bei Text hässliche Kompressionsartefakte
• Bilder mit wenigen Farben – hier komprimiert PNG sogar effizienter als JPG

Achtung: Für Fotos ist PNG nicht empfohlen. Ein Foto im PNG-Format kann leicht 5–10 MB groß werden, während dasselbe Bild als JPG nur 200–500 KB benötigt.

WebP – Das moderne Allround-Format

WebP wurde 2010 von Google als Web-optimiertes Bildformat vorgestellt. Es vereint die Vorteile von JPG (gute Fotokomprimierung) und PNG (Transparenz) in einem einzigen Format – bei deutlich kleineren Dateigrößen. Typisch sind Einsparungen von 25–35 % gegenüber JPG und sogar 60–80 % gegenüber PNG.

Wann WebP verwenden?

• Websites und Blogs – schnellere Ladezeiten und bessere Core Web Vitals
• E-Commerce und Online-Shops – Produktbilder laden schneller
• Progressive Web Apps – optimale Performance auf allen Geräten

Der Browser-Support ist mittlerweile nahezu universell: Chrome, Firefox, Edge, Safari und Opera unterstützen WebP vollständig. Lediglich sehr alte Browser (IE 11) sind ausgenommen.

GIF – Animationen und Memes

Das GIF-Format (Graphics Interchange Format) ist vor allem für seine Animationsfähigkeit bekannt. Es unterstützt allerdings nur 256 Farben pro Frame, was es für Fotos völlig ungeeignet macht. Für einfache Animationen, Ladebalken und kurze Clips ist es jedoch nach wie vor populär.

Moderne Alternative: Für Web-Animationen sind heute WebP-Animationen oder kurze MP4/WebM-Videos meist die bessere Wahl – sie sind deutlich kleiner und qualitativ hochwertiger.

SVG – Unendlich skalierbare Vektorgrafiken

SVG (Scalable Vector Graphics) unterscheidet sich grundlegend von den anderen Formaten: Es speichert keine Pixel, sondern mathematische Beschreibungen von Formen, Linien und Kurven. Dadurch lässt es sich ohne jeden Qualitätsverlust auf jede beliebige Größe skalieren – vom Favicon (16×16 px) bis zum Plakatdruck.

Wann SVG verwenden?

• Icons und Symbole – pixel-perfekt auf jedem Bildschirm (auch Retina)
• Logos – skalierbar für Visitenkarte bis Plakat
• Diagramme und Infografiken – per CSS und JavaScript animierbar

Einschränkung: SVG ist ausschließlich für Grafiken geeignet. Fotos können nicht sinnvoll als SVG gespeichert werden.

AVIF – Die Zukunft der Bildkomprimierung

AVIF (AV1 Image File Format) ist das neueste Format in unserer Liste und basiert auf dem AV1-Videocodec. Es bietet eine überragende Komprimierungseffizienz: Bilder werden bis zu 50 % kleiner als bei WebP und bis zu 70 % kleiner als bei JPG – bei gleichwertiger oder sogar besserer Qualität.

Der Browser-Support wächst stetig: Chrome, Firefox und Opera unterstützen AVIF bereits. Safari hat ebenfalls nachgezogen. Für maximale Kompatibilität empfiehlt es sich, AVIF als erstes Format mit JPG oder WebP als Fallback zu verwenden (via <picture>-Element in HTML).

Empfehlungen nach Einsatzzweck

Verlustbehaftet vs. Verlustfrei – Was bedeutet das?

Verlustbehaftete Komprimierung (JPG, WebP lossy, AVIF lossy) entfernt Bildinformationen, die das menschliche Auge kaum wahrnimmt. Das Ergebnis: deutlich kleinere Dateien bei minimaler sichtbarer Qualitätseinbuße. Bei moderater Einstellung (75–90 %) ist der Unterschied zum Original praktisch unsichtbar.

Verlustfreie Komprimierung (PNG, WebP lossless, GIF) behält alle Bilddaten zu 100 %. Die Dateien werden durch effiziente Datenmuster-Erkennung kleiner, ohne dass ein einziges Pixel verändert wird. Der Nachteil: Die resultierende Datei ist meist deutlich größer als bei verlustbehafteter Komprimierung.