Aug 09, 2026 12:00:00

What is 'Regressive JPEG,' which makes images appear to move like animations?

'Regressive JPEG' is a technique that uses JPEG's progressive display function and scan range control to embed multiple images within a single image file, making them appear as animations or videos. You can find more information about progressive JPEG on the following blog site.

Regressive JPEGs: (Maurycy's blog)

https://maurycyz.com/projects/bad_jpeg/

◆ How progressive JPEG works
JPEG divides image data into 8x8 pixel blocks and performs a process called ' Discrete Cosine Transform (DCT) .' Typically, it obtains the actual data of the top-left pixel, which forms the basis of the block, called ' DC data ,' and the difference data of the remaining 63 pixels, called ' AC data .' By separately applying Huffman compression, it efficiently manages the data.

Progressive JPEG divides an image into 'scans' that display the image in stages, from low-frequency components (general color and shape) to high-frequency components (fine details). The header of each scan records the color channels (YCbCr), frequency bands (DCT bins), and Huffman table index. The first scan of a typical image is as follows:
[code]
FF DA - 'start of scan' marker
00 0C- A field (12 bytes) indicating length in big-endian format. *Includes the length of the field itself.
03- Number of channels to scan (3)
01- The global ID of the first channel included
00 - Huffman Table Index #1 (DC: 0, AC: 0)
02 - Global ID of the channel included in the second item
10- Huffman Table Index #2 (DC: 1, AC: 0)
03- The global ID of the third channel included
10- Huffman Table Index #2 (DC: 0, AC: 0)
00 - Start of DCT bin (DC)
00 - End of DCT bin (DC)
01 - Accuracy: Half, No existing data available

f8ad 512d d3f1 cd96 *Huffman coding DCT coefficient
bcb0 58df 53d5 5d97
:
:
[code]

• Color Channels
The three color channels use the YCbCr format instead of the standard RGB. Brightness (Y) is used for high-resolution images, while color difference (Cb/Cr) is often saved at a lower resolution because a slight decrease in quality has less impact.

• Scanning sequence and role
The configuration of each scan is as follows:

Scan number	channel	DCT bin range	accuracy
0	Y Cb Cr	0 - 0	Half (-1 bit)
1	Y	1 - 5	Quarter (-2 bits)
2	Cb	1 - 63	Half
3	Cr	1 - 63	Half
4	Y	6 - 63	Quarter
5	Y	1 - 63	Half
6	Y Cb Cr	0 - 0	Full
7	Cr	1 - 63	Full
8	Cb	1 - 63	Full
9	Y	1 - 63	Full

Scan #0: Low-resolution preview image
- Scan #1: Added detail to brightness (Y)
Scans #2 to #5: Low-resolution full data, especially Scan #4 which fills the spectral range before Scan #5 is constructed.
Scans #6-#9: Add the final missing bits to achieve full quality.

Note that the color information is stored at 'Half' resolution, meaning it's stored at one-quarter of the pixel count. Therefore, complete color information (Cb/Cr) has only half the weight of luminance (Y).

◆ Embedding multiple images
To create a progressive JPEG, multiple JPEG images of the same resolution are concatenated, the Start of Image (SOI), Start of Frame (SOF), and End of Image (EOI) markers are removed, and the result is a single file. When a progressive JPEG file is opened locally, it appears as a regular JPEG image. However, when downloaded over a slower network, the multiple images are displayed sequentially as the file is partially downloaded, creating an animation-like effect.

*Clicking the image will allow you to see the animation-like effect.

However, progressive JPEG has the following limitations:

- There is a limit to the number of frames.
Conventional decoders stop processing after a certain number of scans (usually around 9 frames) to prevent infinite loops and ZIP bombs, making them insufficient for implementing full-fledged animations.

- Animation requires ingenuity.
To achieve animation, the number of scans per frame must be minimized.

Of the above, the simplest way to minimize the number of scans is to use a baseline mode JPEG with only a single scan, but the baseline decoder will stop after processing only the first scan. Progressive mode, on the other hand, does not stop, but it has another constraint: a single scan cannot contain both AC data (bins greater than 0) and DC data (bin 0). Also, the DC data must come before the AC data, so the minimum progressive JPEG will contain one scan with only DC data.

Frames with DC-only scans are JPEG-compliant images and can be created without any special processing.
[code]
cat > frame.scans<<EOF
# DC only scan:
0,1,2:0-0,0,0;
# and nothing else
EOF
jpegtran -scans frame.scans -outfile out.jpg in.jpg
[code]

Furthermore, JPEGs composed solely of DC scans have the advantage of not exhibiting the 'ghosting' phenomenon caused by AC scans overwriting older data. A regressive JPEG created using only DC data can render approximately 100 frames before Chrome stops processing. Other browsers like Firefox can display even more frames, but scan images with around 90 frames seem to work almost everywhere.

*Clicking the image will allow you to see the animation-like effect.

◆Practicality
When considering whether regressive JPEG has any practical use, it's only really useful for a little prank; there are no practical applications. This is because there's no way to add timing information, so the playback speed is entirely dependent on network latency. However, the blog post explaining regressive JPEG concludes that there might be some fun ways to use partial rendering, such as in pure HTML videos or interactive single-page applications that don't use CSS/JavaScript.