Home > Web Front-end > HTML Tutorial > Complain about some problems with pictures on Baidu website_html/css_WEB-ITnose

Complain about some problems with pictures on Baidu website_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:48:47
Original
1407 people have browsed it

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.

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template