Wat is een progressieve JPEG?

Progressieve JPEG is een methode voor het coderen van JPEG-afbeeldingen waarbij de gegevens zodanig worden opgeslagen dat de afbeelding geleidelijk wordt weergegeven tijdens het laden. Eerst wordt een versie met lage resolutie of minder details geladen, en vervolgens, naarmate er nieuwe gegevens worden ontvangen, verbetert de kwaliteit.

Verschillen met de basale (Baseline) JPEG:

Progressieve JPEG	Basale JPEG
De afbeelding wordt geleidelijk weergegeven en verbetert.	De afbeelding wordt van boven naar beneden, in blokken, geladen.
Geschikt voor trage verbindingen.	Geschikt voor snelle verbindingen.
Het bestand is iets groter.	Het bestand is iets kleiner.
Vereist meer processor tijd voor decodering.	Vereist minder processor tijd voor decodering.

Toepassing in Frontend:

• Verbetering van de gebruikerservaring op trage internetverbindingen.
• Visueel gevoel van snellere inhouds laden.
• Kan worden gecombineerd met lazy loading voor optimalisatie.

Technisch deelt de progressieve JPEG de frequentiecoëfficiënten van de afbeelding in meerdere scans. Eerst worden de laagfrequente coëfficiënten (algemene structuur) overgedragen, daarna de hoogfrequente (details).

Voorbeeld van conversie van basale JPEG naar progressieve JPEG met ImageMagick:

# base.jpg - origineel bestand
# progressief.jpg - resultaatbestand
convert base.jpg -interlace Plane progressief.jpg

Gebruik in CSS of HTML verschilt niet van een gewone JPEG, omdat het een intern coderingsformaat is:

<img src="progressief.jpg" alt="Progressieve afbeelding">

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