当前位置:网站首页>Progressive JPEG pictures and related
Progressive JPEG pictures and related
2022-07-05 09:08:00 【Flying bear blablabla】
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 !
边栏推荐
- Introduction Guide to stereo vision (4): DLT direct linear transformation of camera calibration [recommended collection]
- C#【必备技能篇】ConfigurationManager 类的使用(文件App.config的使用)
- Codeforces round 684 (Div. 2) e - green shopping (line segment tree)
- 迁移学习和域自适应
- AUTOSAR from getting started to mastering 100 lectures (103) -dbc file format and creation details
- Array, date, string object method
- Nodemon installation and use
- TF coordinate transformation of common components of ros-9 ROS
- Rebuild my 3D world [open source] [serialization-3] [comparison between colmap and openmvg]
- Dynamic dimensions required for input: input, but no shapes were provided. Automatically overriding
猜你喜欢
信息与熵,你想知道的都在这里了
Beautiful soup parsing and extracting data
[code practice] [stereo matching series] Classic ad census: (4) cross domain cost aggregation
fs. Path module
C [essential skills] use of configurationmanager class (use of file app.config)
Rebuild my 3D world [open source] [serialization-1]
Introduction Guide to stereo vision (4): DLT direct linear transformation of camera calibration [recommended collection]
Nodejs modularization
Solutions of ordinary differential equations (2) examples
Node collaboration and publishing
随机推荐
scipy. misc. imread()
深入浅出PyTorch中的nn.CrossEntropyLoss
Alibaba cloud sends SMS verification code
Programming implementation of ROS learning 6 -service node
Meta tag details
Multiple linear regression (gradient descent method)
c#比较两张图像的差异
It cold knowledge (updating ing~)
[daiy4] copy of JZ35 complex linked list
Summary of "reversal" problem in challenge Programming Competition
Ecmascript6 introduction and environment construction
Pearson correlation coefficient
Solutions of ordinary differential equations (2) examples
Introduction Guide to stereo vision (5): dual camera calibration [no more collection, I charge ~]
Jenkins Pipeline 方法(函数)定义及调用
Rebuild my 3D world [open source] [serialization-1]
Nodejs modularization
OpenFeign
RT thread kernel quick start, kernel implementation and application development learning with notes
OpenFeign