Progressieve JPEG vs Baseline:
Welke is beter voor het web?

Wat is een progressieve JPEG?

Een progressieve JPEG slaat de afbeelding in meerdere passes op. De eerste pass toont het hele beeld met weinig detail; elke volgende pass maakt het scherper. Een baseline-JPEG (standaard) slaat de afbeelding in één pass op, van boven naar beneden.

Beide bereiken dezelfde uiteindelijke kwaliteit. Progressieve bestanden zijn bij afbeeldingen boven ongeveer 10 KB meestal iets kleiner.

Het visuele laadverschil

Het meest voor de hand liggende verschil tussen progressieve en baseline JPEG is hoe de afbeelding verschijnt terwijl deze nog steeds door de browser wordt gedownload. Dit is belangrijk omdat afbeeldingen vaak de grootste assets op een webpagina zijn, en op langzamere verbindingen kunnen ze seconden duren om volledig te laden.

Baseline JPEG: van boven naar beneden

Een baseline JPEG slaat afbeeldingsgegevens op in één scan, pixel rij voor pixel rij, van boven naar beneden. Als de browser bytes ontvangt, rendert deze wat het heeft:

• Bij 10% geladen: De bovenste 10% van de afbeelding is zichtbaar in volledig detail. De rest is leeg of een placeholder.
• Bij 50% geladen: De bovenste helft is volledig weergegeven. De onderste helft ontbreekt nog.
• Bij 90% geladen: Bijna klaar, maar de onderrand is nog leeg.
• Bij 100% geladen: De volledige afbeelding is zichtbaar.

De gebruiker ziet een “gordijenonthullings”-effect — een scherpe lijn tussen het weergegeven gedeelte en het ongeladen gedeelte.

Progressieve JPEG: wazig-naar-scherp

Een progressieve JPEG slaat afbeeldingsgegevens op in meerdere scans (het standaardscript van libjpeg gebruikt er 10). De eerste scan bevat de DCT-coëfficiënten met de laagste frequentie — de globale kleur- en helderheidsinformatie. Elke volgende scan voegt details met een hogere frequentie toe.

• Bij 10% geladen: De gehele afbeelding is zichtbaar als een zeer wazig, lage-resolutievoorvertoning. Je kunt het onderwerp, kleuren en compositie identificeren.
• Bij 50% geladen: De afbeelding is herkenbaar met gemiddelde details. Fijne texturen zijn nog steeds zacht, maar de algemene indruk is duidelijk.
• Bij 90% geladen: Bijna volledig detail. Alleen de fijnste texturen en randen zijn nog licht zacht.
• Bij 100% geladen: Identiek aan de baselineversie — volledige kwaliteit, elk detail aanwezig.

De gebruiker ziet de volledige compositie onmiddellijk, en kijkt dan toe hoe deze scherper wordt. Dit is psychologisch meer bevredigend dan toekijken hoe een half weergegeven afbeelding langzaam naar beneden groeit.

Hoe progressieve scans technisch werken

Om te begrijpen waarom progressieve JPEG zowel perceptueel beter als enigszins kleiner kan zijn, moet je weten wat die meerdere scans werkelijk bevatten.

Elk JPEG-afbeelding wordt opgebroken in 8×8 pixelblokken, en elk blok wordt getransformeerd in 64 DCT (Discrete Cosine Transform) coëfficiënten. Deze coëfficiënten variëren van de DC-coëfficiënt (de gemiddelde helderheid van het blok — de laagste frequentie) tot de AC63-coëfficiënt (de fijnste diagonale details — de hoogste frequentie).

In een baseline JPEG worden alle 64 coëfficiënten voor elk blok in één pass geschreven. De encoder verwerkt blok na blok, rij na rij, van boven naar beneden.

In een progressieve JPEG doet de encoder meerdere passes over de gehele afbeelding:

1. Scan 1 (alleen DC): Schrijft alleen de DC-coëfficiënt van elk blok. Dit is voldoende om een 8x-downgesampled versie van de afbeelding te reconstrueren — de wazig-preview.
2. Scan 2: Voegt enkele laagfrequente AC-coëfficiënten toe (AC1–AC5). De afbeelding wordt merkbaar scherper, randen verschijnen.
3. Scan 3–4: Voegt middenfrequente coëfficiënten toe. De meeste details zijn nu zichtbaar.
4. Uiteindelijke scan: Voegt de hoogfrequente coëfficiënten toe. De afbeelding bereikt volledige kwaliteit.

Het eindresultaat is wiskundig identiek aan de baselineversie. Dezelfde DCT-coëfficiënten, dezelfde kwantisatie, dezelfde pixels. Alleen de byteorde in het bestand verschilt.

Bestandsgrootteimpact

Een van de minder bekende voordelen van progressieve JPEG is dat het doorgaans iets kleinere bestanden oplevert dan baseline bij dezelfde kwaliteitsinstelling.

