Co je to progresivní JPEG?

Progresivní JPEG je metoda kódování obrázků JPEG, při které jsou data uložena tak, že se obrázek zobrazí postupně při načítání. Nejprve se načte nízké rozlišení nebo méně detailní verze, a pak, jak jsou přijímána nová data, se detaily zlepšují.

Rozdíly od základního (Baseline) JPEG:

Progresivní JPEG	Základní JPEG
Obrázek se zobrazí postupně, s vylepšením.	Obrázek se načítá shora dolů, blokově.
Vhodné pro pomalé připojení.	Vhodné pro rychlé připojení.
Soubor je o něco větší.	Soubor je o něco menší.
Vyžaduje více procesorového času na dekódování.	Vyžaduje méně procesorového času.

Použití v Frontendu:

• Zlepšení uživatelského zážitku na pomalém internetu.
• Vizuální dojem rychlejšího načítání obsahu.
• Lze kombinovat s lazy loadingem pro optimalizaci.

Technicky, progresivní JPEG rozděluje koeficienty frekvence obrázku do několika skenů. Nejprve jsou přenášeny nízkofrekvenční koeficienty (obecná struktura), poté vyšší (detaily).

Příklad konverze základního JPEG na progresivní pomocí ImageMagick:

# base.jpg - původní soubor
# progresivní.jpg - výsledný soubor
convert base.jpg -interlace Plane progresivní.jpg

Použití v CSS nebo HTML se neliší od běžného JPEG, protože se jedná o interní formát kódování:

<img src="progresivní.jpg" alt="Progresivní obrázek">

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