Regressive JPEGs: Creating Animations via Progressive JPEG Scans

Regressive JPEGs: Creating Animations via Progressive JPEG Scans

Exploiting Progressive JPEG Scans for Animation

By manipulating the way progressive JPEGs are structured, it is possible to create a single image file that switches between different images as it loads. This occurs because progressive JPEGs are designed to save low-frequency components first, allowing a browser to render a low-resolution preview that is refined as more data arrives. By concatenating multiple images and stripping specific markers, a developer can force the decoder to overwrite previously rendered data with new image content.

How Progressive JPEGs Work

Standard progressive JPEGs break compressed data into multiple "scans," each prefixed with a header. These scans allow the image to be displayed at low resolution instead of being cut off from top to bottom during a download.

The Structure of a Scan

A typical scan header includes:

  • Start of Scan (SOS) Marker: FF DA
  • Length Field: A big-endian value indicating the size of the scan.
  • Channel Information: The number of channels (typically YCbCr) and their associated Huffman table indices.
  • Spectral Range: The starting and ending Discrete Cosine Transform (DCT) bins. For example, a scan containing only the DC (0) bin provides the lowest frequency components.
  • Precision: The level of detail (e.g., half or full precision).

Color Space and Luminance

JPEG uses the YCbCr color space rather than RGB. Luminance (Y) is prioritized for quality because the human eye is more sensitive to brightness than color. Chrominance (Cb and Cr) can be saved at lower resolutions (half resolution/quarter pixel count), meaning full chrominance data often occupies less space than luminance data.

Implementing "Regressive" JPEGs

To create an image that changes content, the author concatenated multiple images of the same resolution and filtered out the Start-of-Image (SOI), Start-of-Frame (SOF), and End-of-Image (EOI) markers.

Overcoming Decoder Limits

Most browser decoders limit the number of scans to prevent "zip bomb" style resource exhaustion. A naive concatenation of full progressive JPEGs often fails after approximately nine frames.

To increase the frame count (up to 90 frames in Chrome), the author optimized the frames by using DC-only scans. In progressive mode, a scan cannot contain both AC (bins above 0) and DC (bin 0) data simultaneously. By creating frames that consist only of a single DC-only scan, the author achieved two goals:

  1. Increased Frame Count: Reducing the number of scans per frame allows more frames to fit within the decoder's limit.
  2. Eliminated Ghosting: Because AC scans are designed to refine existing data, using only DC scans prevents the new frame from blending with the previous one.

Generation Method

DC-only frames can be generated using jpegtran by specifying a scan configuration that only includes the DC bin for the Y, Cb, and Cr channels:

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

Practical Limitations and Browser Behavior

Because the JPEG format contains no timing information, the playback speed of these "animations" is entirely dependent on the network download speed.

Browser Compatibility

  • Chrome: Renders approximately 90 frames before stopping.
  • Firefox: Generally more patient with a high number of scans than Chrome.
  • Safari: Reported to freeze in place until the image is entirely finished downloading, negating the effect.

Potential Workarounds for Timing

Community discussion suggests several ways to simulate controlled playback:

  • Server-side Timing: A web server can send the image data in timed chunks to the client.
  • Service Workers: A Service Worker can be used to emulate a slow connection to control the delivery of scans.

Technical Insights from the Community

Experts in the community noted that while progressive JPEGs are beneficial for perceived load times, they can introduce decoding overhead. One user mentioned that enabling progressive mode can significantly slow down decoding speeds when using libraries like JPEG Turbo and OpenGL, suggesting that the visual benefit of progressive buildup is less valuable in modern high-speed networks.

요약: Maurycy는 JPEG 파일의 progressive scan 기능을 활용하여 다운로드되는 동안 이미지 내용이 바뀌도록 만들어, 단일 이미지 파일 안에 비디오를 삽입하는 방법을 보여줍니다.

제목: Regressive JPEGs: Creating Animations via Progressive JPEG Scans

Sources