Progressives JPEG vs Baseline:
Welches ist besser für Web?

Was ist ein progressives JPEG?

Ein progressives JPEG speichert das Bild in mehreren Durchgängen. Der erste Durchgang zeigt das gesamte Bild mit wenig Details; jeder weitere schärft es nach. Ein Baseline-JPEG (Standard) speichert das Bild in einem einzigen Durchgang von oben nach unten.

Beide erreichen dieselbe endgültige Qualität. Progressive Dateien sind bei Bildern über etwa 10 KB meist etwas kleiner.

Der visuelle Lade-Unterschied

Der offensichtlichste Unterschied zwischen progressivem und Baseline JPEG ist, wie das Bild erscheint, während es noch vom Browser heruntergeladen wird. Dies ist wichtig, da Bilder oft die schwersten Assets auf einer Webseite sind und bei langsameren Verbindungen mehrere Sekunden dauern können, um vollständig zu laden.

Baseline JPEG: Von oben nach unten

Ein Baseline JPEG speichert Bilddaten in einem einzigen Scan, Pixelreihe für Pixelreihe, von oben des Bildes zur Unterseite. Während der Browser Bytes empfängt, rendert er das, was er hat:

• Bei 10% geladen: Die oberen 10% des Bildes sind sichtbar in voller Detail. Der Rest ist leer oder ein Platzhalter.
• Bei 50% geladen: Die obere Hälfte ist vollständig gerendert. Die untere Hälfte fehlt noch.
• Bei 90% geladen: Fast vollständig, aber die untere Kante ist immer noch leer.
• Bei 100% geladen: Das vollständige Bild ist sichtbar.

Der Benutzer sieht einen “Vorhang-Enthüllungs”-Effekt — eine scharfe Linie zwischen dem gerenderten Teil und dem nicht geladenen Teil.

Progressives JPEG: Verschwommen zu Scharf

Ein progressives JPEG speichert die Bilddaten in mehreren Scans (das Standardskript von libjpeg verwendet 10). Der erste Scan enthält die niederfrequentesten DCT-Koeffizienten — die groben Farb- und Helligkeitsinformationen. Jeder weitere Scan fügt höherfrequente Details hinzu.

• Bei 10% geladen: Das gesamte Bild ist als sehr verschwommene, niederauflösende Vorschau sichtbar. Sie können das Motiv, die Farben und die Komposition identifizieren.
• Bei 50% geladen: Das Bild ist erkennbar mit mittleren Details. Feine Texturen sind immer noch weich, aber der Gesamteindruck ist klar.
• Bei 90% geladen: Fast volle Detail. Nur die feinsten Texturen und Kanten sind immer noch leicht weich.
• Bei 100% geladen: Identisch mit der Baseline-Version — volle Qualität, jedes Detail vorhanden.

Der Benutzer sieht die vollständige Komposition sofort, dann sieht er sie schärfer werden. Dies ist psychologisch befriedigender als das Beobachten eines halb gerenderten Bildes, das langsam nach unten wächst.

Wie progressive Scans technisch funktionieren

Um zu verstehen, warum progressives JPEG sowohl perceptuell besser als auch leicht kleiner sein kann, müssen Sie wissen, was diese mehreren Scans tatsächlich enthalten.

Jedes JPEG-Bild wird in 8×8 Pixel große Blöcke unterteilt, und jeder Block wird in 64 DCT-Koeffizienten (Discrete Cosine Transform) umgewandelt. Diese Koeffizienten reichen vom DC-Koeffizienten (der durchschnittlichen Helligkeit des Blocks — die niedrigste Frequenz) zum AC63-Koeffizienten (dem feinsten diagonalen Detail — der höchsten Frequenz).

In einem Baseline JPEG werden alle 64 Koeffizienten für jeden Block in einem einzigen Pass geschrieben. Der Encoder verarbeitet Block für Block, Reihe für Reihe, von oben des Bildes zur Unterseite.

In einem progressiven JPEG macht der Encoder mehrere Durchgänge über das gesamte Bild:

