Preface:

In the development, when our website has the problem of large picture size, we will think of using low-quality picture placeholders or placeholders to avoid blocking blank, so as to optimize the performance of the website, today to introduce the use of progressive pictures to optimize this problem.

What are progressive images?

The loading of ordinary images is gradually displayed from top to bottom with the completion of image data download. If the browser receives only half of the image file’s data, it will only display the top half of the image.

The loading process of progressive image is to display a fuzzy effect of the whole image first. With the increase of downloaded data, each detail in the image is gradually refined, so that the image resolution is gradually improved and the complete image content is finally restored.

Jpeg progressive loading

Principle:

Ordinary jpeg images are from left to right, from top to bottom way of compressing line by line, and progressive jpeg image compression method is based on wavelet transform of the hierarchical storage, storage first low-frequency (contour) content, high frequency (details), and then stored in the process of pull images like this, is a process of gradually clear.

Jpeg structure:

JPEG files are internally divided into blocks that begin with FF (some of which are highlighted in the screenshot) and are followed by a tag that specifies the type of block. The blocks, in order of occurrence, are:

JPEG starts with FFD8, ends with FFD9, and ffda represents the beginning of a frame

ffd8... ffda... ffda... ffda... ffd9Copy the code

There is only one FFDA in normal JPEG

Progressive JPEG contains more than one FFDA

The difference between: Progressive JpeGs store images in pixels, while progressive JpeGs use frequency coefficients to represent images. This does not increase file size because the image data is the same in both rendering methods. Progressive JpeGs use a more user-friendly way of sorting, like a set of predefined styles. Mixing in any order can recreate the original image.

 

PNG and GIF progressive loading

PNG and GIF also have visual loading effects similar to progressive JPEG, called interlaced GIF, interlaced PNG. Interlaced images are scanned 1 to 7 times, each time skipping a few pixels. The first pixels are scanned and rendered first. Each additional scan will make the image clearer, and the last scan will scan all the pixels and render the complete image. The following figure

Principle:

Adam7 interlaced scanning algorithm: In essence, a PNG image is divided into several SMALL PNG images, and then these small PNG images are scanned and analyzed in a normal line by line manner. Finally, the resolved pixel data can be located in accordance with certain rules.

Open graph:

We with the size of a 10 * 10 PNG images, for example, the following each number represents a pixel, the value of the digital represents the point at which time scan scanned into, the scanning for the first time we will scan to four pixels, we put the four pixels pulled out together alone, is what we want to split the first picture, And so on.

Place:

After we get 7 small pictures according to the above rules, we put the pixels of these small pictures back, that is, fill back.

The difference: PNG progressive scan and interlaced scan both store images in pixels, while interlaced scan slightly increases the size of the image due to the fact that the whole image stores more extra data due to the fact that the interlaced scan is performed in pixels. The extra data here is the filter type. The number of lines scanned grows as the original LARGE PNG image is broken down into smaller images. The first byte of each scanned line is used to store the filter type, so the more lines you add, the more data you add.

Pros and cons of progressive graphics

Advantages:

  1. Traffic can be optimized for mobile network scenarios, that is, users can download only part of the progressive image to reduce image resolution and reduce traffic.

  2. To reduce the wait time, the user can see the outline of the image first and then gradually fill in the details

Disadvantages:

  1. Images need to be converted to a progressive format, which comes at a cost, since most existing images are compressed in plain format

  2. There is not enough terminal support, and some of the newer browsers (IE8, for example) have weak support for progressive formats. However, as time goes by, this part of the browser will gradually be phased out.

Convert images to progressive images

  1. Local image conversion:

    JPG using Js-MozJPEG,

    PNG uses worker to open and close images according to Adam7 algorithm (Github warehouse) for conversion

  2. Network picture conversion: If the picture is uploaded to Ali Cloud OSS, the format conversion and display control of the picture can be carried out at any time, anywhere and on any Internet device through a simple RESTful interface. Other cloud servers have similar processes.

Verify that the image is progressive

Mac checks whether the image is progressive

Imagemagick $brew install imagemagick

Then enter to check the pictures of $the identify – verbose file. JPG | grep Interlace

If you return Interlace: JPEG/PANE (older version PANE) the picture is progressive, and if you return Interlace: None the picture is not progressive

Application: C2C picture transmission mechanism

Transport mechanism flow

  1. Sender image preprocessing, converting other image formats to progressive JPEG format;
  2. In the data flow organized by the sender, the sender UIN, the receiver UIN, the total length of the picture, the minimum length of the transmission unit and other meta information are organized at the front of the data flow, while the progressive picture data is organized at the back of the data flow.
  3. The sender sends data, the transfer server receives data, and continuously confirms the length of the received data to the sender. Meanwhile, the meta information of the first half of the data flow is analyzed to obtain the UIN of the sender and the receiver, the total length of the picture and the minimum length of the transmission unit.

Image headers with image sizes are a high priority because the browser needs to know the size as early as possible to layout the page to avoid wasting resources by rearranging multiple times, and because the image header is small, it does no harm to send it before other data.

  1. When the intermediate forwarding server receives the minimum transmission unit length, it considers the image has been received successfully, drops the received data, and immediately returns the unique identification field of the image to the sender.

After receiving the field, the sender considers that the image is successfully sent, displays the image successfully sent to the user immediately, and then goes to the background to continue sending the remaining image data. The sender user will experience that the sending time is reduced and the sending process is faster.

  1. If the sender’s network is normal at this time, the image data will be sent completely. If the sender is unable to send more data due to the network instability at this time, the sending process ends without recording any status, and the picture will not be resent in the future.
  2. The relay server immediately notifies the receiver via the signaling channel that a new image has been received while returning the field.
  3. If the user looks at the new picture immediately after receiving the notification of the new picture, the recipient will see the picture corresponding to the minimum transfer unit length. If the user does not look at the image immediately, but looks at the image later, the server may have received more or even complete image data, and the user will see the image clearer than the smallest transfer unit.

When the receiver shows the picture, it does not need to wait for the complete picture to be received before showing it to the user. The user does not need to wait and can directly see a picture that changes from fuzzy to clear, greatly reducing the waiting time for receiving the picture.

Key Technical points

  1. Convert images to progressive images
  2. Use streaming
  3. Calculate the minimum transfer unit

In practice, it does not make sense to transmit an image that is completely invisible, so there is a minimum requirement for progressive image transmission to ensure that the received image is basically usable. We call this length MinimalTransport Size, and the ratio of MTS to the Total Size of the original picture (TS, Total Size) is called the transfer factor Q. The formula is: MTS = TS×Q The transmission factor Q can be adjusted according to a variety of factors. It includes the network type of the terminal, signal strength, size and quality of the transmitted target picture, etc. In this transmission system, as long as the sender sends the minimum transmission length of the picture, it can show the user successfully sent, and then turn to the background to send complete data as far as possible. When the conditions are not allowed (network interruption, power failure, user switch APP, etc.), there is no need to send more data.