Qu'est-ce qu'un JPEG progressif?

JPEG progressif est une méthode de codage des images JPEG où les données sont stockées de manière à ce que l’image s’affiche progressivement lors du chargement. Une version basse résolution ou moins détaillée est chargée en premier, puis, à mesure que de nouvelles données sont reçues, la qualité s’améliore.

Différences avec le JPEG de base (Baseline) :

JPEG progressif	JPEG de base
L’image s’affiche progressivement, en s’améliorant.	L’image se charge de haut en bas, par blocs.
Convient pour une connexion lente.	Convient pour une connexion rapide.
Le fichier est légèrement plus volumineux.	Le fichier est légèrement plus petit.
Nécessite plus de temps processeur pour le décodage.	Nécessite moins de temps processeur pour le décodage.

Application en Frontend :

• Amélioration de l’expérience utilisateur sur internet lent.
• Impression visuelle d’un chargement plus rapide du contenu.
• Peut être combiné avec le lazy loading pour l’optimisation.

Techniquement, JPEG progressif divise les coefficients de fréquence de l’image en plusieurs passes. D’abord, les coefficients de basse fréquence (structure générale), puis ceux de haute fréquence (détails).

Exemple de conversion d’un JPEG de base en progressif avec ImageMagick :

# base.jpg - fichier source
# progressif.jpg - fichier résultant
convert base.jpg -interlace Plane progressif.jpg

L’utilisation en CSS ou HTML ne diffère pas du JPEG normal, car c’est un format de codage interne :

<img src="progressif.jpg" alt="Image progressive">

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