Waarom is progressief kleiner? In progressieve modus worden vergelijkbare DCT-coëfficiënten van de gehele afbeelding gegroepeerd in dezelfde scan. Dit creëert langere reeksen van vergelijkbare waarden, die Huffman-codering efficiënter comprimeert. In baselinemodus worden alle 64 coëfficiënten voor één blok samen geschreven voordat naar het volgende blok wordt gegaan — mengeling van laagfrequente en hoogfrequente gegevens met zeer verschillende statistische verdelingen.

De enige uitzondering is zeer kleine afbeeldingen onder 10 KB — kleine miniatuurtjes, pictogrammen en avatars. Voor deze geldt dat de overhead van meerdere scankopjes (elke scan voegt enkele bytes metagegevens toe) het compressievoordeel opweegt. Maar deze afbeeldingen zijn zo klein dat het verschil op zijn best een paar honderd bytes is.

Waargenomen prestaties en Core Web Vitals

Vanuit zuiver technisch oogpunt bereiken zowel progressieve als baseline JPEG volledige kwaliteit op exact hetzelfde moment — wanneer de laatste byte aankomt. De totale downloadtijd is identiek (of iets sneller voor progressief, gezien de kleinere bestandsgrootte).

Maar webprestaties gaan niet alleen om absolute snelheid. Waargenomen prestaties — hoe snel de pagina aanvoelt voor de gebruiker — is net zo belangrijk. En dit is waar progressieve JPEG een duidelijk voordeel heeft.

Gebruikers ervaren progressief als sneller

Veel ontwikkelaars kiezen voor grote afbeeldingen liever progressieve JPEG, omdat bezoekers dan al vroeg het hele beeld zien. Onderzoek naar de vraag of mensen het ook echt als sneller ervaren is niet eenduidig, dus zie het als een kleine bonus en niet als gegarandeerde winst.

Impact op Core Web Vitals

Google's Core Web Vitals meten gebruikerservaring aan de hand van drie metrieken. Progressieve JPEG kan twee van hen positief beïnvloeden:

• Largest Contentful Paint (LCP): Voor afbeeldingen wordt LCP geregistreerd wanneer de afbeelding volledig is geladen, dus progressieve codering verlaagt de LCP op zichzelf niet. Een iets kleiner bestand helpt wel, en de wazige voorvertoning geeft bezoekers eerder iets om naar te kijken.
• Cumulative Layout Shift (CLS): Progressief en baseline gedragen zich identiek voor CLS — de afbeeldingsafmetingen zijn bekend uit de JPEG-header voordat er pixelgegevens binnenkomen. Geen van beide modi veroorzaakt layoutverschuiving wanneer de juiste width/height-attributen of CSS aspect-ratio zijn ingesteld.
• Interaction to Next Paint (INP): Geen directe invloed van een van beide modi.

Afbeeldingen boven de vouw

Voor grote heldenafbeeldingen aan de top van een pagina is progressieve codering bijzonder voordelig. Op een 3G mobiele verbinding duurt een 200 KB heldenafbeelding ongeveer 2 seconden om volledig te laden. Met progressieve codering ziet de gebruiker een herkenbare (zij het wazig) versie van de held na slechts 200–400 ms — genoeg om de visuele identiteit van de pagina te begrijpen terwijl de rest van de inhoud verder laadt.

Browserondersteuning in 2026

Progressieve JPEG geniet van universele browserondersteuning. Er is geen compatibiliteitsprobleem in enige moderne of zelfs matig oude browser:

Progressieve JPEG maakt deel uit van de originele JPEG-specificatie (ITU-T T.81, gepubliceerd in 1992). Het is al tientallen jaren ondersteund door elke grote afbeeldingsviewer en browser. Er is nul risico op compatibiliteitsproblemen.

Is progressief nog relevant in 2026?

Met HTTP/2, 5G-netwerken en breedbandsnelheden gemeten in honderden megabits, kan je je afvragen of het incrementele laadvoordeel van progressieve JPEG nog van belang is. Het antwoord is genuanceerd.

Op snelle verbindingen: Minimaal zichtbaar verschil

Op een glasvezelverbinding of een sterk 5G-signaal laadt een 200 KB afbeelding in minder dan 50 ms. Bij die snelheid toont geen progressief of baseline enig zichtbaar laadgedrag — de afbeelding verschijnt eenvoudig volledig weergegeven. De gebruiker ziet nooit de overgang van wazig naar scherp omdat alle scans aankomen voordat het eerste frame wordt getekend.

Op trage verbindingen: Nog steeds zeer relevant

Niet iedereen heeft snel internet. In 2026 verlaten aanzienlijke delen van de wereld zich nog steeds op 3G of overbelaste WiFi-netwerken. In deze omstandigheden:

• Een 300 KB afbeelding op een 1 Mbps verbinding duurt ongeveer 2,4 seconden.
• Met progressieve codering ziet de gebruiker een herkenbare voorvertoning in ~400 ms.
• Met baseline-codering ziet de gebruiker slechts de bovenste 15% van de afbeelding bij 400 ms.

Voor gebruikers op trage verbindingen — platteland, opkomende markten, overbelaste openbare WiFi, ondergrondse doorgang — biedt progressieve JPEG een aanzienlijk beter ervaring.

