Was ist ein progressives JPEG?

Progressives JPEG ist eine Methode zur Kodierung von JPEG-Bildern, bei der die Daten so gespeichert werden, dass das Bild beim Laden schrittweise angezeigt wird. Zuerst wird eine Version mit niedriger Auflösung oder weniger Details geladen, und dann, während neue Daten empfangen werden, verbessert sich die Detailgenauigkeit.

Unterschiede zum Baseline-JPEG:

Progressives JPEG	Baseline-JPEG
Das Bild wird schrittweise angezeigt und verbessert.	Das Bild wird von oben nach unten, in Blöcken, geladen.
Geeignet für langsame Verbindungen.	Geeignet für schnelle Verbindungen.
Die Datei ist etwas größer.	Die Datei ist etwas kleiner.
Erfordert mehr Prozessorzeit für das Decodieren.	Erfordert weniger Prozessorzeit für das Decodieren.

Anwendung im Frontend:

• Verbesserung der Nutzererfahrung bei langsamen Internetverbindungen.
• Visuelles Gefühl eines schnelleren Ladens des Inhalts.
• Kann mit Lazy Loading für Optimierungen kombiniert werden.

Technisch teilt das progressive JPEG die Frequenzkoeffizienten des Bildes in mehrere Scans. Zuerst werden die Niedrigfrequenzkoeffizienten (allgemeine Struktur) übertragen, dann die Hochfrequenzkoeffizienten (Details).

Beispiel für die Umwandlung eines Baseline-JPEG in ein progressives JPEG mit ImageMagick:

# basis.jpg - Originaldatei
# progressiv.jpg - Ergebnisdatei
convert basis.jpg -interlace Plane progressiv.jpg

Die Verwendung in CSS oder HTML unterscheidet sich nicht vom normalen JPEG, da es sich um ein internes Kodierungsformat handelt:

<img src="progressiv.jpg" alt="Progressives Bild">

.background {
  background-image: url('progressiv.jpg');
}