Bildformate erklärt: PNG, JPEG, WebP, SVG & AVIF

31. März 2026 · 12 Min. Lesezeit

Die Wahl des richtigen Bildformats kann die Leistung, visuelle Qualität und Benutzererfahrung Ihrer Website dramatisch beeinflussen. Mit modernen Formaten wie AVIF und WebP, die neben etablierten Standards wie JPEG und PNG an Bedeutung gewinnen, war es noch nie so wichtig zu verstehen, wann welches Format zu verwenden ist.

Dieser umfassende Leitfaden erläutert die technischen Spezifikationen, praktischen Anwendungsfälle und Leistungsmerkmale aller wichtigen Bildformate, die heute im Web verwendet werden. Egal, ob Sie eine stark frequentierte Website optimieren oder einfach nur verstehen möchten, warum Ihre Bilder verschwommen aussehen – hier finden Sie umsetzbare Erkenntnisse.

Vollständiger Formatvergleich

Bevor wir auf einzelne Formate eingehen, hier ein umfassender Überblick darüber, wie sich jedes Format nach wichtigen Kriterien verhält. Diese Tabelle hilft Ihnen, schnell zu erkennen, welches Format Ihren spezifischen Anforderungen entspricht.

JPEG: Der Fotografie-Standard

JPEG (Joint Photographic Experts Group) ist seit 1992 das dominierende Format für fotografische Bilder. Sein verlustbehafteter Komprimierungsalgorithmus ist speziell für Bilder mit kontinuierlichen Tönen optimiert, bei denen das menschliche Auge weniger empfindlich auf geringfügige Farbvariationen reagiert.

Wie JPEG-Komprimierung funktioniert

JPEG verwendet eine Technik namens diskrete Kosinustransformation (DCT), um räumliche Bilddaten in Frequenzdaten umzuwandeln. Anschließend werden hochfrequente Informationen verworfen, die Menschen weniger genau wahrnehmen, wodurch eine erhebliche Reduzierung der Dateigröße bei gleichzeitiger Beibehaltung der visuellen Qualität erreicht wird.

Das Format eignet sich hervorragend für Fotografien, Gemälde und komplexe natürliche Szenen, hat aber Schwierigkeiten mit scharfen Kanten, Text und flachen Farbbereichen, wo Komprimierungsartefakte sehr sichtbar werden.

JPEG-Qualitätsstufen erklärt

Das Verständnis der Qualitätseinstellungen ist entscheidend für die Balance zwischen Dateigröße und visueller Wiedergabetreue:

• Qualität 95-100: Minimale Komprimierung, sehr große Dateien. Nur für Archivierungszwecke oder wenn die Dateigröße irrelevant ist verwenden. In den meisten Fällen visuell nicht vom Original zu unterscheiden.
• Qualität 85-95: Visuell verlustfrei für die meisten Fotografien. Dies ist der optimale Bereich für hochwertige Web-Bilder, bei denen Qualität wichtiger ist als Dateigröße.
• Qualität 70-85: Ausgezeichnete Balance für Web-Nutzung. Erzeugt qualitativ gute Bilder bei angemessenen Dateigrößen. Die meisten Websites sollten diesen Bereich anstreben.
• Qualität 50-70: Sichtbare Artefakte erscheinen, besonders in detaillierten Bereichen. Akzeptabel für Thumbnails oder bei stark eingeschränkter Bandbreite.
• Qualität unter 50: Erhebliche Qualitätsverschlechterung. Nur für winzige Thumbnails oder extreme Bandbreitenbeschränkungen verwenden.

Progressive vs. Baseline JPEG

Progressive JPEGs laden in mehreren Durchgängen, beginnend mit einer Version niedriger Auflösung, die sich allmählich schärft. Baseline-JPEGs laden von oben nach unten in einem einzigen Durchgang.

Vorteile von Progressive JPEG:

• Bessere wahrgenommene Leistung – Benutzer sehen sofort etwas
• Oft 2-10% kleinere Dateigröße für Bilder über 10KB
• Verbesserte Benutzererfahrung bei langsamen Verbindungen

Wann Baseline verwenden:

• Sehr kleine Bilder (unter 10KB), bei denen progressive Kodierung Overhead hinzufügt
• Bei Ausrichtung auf sehr alte Geräte mit begrenzter Rechenleistung
• E-Mail-Anhänge, bei denen einige Clients progressive nicht gut handhaben

Wann JPEG NICHT verwenden

JPEG ist die falsche Wahl für:

