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

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 Bilddaten in mehreren Scans (typischerweise 3–5). Der erste Scan enthält die niederfrequentesten DCT-Koeffizienten — die groben Farb- und Helligkeitsinformationen. Jeder nachfolgende 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 des progressiven JPEG ist, dass es typischerweise leicht kleinere Dateien als Baseline bei der gleichen Qualitätseinstellung produziert.

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

Forschung zur wahrgenommenen Ladegeschwindigkeit zeigt konsistent, dass Benutzer progressiv ladende Bilder als schneller ladend bewerten als von oben nach unten Baseline-Bilder, auch wenn die tatsächliche Download-Zeit identisch ist. Der Grund ist einfach: Das gesamte Bild in einem verschwommenen Zustand zu sehen fühlt sich nach “fast geladen” an, während nur das obere Drittel eines Bildes zu sehen sich nach “immer noch wartend” anfühlt.

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): LCP misst, wann das größte Content-Element sichtbar wird. Für Baseline JPEG meldet der Browser LCP, wenn das Bild zu rendern anfängt (oberste Reihen). Für progressiv kommt der erste Scan schnell und rendert den gesamten Bildbereich (verschwommen). Beide melden ähnliche LCP-Zeiten, aber die progressive Version zeigt eine nützlichere Vorschau in diesem Moment.
• Cumulative Layout Shift (CLS): Sowohl progressiv als auch Baseline verhalten sich identisch für CLS — die Bilddimensionen werden aus dem JPEG-Header bekannt, bevor beliebige Pixeldaten ankommen. Kein Modus verursacht Layout-Verschiebung, wenn richtige Breite/Höhen-Attribute oder CSS aspect-ratio gesetzt sind.
• Interaction to Next Paint (INP): Keine direkte Auswirkung von beiden Modi.

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 keine Nachteile im Vergleich zu Baseline für Bilder über 10 KB:

• Gleiche oder leicht kleinere Dateigröße.
• Gleiche endgültige Bildqualität.
• Universale Browser-Unterstützung.
• Bessere wahrgenommene Ladung bei langsamen Verbindungen.
• Keine extra Codierungs-Zeit (vernachlässigbarer Unterschied).
• Keine extra Decoding-Zeit in Browsern.

Es gibt einfach keinen Grund, Baseline statt progressiv für Web-Bilder zu wählen. Progressiv ist die streng bessere Standard.

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 Konverter verwendet progressive Codierung standardmäßig. Wenn Sie ein PNG hochladen und zu JPG konvertieren, ist die Ausgabe immer ein progressives JPEG. Keine Konfiguration nötig.

Adobe Photoshop

Im “Save for Web”-Dialog von Photoshop (oder “Export As”), aktivieren Sie die “Progressive” Checkbox. Im regulären “Save As” JPEG-Dialog, aktivieren Sie “Progressive” im JPEG Options-Panel.

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 zu progressiv konvertieren (verlustfrei)
jpegtran -progressive input.jpg > output.jpg

# Progressiv zu Baseline konvertieren (verlustfrei)
jpegtran -baseline 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

In 2026 konkurriert progressives JPEG mit neueren Bildformaten, die ihre eigenen progressiven Funktionen haben:

WebP und AVIF erzeugen signifikant kleinere Dateien, aber unterstützen nicht native progressive Dekodierung. Sie laden von oben nach unten wie Baseline JPEG. JPEG XL hat einen erweiterten progressiven Modus, der JPEGs überlegen ist, aber die Browser-Unterstützung bleibt in 2026 begrenzt.

Für maximale Kompatibilität mit progressiver Ladung bleibt JPEG die einzige universell unterstützte Option. Für maximale Komprimierung, erwägen Sie WebP oder AVIF mit responsiven Bild-Techniken (<picture> Element), die auf JPEG für ältere Browser zurückgreifen.