Pages use progressive JPEG to improve user experience and progressive jpeg

Pages use progressive JPEG to improve user experience and progressive jpeg

Today, we realized that there are two ways to save JPEG files: Baseline JPEG (standard) and Progressive JPEG (Progressive ). The two formats have the same size and image data, and their extensions are the same. The only difference is that they are displayed differently.

Baseline JPEG

This type of JPEG file is stored in the JPEG file by scanning from top to bottom. When you open this file to display its content, the data will be displayed from top to bottom lines in the storage order until all the data is read, the entire image is displayed. If the file size is large or the network download speed is slow, the image is loaded by one row. This format of JPEG has no advantages. Therefore, Progressive JPEG is generally recommended.

Progressive JPEG

Unlike Baseline, the Progressive JPEG file contains multiple scans. These scans are stored in JPEG files. When opening a file, the blurred outline of the entire image is displayed first. As the number of scans increases, the image becomes clearer and clearer. The main advantage of this format is that when the network is slow, you can see the picture outline to know what the picture is being loaded. When some websites open large images, you will notice this technology.

The advantage of progressive images is that users can see the outline of the final image without downloading the image, which can improve the user experience to a certain extent. (The standard type is recommended for waterfall websites)

In addition, the size of the progressive image is not much different from that of the basic image, and sometimes it may be smaller than the basic image. The disadvantage of progressive images is to eat the user's CPU and memory, but for the current computer, the calculation of this image is not much.

Now let's talk about how to save or convert an image to Progressive JPEG.

1. PhotoShop

In photoshop, there is "storage is the format used by the web". When it is turned on, "continuous" is the progressive JPEG.

 

Detailed tutorial reference http://www.bkjia.com/photoshop/182198.html

2. Linux

Check whether it is progressive jpeg: identify-verbose filename.jpg | grep Interlace (if None is output, it is not progressive jpeg; If Plane is output, it is progressive jpeg .)

Convert basic jpeg to progressive jpeg:> convert infile.jpg-intermo-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. pivotran

Using tran-copy none-progressive <inputfile> <outputfile>

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

The above is all the content that uses progressive JPEG images to improve the page experience. It is very simple and practical. We recommend it to our friends here.