• Screenshots mit Text (verwenden Sie stattdessen PNG)
• Bilder, die Transparenz erfordern (verwenden Sie PNG oder WebP)
• Strichzeichnungen, Diagramme oder Illustrationen (verwenden Sie SVG oder PNG)
• Bilder, die mehrfach bearbeitet werden (Qualität verschlechtert sich bei jedem Speichern)
• Bilder mit großen Bereichen einfarbiger Flächen (Komprimierungsartefakte sind sehr sichtbar)

PNG: Verlustfreie Präzision

PNG (Portable Network Graphics) wurde 1996 als patentfreier Ersatz für GIF entwickelt. Es verwendet verlustfreie Komprimierung, was bedeutet, dass jedes Pixel genau so erhalten bleibt, wie es im Originalbild war – egal wie oft Sie es speichern.

PNG-Farbtiefen

PNG unterstützt mehrere Farbtiefen, die jeweils für unterschiedliche Anwendungsfälle geeignet sind:

• PNG-8: Maximal 256 Farben (8-Bit), ähnlich wie GIF, aber mit besserer Komprimierung. Ideal für einfache Grafiken, Icons und Bilder mit begrenzten Farbpaletten. Dateigrößen sind typischerweise 30-50% kleiner als entsprechende GIFs.
• PNG-24: 16,7 Millionen Farben (24-Bit), volle RGB-Farbe. Perfekt für komplexe Grafiken ohne Transparenz. Deutlich größer als PNG-8, behält aber perfekte Qualität bei.
• PNG-32: 24-Bit-Farbe plus 8-Bit-Alphakanal (Transparenz). Das ist es, was die meisten Leute meinen, wenn sie "PNG" sagen. Unterstützt 256 Transparenzstufen pro Pixel und ermöglicht glatte Kanten und halbtransparente Effekte.

Alpha-Transparenz erklärt

PNGs Alphakanal ist sein Killer-Feature. Anders als bei GIFs binärer Transparenz (ein Pixel ist entweder vollständig transparent oder vollständig undurchsichtig) unterstützt PNG 256 Transparenzstufen pro Pixel.

Dies ermöglicht:

• Glatte kantengeglättete Ränder, die sich nahtlos mit jedem Hintergrund vermischen
• Halbtransparente Overlays und Effekte
• Schatten und Glüheffekte, die auf jeder Hintergrundfarbe natürlich aussehen
• Komplexe Compositing- und Layering-Effekte

PNG-Komprimierungsstufen

PNG-Komprimierung ist verlustfrei, aber einstellbar. Höhere Komprimierungsstufen benötigen länger zum Kodieren, erzeugen aber kleinere Dateien mit identischer visueller Qualität:

• Stufe 0: Keine Komprimierung (am schnellsten, größte Dateien)
• Stufe 1-3: Schnelle Komprimierung, moderate Dateigrößen
• Stufe 6: Standard in den meisten Tools, gute Balance
• Stufe 9: Maximale Komprimierung (am langsamsten, kleinste Dateien)

Für Web-Nutzung verwenden Sie immer Stufe 9 Komprimierung. Der Unterschied in der Kodierungszeit ist für einzelne Bilder vernachlässigbar, und die Einsparungen bei der Dateigröße sind erheblich.

Wann PNG verwenden

PNG ist die beste Wahl für:

• Screenshots und Bildschirmaufnahmen
• Grafiken mit Text oder scharfen Kanten
• Logos und Marken-Assets (wenn SVG nicht geeignet ist)
• Bilder, die Transparenz erfordern
• Bilder, die mehrfach bearbeitet werden
• Grafiken mit flachen Farben oder Verläufen
• Master-Kopien jedes Bildes vor JPEG-Komprimierung

Überlegungen zur PNG-Dateigröße

PNG-Dateien können für fotografische Inhalte 5-10x größer sein als entsprechende JPEGs. Ein 2MB JPEG könnte zu einem 15MB PNG werden. Dies macht PNG ungeeignet für Fotogalerien oder Hero-Bilder, es sei denn, Sie verwenden moderne Formate wie WebP oder AVIF als Alternativen.

WebP: Googles universelles Format

WebP, von Google entwickelt und 2010 veröffentlicht, wurde entwickelt, um sowohl JPEG als auch PNG durch ein einziges Format zu ersetzen, das überlegene Komprimierung für verlustbehaftete und verlustfreie Bilder sowie Transparenz- und Animationsunterstützung bietet.

WebP-Komprimierungsleistung

WebP liefert beeindruckende Dateigrößenreduzierungen im Vergleich zu Legacy-Formaten:

Verlustbehaftetes vs. verlustfreies WebP

WebP unterstützt beide Komprimierungsmodi, und Sie