Use progressive JPEG to enhance user experience

Today, I realized that there are two ways of saving in the original JPEG files. They are Baseline JPEG (standard) and Progressive JPEG (progressive). The two formats have the same size and image data, and their extensions are also the same, and the only difference is that the two shows the way.

Baseline JPEG

This type of JPEG file storage is to press the order of each line in the JPEG file in the JPEG file. When this file is opened, the data will be displayed from top to the next row in the order of storage until all data is read, and the display of the entire picture is completed. If the file is large or the network download speed is slow, then it will see the effect of the picture loaded by one line. Therefore, the JPEG in this format has no advantage, and therefore, it is recommended to use Progressive JPEG.

Progressive JPEG

Different from Baseline, the Progress Jpeg file contains multiple scans that are stored in the JPEG file. Open the file, the blurred contour of the entire picture will be displayed, and the picture is getting clearer as the number of scans increases. The main advantage of this format is that in the case where the network is slow, you can see the outline of the picture know what is loaded. When some websites open large pictures, you will notice this technology.

The benefits of progressive pictures are to allow users to see the substantially outline of the final image without downloading the picture, to a certain extent, to enhance the user experience. (Site suggestions for waterfalls are still standard)

In addition, the size of the progressive picture does not differ with the basic picture size, sometimes smaller than the basic picture. The disadvantage of progressive pictures is to eat users’ CPU and memory, but for the current computers, this picture is not countless.

Saying this side, let’s change, how to say that the picture is saved or transformed into Progressive JPEG.

1, Photoshop

In Photoshop, there is “format stored as web”, and after opening, select “Continuous” is progressive JPEG.

2, Linux

Detection is Progressive Jpeg: Identify -verbose filename.jpg | GREP Interlace (if the output none is not described)

Convert Basic JPEG to Progressive Jpeg:> Convert Infile.jpg -Interlace Plane Outfile.jpg

3, PHP

We can easily resolve the conversion problem using ImageInterlace and ImageJpeg functions.

PHP $ IM ImageCreateFromJPEG ('pic.jpg'); ImageInterlace ($ IM, 1); ImageJpeg ($ IM, './php_interlaced.jpg', 100); ImageDestroy;?>>

4, Python

Import Pilfrom Exceptions Import IOERR IMG PIL.Image.Open (“C: Users Biaodianfu Pictures in .jpg”) Destination “C: Users Biaodianfu Pictures Test.jpeg” TRY: IMG.SAVE (Destination, “JPEG”, quality80, optimizeTrue, progressiveTrue) except IOError: PIL.ImageFile.MAXBLOCK img.size [0] * img.size [1] (destination, “JPEG”, quality80, optimizeTrue, progressiveTrue)



6, c #