Czym jest progresywny JPEG?

Progresywny JPEG to metoda kodowania obrazów JPEG, w której dane są przechowywane w taki sposób, że obraz jest wyświetlany stopniowo podczas ładowania. Najpierw ładowana jest wersja o niskiej rozdzielczości lub mniej szczegółowa, a następnie, w miarę otrzymywania nowych danych, szczegóły są ulepszane.

Różnice w stosunku do podstawowego (Baseline) JPEG:

Progresywny JPEG	Podstawowy JPEG
Obraz jest wyświetlany stopniowo, z poprawkami.	Obraz ładuje się od góry do dołu, blokami.
Odpowiedni dla wolnych połączeń.	Odpowiedni dla szybkich połączeń.
Plik jest nieco większy.	Plik jest nieco mniejszy.
Wymaga więcej czasu procesora do dekodowania.	Wymaga mniej czasu procesora do dekodowania.

Zastosowanie w Frontend:

• Poprawa doświadczenia użytkownika na wolnym internecie.
• Wrażenie szybszego ładowania treści wizualnie.
• Można łączyć z lazy loadingiem dla optymalizacji.

Technicznie, progresywny JPEG dzieli współczynniki częstotliwości obrazu na kilka skanów. Najpierw przesyłane są współczynniki niskiej częstotliwości (ogólna struktura), potem wyższej (detale).

Przykład konwersji podstawowego JPEG na progresywny za pomocą ImageMagick:

# base.jpg - plik źródłowy
# progressive.jpg - plik wynikowy
convert base.jpg -interlace Plane progressive.jpg

Użycie w CSS lub HTML nie różni się od zwykłego JPEG, ponieważ jest to wewnętrzny format kodowania:

<img src="progressive.jpg" alt="Obraz progresywny">

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