What is progressive JPEG?

Progressive JPEG is a method of encoding JPEG images where data is stored in such a way that the image is displayed gradually during loading. A low-resolution or less detailed version loads first, and as more data is received, the detail improves.

Differences from baseline (Standard) JPEG:

Progressive JPEG	Baseline JPEG
The image displays progressively, improving.	The image loads from top to bottom, block by block.
Suitable for slow connections.	Suitable for fast connections.
The file size is slightly larger.	The file size is slightly smaller.
Requires more CPU time for decoding.	Requires less CPU time for decoding.

Application in Frontend:

• Improving user experience on slow internet.
• Visual perception of faster content loading.
• Can be combined with lazy loading for optimization.

Technically, progressive JPEG divides the image frequency coefficients into several scans. Low-frequency coefficients (overall structure) are transmitted first, then higher-frequency details.

Example of converting a baseline JPEG to progressive using ImageMagick:

# baseline.jpg - source file
# progressive.jpg - resulting file
convert baseline.jpg -interlace Plane progressive.jpg

Using it in CSS or HTML is no different from a regular JPEG, as it is an internal encoding format:

<img src="progressive.jpg" alt="Progressive image">

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