1. Scan 1 (nur DC): Schreibt nur den DC-Koeffizienten jedes Blocks. Dies ist genug, um eine 8x-heruntergesampelte Version des Bildes zu rekonstruieren — die verschwommene Vorschau.
2. Scan 2: Fügt einige niederfrequente AC-Koeffizienten hinzu (AC1–AC5). Das Bild wird deutlich schärfer, Kanten erscheinen.
3. Scan 3–4: Fügt Mittelfrequenzkoeffizienten hinzu. Die meisten Details sind jetzt sichtbar.
4. Letzter Scan: Fügt die höchstfrequenten Koeffizienten hinzu. Das Bild erreicht volle Qualität.

Das endgültige Ergebnis ist mathematisch identisch mit der Baseline-Version. Die gleichen DCT-Koeffizienten, die gleiche Quantisierung, die gleichen Pixel. Nur die Bytereihenfolge in der Datei unterscheidet sich.

Dateigrößen-Auswirkung

Einer der weniger bekannten Vorteile von progressivem JPEG ist, dass es bei gleicher Qualitätseinstellung typischerweise etwas kleinere Dateien erzeugt als Baseline.

Warum ist progressiv kleiner? Im progressiven Modus werden ähnliche DCT-Koeffizienten aus dem gesamten Bild im gleichen Scan gruppiert. Dies erstellt längere Läufe ähnlicher Werte, die Huffman-Codierung effizienter komprimiert. Im Baseline-Modus werden alle 64 Koeffizienten für einen Block zusammen geschrieben, bevor zum nächsten Block übergegangen wird — vermischung niederfrequente und hochfrequente Daten, die sehr unterschiedliche statistische Verteilungen haben.

Die einzige Ausnahme sind sehr kleine Bilder unter 10 KB — winzige Vorschaubilder, Icons und Avatare. Für diese überwiegt der Overhead mehrerer Scan-Header (jeder Scan fügt einige Bytes Metadaten hinzu) den Kompressionsvorteil. Aber diese Bilder sind so klein, dass der Unterschied höchstens ein paar hundert Bytes beträgt.

Wahrgenommene Leistung und Core Web Vitals

Aus rein technischem Standpunkt erreichen sowohl progressives als auch Baseline JPEG volle Qualität zum gleichen Zeitpunkt — wenn das letzte Byte ankommt. Die gesamte Download-Zeit ist identisch (oder leicht schneller für progressiv, gegeben die kleinere Dateigröße).

Aber Web-Leistung ist nicht nur absolute Geschwindigkeit. Wahrgenommene Leistung — wie schnell die Seite sich für den Benutzer anfühlt — ist ebenso wichtig. Und hier hat progressives JPEG einen klaren Vorteil.

Benutzer nehmen progressiv als schneller wahr

Viele Entwickler bevorzugen progressives JPEG für große Bilder, weil Besucher früh das gesamte Bild sehen. Studien dazu, ob Menschen es tatsächlich als schneller wahrnehmen, kommen zu gemischten Ergebnissen. Betrachten Sie es daher als kleinen Bonus, nicht als garantierten Vorteil.

Auswirkung auf Core Web Vitals

Googles Core Web Vitals messen Benutzererlebnis durch drei Metriken. Progressives JPEG kann zwei von ihnen positiv beeinflussen:

• Largest Contentful Paint (LCP): Bei Bildern wird LCP erfasst, wenn das Bild vollständig geladen ist, daher senkt progressive Kodierung den LCP allein nicht. Eine etwas kleinere Datei hilft trotzdem, und die unscharfe Vorschau gibt Besuchern früher etwas zu sehen.
• Cumulative Layout Shift (CLS): Progressiv und Baseline verhalten sich beim CLS identisch — die Bildabmessungen sind aus dem JPEG-Header bekannt, bevor Pixeldaten eintreffen. Keiner der beiden Modi verursacht Layoutverschiebungen, wenn korrekte width/height-Attribute oder CSS aspect-ratio gesetzt sind.
• Interaction to Next Paint (INP): Keiner der beiden Modi hat direkten Einfluss.

Hero-Bilder über der Falz

