How do I use progressive jpegs on the web?

Question

Progressive JPEGs seem pretty useful for performance purposes. I've found: https://github.com/gruntjs/grunt-contrib-imagemin, which has an option to progressive'ify your jpegs. It is using http://libjpeg-turbo.virtualgl.org/ under the hood. This is great; however, it seems like my images load top down still.

Questions:

1. Do pjpegs have their own file extension?
2. Do pjpegs have their own mime types?
3. What is a good way to test that the pjpeg is doing what it needs to do?

Answer 1

Every JPEG library I have seen recently decodes progressive JPEG image. A progressive JPEG breaks each component into two or more scan (as opposed to 1 scan per component in sequential JPEG).

In theory, an application can redisplay a progressive JPEG image after each scan. In a web browser, that effect would give you images that start out as 8x8 blocks the get clearer.

In ye olde days of internet over 1200 baud serial lines that made a lot of sense.

Now, most images can be downloaded so fast that there is little need for a web browser to progressively display an image, even when it is in progressive JPEG.

To use progressive JPEGs, you just need an encoder that creates them

1. Progressive JPEGs generally do have their own extension.
2. No
3. Just display the image. If it is visible in your web browser, it is doing what it needs to do.