Čo je to progresívny JPEG?

Progresívny JPEG je metóda kódovania JPEG obrázkov, pri ktorej sa údaje ukladajú tak, že obrázok sa zobrazuje postupne počas načítania. Najskôr sa načíta verzia s nízkym rozlíšením alebo menej detailmi, a potom, ako sa prijímajú nové údaje, sa detaily zlepšujú.

Rozdiely od základného (Baseline) JPEG:

Progresívny JPEG	Základný JPEG
Obrázok sa zobrazuje postupne, s vylepšeniami.	Obrázok sa načítava odhora nadol, v blokoch.
Vhodný pre pomalé pripojenia.	Vhodný pre rýchle pripojenia.
Súbor je trochu väčší.	Súbor je trochu menší.
Vyžaduje viac procesorového času na dekódovanie.	Vyžaduje menej procesorového času.

Použitie v Frontende:

• Zlepšenie používateľského zážitku na pomalom internete.
• Vizuálny dojem rýchlejšieho načítania obsahu.
• Môže byť kombinovaný s lazy loadingom na optimalizáciu.

Technicky, progresívny JPEG rozdeľuje koeficienty frekvencie obrázka na niekoľko skenov. Najskôr sa prenášajú nízkofrekvenčné koeficienty (všeobecná štruktúra), potom vyššie (detaily).

Príklad konverzie základného JPEG na progresívny pomocou ImageMagick:

# base.jpg - pôvodný súbor
# progresívny.jpg - výsledný súbor
convert base.jpg -interlace Plane progresívny.jpg

Použitie v CSS alebo HTML sa neodlišuje od bežného JPEG, pretože ide o interný formát kódovania:

<img src="progresívny.jpg" alt="Progresívny obrázok">

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