{"id":21432,"date":"2020-05-24T10:35:00","date_gmt":"2020-05-24T17:35:00","guid":{"rendered":"http:\/\/progressive_jpegs_and_green_martians"},"modified":"2025-08-21T12:17:45","modified_gmt":"2025-08-21T19:17:45","slug":"progressive_jpegs_and_green_martians","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/progressive_jpegs_and_green_martians","title":{"rendered":"Progressive JPEGs and green Martians"},"content":{"rendered":"

JPEG images are either progressive or nonprogressive<\/a>, depending on their encoding order, not politics.<\/p>\n

Encoding of and decoding of nonprogressive occurs in this simple order: from top to bottom and from left to right. Consequently, when a nonprogressive JPEG is loading on a slow connection, you see the image\u2019s top part first, followed by the other parts as loading progresses.<\/p>\n

On the other hand, because progressive JPEGs are encoded<\/a> differently, when they load, you see a blurry version, which gradually becomes sharper as the bytes arrive.<\/p>\n

\nThe encoding process of a progressive JPEG is what makes it unique. When saving an image as a progressive JPEG, this can be done easily through image editing software by selecting the option “Save as progressive JPEG” in the save dialog. This choice influences how the image is processed and displayed during loading.\n<\/p>\n

Here is the same JPEG, the left version nonprogressive and the right one progressive, decoded in slow motion<\/a>:<\/p>\n

\n \n\n\n\n <\/video><\/p>\n

In essence, progressive and nonprogressive encodings for JPEGs are two ways in which to optimize images and make them display faster on sluggish connections.<\/p>\n

What\u2019s the Magic Behind Progressive JPEGs?<\/h2>\n

JPEG performs two transformations for lossy compression:<\/p>\n

    \n
  1. Convert RGB pixels to YCbCr<\/a> pixels. Instead of Red, Green, and Blue channels, JPEG works with a luma (Y) channel and two chroma channels (Cb and Cr). Because the human eye is more sensitive to distortion in luma (brightness) than to that in chroma (color), JPEG handles channels separately and, optionally, downsample the chroma channels to half the original resolution\u2014a process called chroma subsampling<\/a>.<\/li>\n
  2. Do mathematical magic, called Discrete Cosine Transform<\/a> (DCT), with the pixels. That is, convert every block of 8×8 pixels (64-pixel values) to 64 coefficients, which convey the block\u2019s information in a different way. The first coefficient, called the DC coefficient, is the average pixel value of all the pixels in the block. The other 63 coefficients, called AC coefficients, depict the horizontal and vertical details within the block in the order of low frequency (overall gradients) to high frequency (sharp details).<\/li>\n<\/ol>\n

    \nTo further understand how a progressive JPEG image loads, it’s crucial to note the concept of “Scans” in JPEG encoding. During the encoding process, the number of scans determines how many times the image is refined during loading. Each scan adds more detail to the image, starting from a basic, blurry version and progressively enhancing the quality until the full picture is clear.\n<\/p>\n

    For human perception, luma and low-frequency signals are more important than chroma and high-frequency signals. Cleverly, JPEG encodes with less precision what we can\u2019t see well anyway, resulting in smaller files. The article Unraveling the JPEG<\/em><\/a> is a brilliant interactive demonstration of how those transformations work. And, as a bonus, they also enable progressive encoding and decoding of JPEGs.<\/p>\n

    Instead of going through an image block by block, you can encode each block\u2019s coefficients through spectral selection<\/strong>, as nonprogressive JPEGs do, i.e., encode all the DC coefficients first, then some low-frequency AC coefficients and the high-frequency AC coefficients. Alternatively, you can apply successive approximation<\/strong>, i.e., store the most significant bits of the coefficients first and the least significant ones later in the bitstream.<\/p>\n

    Both spectral selection and successive approximation require that the encoder and decoder traverse the image multiple times. Each iteration is called a scan<\/strong>. Typically, encoding a progressive JPEG takes about 10 scans, which is why, during decoding, an image transitions from being blurry to being sharp after about 10 refinement steps.<\/p>\n

    What Are the Advantages and Disadvantages of Progressive JPEGs?<\/h2>\n

    One obvious advantage of progressive JPEGs is that they display a full preview while downloading an image on a slow connection. You can see the picture even when only a fraction of the file has been transferred and decide whether to wait for the download to complete. However, some people consider that loading behavior a disadvantage because it\u2019s hard to tell when<\/strong> an image has finished loading. You might form a bad impression of the website because \u201cthe photos look blurry\u201d when, in fact, the site is still loading and displaying a progressive preview of the images. More on that point later.<\/p>\n

    \nThe ability to convert a progressive JPEG to a baseline JPEG adds flexibility in image handling. By opening a progressive JPEG in any image editing program and saving it as a standard JPEG, one can easily switch between these two formats based on the needs of the application or website. This flexibility is particularly useful for designers and web developers.\n<\/p>\n

    A less obvious advantage of progressive JPEGs is that they tend to be smaller in size than nonprogressive JPEGs even though the final image looks exactly the same. Because similar DCT coefficients across multiple blocks in progressive JPEGs are encoded together, smaller files result; whereas nonprogressive JPEGs, whose blocks are encoded one by one, weigh more. Oftentimes, the extra compression is only a few percentage points, yet it still saves bandwidth and storage without affecting the image quality.<\/p>\n

    As for the downsides of progressive JPEGs, first of all, they\u2019re not always<\/strong> smaller. For small images like thumbnails, progressive JPEGs are often a bit larger than nonprogressive JPEGs. For such small image files, progressive rendering delivers no gains.<\/p>\n

    Additionally, it takes more CPU time to encode and decode progressive JPEGs because the algorithm must go over the image data multiple times, not in one single scan. Plus, the process incurs more memory since all the DCT coefficients must be stored in memory during decoding. In nonprogressive decoding, you need to store only one block of coefficients at a time.<\/p>\n

    Decoding progressive JPEGs takes about 2.5 times longer than decoding nonprogressive ones. So, despite the fast delivery of a preview, the overall CPU time is significantly longer\u2014whether on a desktop or laptop computer. Actually, progressive or not, JPEG decoding is pretty fast, and memory and processing power are usually abundant. On low-power devices like smartphones, however, decoding does have a slight impact on battery life and load time.<\/p>\n

    Encoding progressive JPEGs also takes longer by about six to eight times, and it\u2019s harder to do that in hardware. That\u2019s why cameras, even high-end ones, produce nonprogressive JPEGs as a rule.<\/p>\n

    How to Get the Best of Both Worlds?<\/h2>\n

    Encoding JPEGs is not<\/strong> a binary choice between progressive and nonprogressive. You can do something in between.<\/p>\n

    By default, most progressive JPEG encoders define the segment of the image data in each of the 10 scans with a scan script. Advanced encoders like MozJPEG<\/a> try out different scripts and pick the one that results in the best compression, which might require fewer or more scans, depending on the image.<\/p>\n

    You can combine the advantages of progressive and nonprogressive encoding by customizing the scan script. After some experimentation and adoption of a few ideas from an inspiring talk by Tobias Baldauf<\/a>, Cloudinary came up with the following scan script for encoding progressive JPEGs:<\/p>\n

    0 1 2: 0 0 0 0;\n0: 1 9 0 0;\n2: 1 63 0 0 ;\n1: 1 63 0 0 ;\n0: 10 63 0 0;\n<\/code><\/pre>\n
    The script runs five scans, with each line corresponding to a scan:<\/p>\n