Use progressive JPEG to improve user experience

JPEG image files can have two different save types : Baseline JPEG and Progressive JPEG. Both of them have the same extension name but with different display effect.

Baseline JPEG

This type of JPEG files are scanned from top to bottom consecutively, each line of the image data will be saved sequentially. When opening this kind of images, data will be displayed with the save order line by line until all the data are read. If the image size is very large or network speed is very slow, the image will be displayed line by line from top to bottom.

Progressive JPEG

Different from baseline JPEG, progressive JPEG file involves multiple scans. These various scans will be stored sequentially. When opening this kind of images, the blurred contour of the image will be displayed first, with the increment of number of scans, the image will become clearer and clearer.

The advantage of this kind of images is the image content can be seen(though it's blurred) even when the network speed is slow while starting to load. This kind of application can be seen on some websites with large images. The drawback is it eats CPU and memory, but it's no big deal now as PC is becoming more and more powerful.

How to save or convert an image as progressive JPEG?

1. PhotoShop

Choose "Save for Web&Devices...", then check the Progressive box.

2. Linux

Identify whether an image is a progressive JPEG using  identify -verbose filename.jpg | grep Interlace. If it outputs None, then the image is not progress JPEG, if it's Plane, then the image is progress JPEG.

Use convert infile.jpg -interlace Plane outfile.jpg to convert a baseline JPEG to progressive JPEG.

3. PHP

Use imageinterlace and imagejpeg

$im = imagecreatefromjpeg('pic.jpg');
imageinterlace($im, 1);
imagejpeg($im, './php_interlaced.jpg', 100);
imagedestroy($im);

4. Python

import PIL
from exceptions import IOError
 
img = PIL.Image.open("c:\\users\\biaodianfu\\pictures\\in.jpg")
destination = "c:\\users\\biaodianfu\\pictures\\test.jpeg"
try:
    img.save(destination, "JPEG", quality=80, optimize=True, progressive=True)
except IOError:
    PIL.ImageFile.MAXBLOCK = img.size[0] * img.size[1]
    img.save(destination, "JPEG", quality=80, optimize=True, progressive=True)

5. jpegtran

jpegtran -copy none -progressive

6. C#

using (Image source = Image.FromFile(@"D:\temp\test2.jpg")) { 
    ImageCodecInfo codec = ImageCodecInfo.GetImageEncoders().First(c => c.MimeType == "image/jpeg"); 
    EncoderParameters parameters = new EncoderParameters(3);
    parameters.Param[0] = new EncoderParameter(System.Drawing.Imaging.Encoder.Quality, 100L);
    parameters.Param[1] = new EncoderParameter(System.Drawing.Imaging.Encoder.ScanMethod, (int)EncoderValue.ScanMethodInterlaced);
    parameters.Param[2] = new EncoderParameter(System.Drawing.Imaging.Encoder.RenderMethod, (int)EncoderValue.RenderProgressive); 
    source.Save(@"D:\temp\saved.jpg", codec, parameters);
}

Reference : 标点符