The page uses progressive JPEG to enhance the user experience degree _php instance

I realized today that there are two ways to save JPEG files they are baseline JPEG (standard type) and progressive JPEG (progressive). Both formats have the same size and image data, and their extensions are the same, and the only difference is that they are displayed in a different way.

Baseline JPEG

This type of JPEG file is stored in a JPEG file in the order of each row, by scanning from top to bottom. When this file is opened to display its contents, the data is displayed from the top to the next line in the order in which it was stored, until all the data has been read and the entire picture is displayed. If the file is large or the network download is slow, you will see that the picture is loaded with a row of rows, and this format JPEG has no advantage, so it is generally recommended that you use progressive JPEG.

Progressive JPEG

Unlike the baseline scan, the progressive JPEG file contains multiple scans, which are stored in a JPEG file. When you open a file, you will first show the blur outline of the entire picture, and as the number of scans increases, the picture becomes more and more clear. The main advantage of this format is that when the network is slow, you can see the outline of the picture to know what the picture is loading. You'll notice this technique when you open a larger picture on some Web sites.

The advantage of progressive pictures is that users can see the approximate contours of the final image without downloading the picture, and to a certain extent, improve the user experience. (The waterfall leaves the website to suggest or use the standard type)

In addition, the size of an incremental picture will not be much different from the size of the basic picture, and may sometimes be smaller than the basic picture. The downside of a progressive picture is that it eats the CPU and memory of the user, but for today's computers, the calculation of this image is nothing.

Said here more than the next to talk about how to say the picture saved or converted to progressive JPEG.

1. PhotoShop

There is a "Save as Web Format" in Photoshop, and the option "continuous" when turned on is progressive JPEG.

Specific Tutorials Reference http://www.jb51.net/photoshop/182198.html

2, Linux

Detect if it is progressive jpeg:identify-verbose filename.jpg | grep interlace (if output None is not progressive jpeg, if output Plane description is progressive JPEG.) )

Convert basic JPEG to progressive jpeg:> convert Infile.jpg-interlace Plane outfile.jpg

3, PHP

Using the Imageinterlace and imagejpeg functions, we can easily solve the conversion problem.

<?php
$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 <inputfile> <outputfile>

6, C #

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) ;

Source. Save (@ "D:\temp\saved.jpg", codec, parameters);
}

The above is the use of progressive JPEG image to enhance the page experience degree of the entire content, very simple and practical, here recommended to the small partners.