Für große Hero-Bilder oben auf einer Seite ist progressive Codierung besonders vorteilhaft. Bei einer 3G Mobil-Verbindung dauert ein 200 KB Hero-Bild etwa 2 Sekunden zum vollständigen Laden. Mit progressiver Codierung sieht der Benutzer eine erkennbare (wenn auch verschwommene) Version des Hero nach nur 200–400 ms — genug, um die visuelle Identität der Seite zu verstehen, während der Rest des Inhalts weiter lädt.

Browser-Unterstützung in 2026

Progressives JPEG genießt universale Browser-Unterstützung. Es gibt keine Kompatibilitätsbedenken in jedem modernen oder sogar mäßig alten Browser:

Progressives JPEG ist Teil der ursprünglichen JPEG-Spezifikation (ITU-T T.81, veröffentlicht 1992). Es wurde von jedem großen Bild-Viewer und Browser seit Jahrzehnten unterstützt. Es gibt null Risiko von Kompatibilitätsproblemen.

Ist progressiv immer noch relevant in 2026?

Mit HTTP/2, 5G-Netzwerken und Breitband-Geschwindigkeiten in Hunderten von Megabit könnte man sich fragen, ob der inkrementelle Lade-Vorteil des progressiven JPEG immer noch relevant ist. Die Antwort ist nuanciert.

Bei schnellen Verbindungen: Minimaler sichtbarer Unterschied

Bei einer Glasfaser-Verbindung oder einem starken 5G-Signal lädt ein 200 KB Bild in unter 50 ms. Bei dieser Geschwindigkeit zeigen weder progressiv noch Baseline sichtbares Lade-Verhalten — das Bild erscheint einfach vollständig gerendert. Der Benutzer sieht niemals den Verschwommung-zu-Scharf-Übergang, weil alle Scans ankommen, bevor der erste Frame gemalt wird.

Bei langsamen Verbindungen: Immer noch sehr relevant

Nicht jeder hat schnelles Internet. In 2026 verlassen sich signifikante Teile der Welt immer noch auf 3G- oder überlastete WiFi-Netzwerke. In diesen Bedingungen:

• Ein 300 KB Bild bei einer 1 Mbps-Verbindung dauert etwa 2,4 Sekunden.
• Mit progressiver Codierung sieht der Benutzer eine erkennbare Vorschau in ~400 ms.
• Mit Baseline-Codierung sieht der Benutzer nur die oberen 15% des Bildes bei 400 ms.

Für Benutzer bei langsamen Verbindungen — ländliche Gegenden, Entwicklungsmärkte, überlastetes öffentliches WiFi, unterirdischer Transit — bietet progressives JPEG eine bedeutend bessere Erfahrung.

Das Fazit: Kein Nachteil

Progressives JPEG hat bei Bildern über 10 KB gegenüber Baseline fast keine Nachteile:

• Gleiche oder etwas kleinere Dateigröße.
• Gleiche endgültige Bildqualität.
• Universelle Browser-Unterstützung.
• Besser wahrgenommenes Laden bei langsamen Verbindungen.
• Keine zusätzliche Kodierzeit (vernachlässigbarer Unterschied).
• Etwas mehr CPU und Speicher beim Dekodieren, auf modernen Geräten selten spürbar.

Für die meisten Webbilder ist progressiv die bessere Standardeinstellung.

Wie man progressives JPEG erstellt

Die meisten Bildbearbeitungs-Tools unterstützen progressive Codierung. Hier sind die häufigsten Methoden:

ImageMagick

ImageMagick verwendet die -interlace Flag zur Kontrolle der progressiven Codierung:

# Progressives JPEG
convert input.png -interlace Plane -quality 85 output.jpg

# Baseline JPEG (explizit)
convert input.png -interlace None -quality 85 output.jpg

Die -interlace Plane Option teilt ImageMagick mit, die DCT-Koeffizienten in Frequenzband-Reihenfolge (progressiv) statt Block-für-Block-Reihenfolge (Baseline) zu schreiben. Die Qualitätseinstellung ist unabhängig — Sie können jede Qualitätsstufe mit jedem Interlace-Modus kombinieren.

