Web Front-end optimization: use progressive or staggered Images

I. Introduction

JPEG, GIF, and PNG image formats all provide a function to enable faster image display. Images can be stored in a special way. the sketch of the image is displayed first, and the details are filled after all files are downloaded (Baidu image, QQ space, this method is used when the big image is displayed ). This has a very meaningful psychological effect, because it makes people have something to watch, rather than sitting and waiting for large images to slowly display on the screen. However, this effect is not supported by all browsers.

When testing various browsers (not described as the latest version), we found that:

1. Chrome supports "gradual" and "staggered"

2. Safari (PC/MAC) does not support "progressive", and "staggered support is good"

3. Fiefox provides excellent support for "gradual" and "staggered"

4. Opera provides excellent support for "gradual" and "staggered"

5. Neither "gradual" nor "staggered" are supported by IE9

Test URL: Interlace_test

Figure 1: Basic display effect demonstration

Figure 2: Demonstration of progressive/staggered display

I:

In Figure 1, we can find that the image is gradually loaded from the top to the bottom. The JPG compression mode with the display effect 1 is called Sequential Encoding ), the image is processed from left to right and from top to bottom at a time. It is also a common JPG encoding mode.

II:

In Figure 2, we can find that the image is the same. Because the image is larger than the big image, we need to gradually load the image to know the approximate outline of the image, but in Figure 2, because the Progressive JPG format is used, we can see the approximate outline of the image when loading the image. This is the Progressive JPG, which uses Progressive Encoding (Progressive Encoding ).

So?

The so-called Progressive JPG format uses an incremental JPG. You can search for more information in English using the Google Keyword JPG sive ssive Encoding, I found that there are not many domestic introductions on this aspect.

This JPG format can be used to process scores of images for a long time and deliver images in a way that is blurred to clear (similar to GIF transmission over the network ).

Ii. Progressive JPEG Creation

1. php Conversion

It is said to be the following code:

1234567

<?php$image = imagecreatefromjpeg($this->attach['target']);//imagefilter($image, IMG_FILTER_MEAN_REMOVAL);Imageinterlace ($ image, 1); // functions self-contained in the GD library of phpImagejpeg ($ image, $ this-> attach ['target']); // generate the corresponding imageimagedestroy($image);?>

You can search for the conversion of other languages.

2. photoshop generation

Everyone knows that photoshop has a "storage for the web format", and then, (SEE), the continuous check is the progressive JPEG image:

It is said that you need to select the switch to sRGB option. In some browsers, setting the image to CMYK may cause some problems!

Summary

Scott Gilbertson has additional supplements to progressive images:

1. You will never know the basic image content unless it is fully loaded;

2. The size frame of the progressive image is fixed at the beginning, and will not be the same as that of the basic image because the size is not set, resulting in backflow-improved rendering performance;

3. There are also deficiencies in progressive images, that is, eating CPU and memory.

Original article: http://www.admin10000.com/document/2437.html