Progressive JPEG pictures and related

Recently, I have seen some websites jpg When presenting pictures in format , There are two ways , One is top-down scanning , There is another kind, first of all, blurred pictures , Then gradually clear ( It's like GIF Staggered display of formats ).

One 、 basic JPEG(baseline jpeg) And progressive JPEG

The size of the picture ：

Zhang Xinxu's personal blog sees ：

The same jpg picture , If you save it as basic and progressive, which size is smaller ？

According to me 3 Finally, test with pictures of different styles , Find out , Baidu Encyclopedia said that the size of progressive pictures is smaller than that of basic ones, which is inaccurate .

among , There is basically no rule in the size relationship between the two . Here are his test results ：

Picture thumbnail	test result
	Picture quality 59% And below , gradual JPEG The picture is smaller ; The quality of 60% And above , basic JPEG smaller
	Picture quality 82% And above , gradual JPEG The picture is smaller ; The quality of 81% And the following , basic JPEG smaller
	No matter how good the picture is , It's all gradual JPEG The picture is smaller

however , In terms of probability , Most of the time , Progressive type JPEG Smaller than the basic image size . However , The size difference is compared with the size of the original drawing , Isn't worth mentioning , therefore , The so-called picture size cannot be used as the basis for selecting two kinds of pictures .

Download rendering speed

A man named Ann Robson People who , Recently, I tested the progressive image rendering under various browsers .

The following figure for FireFox Comparison chart of rendering speed under the browser ：

When the large outline is loaded OK When , The last suckling pig in Xiaotu hasn't been born yet ; The basic suckling pig diagram has not started loading ！ obviously , Robertson is trying to tell us , gradual JPEG Download faster .

The following table shows the test results under each browser ：

browser  ( Specific test version )	gradual jpeg Foreground rendering	gradual jpeg Background rendering
Chrome (v 25.0.1323.1 dev Mac, 23.0.1271.97 m Win)	Gradually ( Pretty fast ！)	Gradually ( Pretty fast ！)
Firefox (v 15.0.1 Mac, 12.0 Win)	Gradually ( Pretty fast ！)	Immediately after downloading the file ( slow )
Internet Explorer 8	Immediately after downloading the file ( slow )	Immediately after downloading the file ( slow )
Internet Explorer 9	Gradually ( Pretty fast ！)	Immediately after downloading the file ( slow )
Safari (v 6.0 Desktop, v 6.0 Mobile)	Immediately after downloading the file ( slow )	Immediately after downloading the file ( slow )
Opera (v 11.60)	Immediately after downloading the file ( slow )	Immediately after downloading the file ( slow )

The conclusion is simple ,Chrome + Firefox + IE9 browsers , Progressive picture loading is faster , And much faster , As for other browsers , It is consistent with the loading of basic pictures , At least not a drag .

Scott Gilbertson There are other supplements to progressive pictures ：
1. You never know the basic picture content , Unless it is completely loaded ;
2. Progressive pictures are sized and framed at the beginning , Not like a basic picture , Backflow due to unset size —— Improved rendering performance ;
3. Progressive pictures also have shortcomings , Just eat CPU Eat memory .

These are the contents , Weigh the use in your hand . generally speaking , Progressive is recommended for large size pictures JPEG.

//zxx: png Pictures can also be presented incrementally

Two 、 Progressive type JPEG establish

 photoshop Generate
Everybody knows photoshop There was a “ Stored as web Format used ”, That continuous check is progressive JPEG Picture. , You also need to check the conversion to sRGB Options , In some browsers , The image is set to CMYK There will be some problems ！