Home >Web Front-end >HTML Tutorial >Complain about some problems with pictures on Baidu website_html/css_WEB-ITnose
Website address | Image size (KB) | Page size (KB) | Proportion (%) | Problems with pictures |
https://www.baidu.com (Baidu homepage) | 27.9 | 162 | 17.2 | A total of 4 pictures are loaded on the Baidu homepage, 2 of which are loaded with img tags, and the other two are loaded with background . 2 img pictures, one for logo, size 7.7KB, size 270*129, but the natural size is 540*258. I guess it was for display on retina screen, so the size will be * 2 (Why not use image-set like the logo of qq.com or taobao.com?). But this way will be redundant under a normal screen, and this picture can be recompressed. After being compressed by Tencent’s Zhitu tool, the size becomes 2.6KB, which is less 66.2%; Another image is used for the logo of the pjax search results page. I don’t understand why this image, which may be used later , should be prioritized in the logo. behind. Personally, I think this kind of picture should be incorporated into the background image |
http://tieba.baidu.com (Baidu Tieba) | 2100 | 2600 | 80.8 | It seems that many pictures on the Tieba homepage are not compressed, and most of the pictures are loaded synchronously img In the form of tags (104 pictures), pictures that will only appear during the carousel and pictures that are not on the first screen will also be directly added (don’t you even know the most basic picture lazyload and placeholder image). The image size of the banner part at the head of the post bar: (98 24.4 53.6) (18.6 33.2 8.3) (87.9) (26.5 39.6) =390.1KB In the Tieba selected module: 252 71.8 164 29.3=517.1KB (does the picture need to be that big) If the Tieba pictures are compressed and lazyloaded, it is conservatively estimated that the picture size can be reduced from 2100KB to 400KB, and the overall page size is reduced to 900KB.
Click on the Two Sessions on the homepage. The background image of the Two Sessions at the top of the page will shock you (http://tb1.bdstatic.com/tb/ cms/ngmis/file_1425371814749.jpg): size is 493KB. If you compress this image, the size can be reduced to less than 100KB. Tieba developers, please change it quickly.
|
http://zhidao.baidu.com (Baidu knows) | 2100 | 2400 | 87.5 | I know that the problem is similar to Tieba, and more serious than Tieba. The big banners I know use a total of 4 pictures: 172 93.3 173 146= 584.3KB, three 69*69 pictures, Originally, the total use was 60KB, but in the end, a 450*450 picture was used, and the size exceeded 400KB, which is also intoxicating . This is not the most serious, there is a "know user" module, The largest picture on the page (282KB) http://hiphotos.baidu.com/album/pic/ item/9f2f070828381f30 cb52405aa9014c086f06f0fe.jpg comes from here, and the visual size is only 55*54! Other pictures in this module also have this problem of big picture but small use You know, do you know?
|
http://wenku.baidu.com (Baidu Library) | 1500 | 2000 | 75.0 | The pictures in the library also have the problem of large pictures but little use and low picture compression rate, but the problem is not big, except for the second picture in the middle banner Picture http://img.baidu.com/img/iknow/wenku/704X272xhjzy.jpg is a bit larger (311.6KB), using Tencent’s Zhitu http://zhitu .tencent.com/ After compression, it becomes only 38.8KB |
http://baike.baidu.com (Baidu Encyclopedia) | 1100 | 1600 | 68.8 | The picture is useless lazyload, the content of the next page of the carousel picture is not loaded on demand In addition, if the carousel function at the beginning of the page is clicked too fast... It should be because the carousel module is not locked during the carousel. Change to a more useful carousel component. Bar |
http://music.baidu.com (Baidu Music) | 1700 | 2100 | 81.0 | Similar to the problem of Tieba: 1. Big pictures with little use; (the "recommended list" is the most serious) 2. The picture compression rate is not enough; 3. Lazyload is not very useful; 4. Carousel images are loaded directly |
http://image.baidu.com (Baidu Pictures) | 461 | 621 | 74.2 | Except that the background image is a bit large (240KB), everything else is OK |
http://news.baidu.com (Baidu News) | 1200 | 1600 | 75.0 | The pictures in the carousel area on the right are not small, and three of them are about 200KB in size, especially robin’s first one http://a.hiphotos.baidu. com/news/q=100/sign=b09ec35e82183 67aab897bdd1e728b68/08f790529822720e0c3cec8d7fcb0a46f31 fabd2.jpg, the size reaches 227KB, it can definitely be compressed Much less
By the way, I want to complain about the loading image used in the carousel area http://news.baidu.com/iphone/img/loading_3.gif Because it doesn’t Exists, 302 jumps to http://www.baidu.com/search/error.html
In addition, the src of many lazyload pictures in the news is empty, so lazy There is not even a placeholder image. In lower versions of IE, http://news.baidu.com will be reloaded, which is not a good experience. |
The proportion of images in the website is increasing. How to minimize or delay the loading of image resources while ensuring the user experience, so as to reduce the bandwidth preemption of other resources on the page and the overall bandwidth? Occupation still requires some thought.