Šta je progresivni JPEG?

Progresivni JPEG je metoda kodiranja JPEG slika u kojoj se podaci skladište na takav način da se slika prikazuje postepeno tokom učitavanja. Prvo se učitava verzija niske rezolucije ili manje detalja, a zatim, kako se primaju novi podaci, detalji se poboljšavaju.

Razlike u odnosu na osnovni (Baseline) JPEG:

Progresivni JPEG	Osnovni JPEG
Slika se prikazuje postepeno, uz poboljšanja.	Slika se učitava od vrha ka dnu, u blokovima.
Pogodno za spora povezivanja.	Pogodno za brza povezivanja.
Fajl je malo veći.	Fajl je malo manji.
Zahteva više procesorskog vremena za dekodiranje.	Zahteva manje procesorskog vremena.

Primena u Frontendu:

• Poboljšanje korisničkog iskustva na sporom internetu.
• Vizuelni osećaj bržeg učitavanja sadržaja.
• Može se kombinovati sa lazy loading-om za optimizaciju.

Tehnički, progresivni JPEG deli koeficijente frekvencije slike u više skenova. Prvo se prenose koeficijenti niske frekvencije (opšta struktura), zatim oni visoke frekvencije (detalji).

Primer konverzije osnovnog JPEG-a u progresivni pomoću ImageMagick:

# base.jpg - originalni fajl
# progresivni.jpg - rezultat
convert base.jpg -interlace Plane progresivni.jpg

Upotreba u CSS ili HTML ne razlikuje se od običnog JPEG-a, jer je to interniji format kodiranja:

<img src="progresivni.jpg" alt="Progresivna slika">

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