CleverUtils.com

Unser PNG-zu-JPG-Konverter schreibt Baseline-JPEGs mit Qualität 92 (wir haben die Ausgabe geprüft). Um eine Datei nachträglich ohne Qualitätsverlust progressiv zu machen, führen Sie jpegtran -progressive darauf aus, wie unten gezeigt.

Adobe Photoshop

Aktivieren Sie unter Datei → Exportieren → Für Web speichern (Legacy) die Option Progressiv. Im normalen Dialog Speichern unter für JPEG wählen Sie unter Formatoptionen Progressiv. Der neuere Dialog Exportieren als bietet keine Option für progressive Kodierung.

GIMP

Beim Exportieren als JPEG, erweitern Sie die erweiterten Optionen und aktivieren Sie “Progressive”. GIMP verwendet libjpeg unter der Haube, das vollständig progressive Codierung unterstützt.

jpegtran (verlustfreie Konvertierung)

Wenn Sie ein bestehendes Baseline JPEG haben und es zu progressiv konvertieren wollen ohne Neu-Codierung (überhaupt kein Qualitätsverlust):

# Baseline in progressiv umwandeln (verlustfrei)
jpegtran -progressive input.jpg > output.jpg

# Progressiv in Baseline umwandeln (verlustfrei)
jpegtran -copy all input.jpg > output.jpg

jpegtran ordnet die DCT-Koeffizienten neu an, ohne das Bild zu dekodieren und zu re-kodieren. Dies ist eine wirklich verlustfreie Operation — die Pixel ändern sich überhaupt nicht. Nur die Byte-Layout in der Datei ändert sich.

Batch-Konvertierung mit mogrify

Um einen ganzen Ordner von Baseline JPEGs zu progressiv an Ort und Stelle zu konvertieren:

# ImageMagick mogrify (überschreibt Originals)
mogrify -interlace Plane *.jpg

# Oder mit jpegtran (verlustfrei, zu separatem Ordner)
mkdir -p progressive
for f in *.jpg; do
  jpegtran -progressive "$f" > "progressive/$f"
done

Wie man überprüft, ob ein JPEG progressiv ist

Sie können bestimmen, ob eine bestehende JPEG-Datei progressive oder Baseline-Codierung verwendet mit mehreren Methoden:

ImageMagick identify

identify -verbose image.jpg | grep Interlace

Dies gibt entweder Interlace: JPEG (progressiv) oder Interlace: None (Baseline) aus.

file-Befehl (Linux/Mac)

file image.jpg

Für ein progressives JPEG enthält die Ausgabe “progressive” in der Beschreibung. Für Baseline sagt es “baseline” oder erwähnt nicht entweder.

Python (Pillow)

from PIL import Image
img = Image.open("image.jpg")
print("Progressive" if img.info.get("progressive") else "Baseline")

Browser DevTools

Unglücklicherweise zeigen Browser DevTools nicht direkt, ob ein JPEG progressiv oder Baseline ist. Das Network-Tab zeigt die Dateigröße und Download-Timing, aber nicht den Codierungs-Modus. Verwenden Sie eine der oben genannten Befehlszeilen-Methoden für einen definitiven Check.

Progressives JPEG vs Moderne Alternativen

2026 konkurriert progressives JPEG mit neueren Bildformaten, die eigene progressive Funktionen bieten:

WebP und AVIF erzeugen deutlich kleinere Dateien. WebP hat keinen progressiven Modus und wird von oben nach unten aufgebaut. AVIF hat einen optionalen progressiven Modus, den aber nur wenige Dateien nutzen. JPEG XL bietet einen fortschrittlichen progressiven Modus, der dem von JPEG überlegen ist, doch die Browser-Unterstützung bleibt 2026 eingeschränkt.

Für maximale Kompatibilität mit progressivem Laden bleibt JPEG die einzige universell unterstützte Option. Für maximale Kompression sollten Sie WebP oder AVIF mit responsiven Bildtechniken (<picture>-Element) in Betracht ziehen, die für ältere Browser auf JPEG zurückfallen.