De bodem: Geen nadeel

Progressieve JPEG heeft vrijwel geen nadelen ten opzichte van baseline voor afbeeldingen boven 10 KB:

• Dezelfde of iets kleinere bestandsgrootte.
• Dezelfde uiteindelijke beeldkwaliteit.
• Universele browserondersteuning.
• Beter waargenomen laden op trage verbindingen.
• Geen extra coderingstijd (verwaarloosbaar verschil).
• Iets meer CPU en geheugen nodig om te decoderen, op moderne apparaten zelden merkbaar.

Voor de meeste webafbeeldingen is progressief de betere standaard.

Hoe progressieve JPEG te maken

De meeste afbeeldingsverwerkingstools ondersteunen progressieve codering. Hier zijn de meest voorkomende methoden:

ImageMagick

ImageMagick gebruikt de vlag -interlace om progressieve codering te beheren:

# Progressieve JPEG
convert input.png -interlace Plane -quality 85 output.jpg

# Baseline JPEG (expliciet)
convert input.png -interlace None -quality 85 output.jpg

De optie -interlace Plane vertelt ImageMagick de DCT-coëfficiënten in frequentieband-volgorde (progressief) in plaats van blok-voor-blok-volgorde (baseline) te schrijven. De kwaliteitsinstelling is onafhankelijk — je kunt elk kwaliteitsniveau met beide interlace-modi combineren.

CleverUtils.com

Onze PNG-naar-JPG-converter schrijft baseline-JPEG's op kwaliteit 92 (we hebben de uitvoer gecontroleerd). Wil je een bestand achteraf progressief maken zonder kwaliteitsverlies, voer er dan jpegtran -progressive op uit, zoals hieronder getoond.

Adobe Photoshop

Vink in File → Export → Save for Web (Legacy) de optie Progressive aan. Kies in het gewone dialoogvenster Opslaan als JPEG Progressive onder Format Options. Het nieuwere dialoogvenster Export As heeft geen progressieve optie.

GIMP

Vouw bij het exporteren als JPEG de geavanceerde opties uit en vink “Progressief” aan. GIMP gebruikt libjpeg onder de motorkap, die progressieve codering volledig ondersteunt.

jpegtran (Lossless conversie)

Als je een bestaande baseline JPEG hebt en deze naar progressief wilt converteren zonder opnieuw te coderen (geen kwaliteitsverlies):

# Converteer baseline naar progressief (lossless)
jpegtran -progressive input.jpg > output.jpg

# Converteer progressief naar baseline (lossless)
jpegtran -copy all input.jpg > output.jpg

jpegtran herschikt de DCT-coëfficiënten zonder de afbeelding te decoderen en opnieuw te coderen. Dit is een werkelijk lossless bewerking — de pixels veranderen helemaal niet. Alleen de byteindeling in het bestand verandert.

Batchconversie met mogrify

Om een volledige map van baseline JPEG's naar progressief ter plaatse te converteren:

# ImageMagick mogrify (overschrijft originals)
mogrify -interlace Plane *.jpg

# Of met jpegtran (lossless, naar aparte map)
mkdir -p progressive
for f in *.jpg; do
  jpegtran -progressive "$f" > "progressive/$f"
done

Hoe te controleren of een JPEG progressief is

Je kunt bepalen of een bestaande JPEG-bestand progressieve of baseline-codering gebruikt met verschillende methoden:

ImageMagick identify

identify -verbose image.jpg | grep Interlace

Dit geeft Interlace: JPEG (progressief) of Interlace: None (baseline) uit.

file-commando (Linux/Mac)

file image.jpg

Voor een progressieve JPEG bevat de uitvoer “progressive” in de beschrijving. Voor baseline zegt het “baseline” of noemt geen van beide.

Python (Pillow)

from PIL import Image
img = Image.open("image.jpg")
print("Progressive" if img.info.get("progressive") else "Baseline")

Browser DevTools

Helaas tonen browser DevTools niet direct of een JPEG progressief of baseline is. Het tabblad Netwerk toont de bestandsgrootte en downloadtiming, maar niet de coderingsmodus. Gebruik een van de bovenstaande opdrachtlijnmethoden voor een definitieve controle.

Progressieve JPEG vs moderne alternatieven

In 2026 concurreert progressieve JPEG met nieuwere afbeeldingsformaten die hun eigen progressief-achtige functies hebben:

WebP en AVIF leveren aanzienlijk kleinere bestanden op. WebP heeft geen progressieve modus en rendert van boven naar beneden. AVIF heeft een optionele progressieve modus, maar weinig bestanden gebruiken die. JPEG XL heeft een geavanceerde progressieve modus die beter is dan die van JPEG, maar de browserondersteuning blijft in 2026 beperkt.

Voor maximale compatibiliteit met progressief laden blijft JPEG de enige universeel ondersteunde optie. Voor maximale compressie kun je WebP of AVIF overwegen, met responsieve afbeeldingstechnieken (het <picture>-element) die voor oudere browsers terugvallen op JPEG.