Mi az a progresszív JPEG?

A progresszív JPEG egy olyan JPEG-kódolási módszer, amelyben az adatok olyan módon vannak tárolva, hogy a kép betöltése közben fokozatosan jelenik meg. Először egy alacsony felbontású vagy kevésbé részletes verzió töltődik be, majd ahogy új adatok érkeznek, a részletek javulnak.

A baseline JPEG-től (alapértelmezett) való különbségek:

Progresszív JPEG	Baseline JPEG
A kép fokozatosan jelenik meg, javul.	A kép felülről lefelé, blokkokban töltődik be.
Lassú kapcsolatokhoz alkalmas.	Gyors kapcsolatokhoz alkalmas.
A fájl kissé nagyobb méretű.	A fájl kissé kisebb méretű.
Több processzoridőt igényel a dekódolás.	Kevesebb processzoridőt igényel a dekódolás.

Alkalmazás a Frontendben:

• Felhasználói élmény javítása lassú interneten.
• Gyorsabb betöltés vizuális érzése.
• Kombinálható lazy loadinggal az optimalizáció érdekében.

Technikailag a progresszív JPEG a kép frekvencia-koefficienseit több szkennerre osztja. Először az alacsony frekvenciájú koefficiensek (általános szerkezet), majd a magasabb frekvenciájú (részletek) kerülnek átadásra.

Példa a baseline JPEG progresszív változatára az ImageMagick segítségével:

# base.jpg - eredeti fájl
# progresszív.jpg - eredményfájl
convert base.jpg -interlace Plane progresszív.jpg

A CSS vagy HTML használata nem különbözik a normál JPEG-től, mivel ez egy belső kódolási formátum:

<img src="progresszív.jpg" alt="Progresszív kép">

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