Heim >Web-Frontend >HTML-Tutorial >吐槽一下百度系网站图片的一些问题_html/css_WEB-ITnose

吐槽一下百度系网站图片的一些问题_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:48:471408Durchsuche

网站地址 图片大小(KB) 页面大小(KB) 比例(%) 图片存在的问题
https://www.baidu.com(百度首页) 27.9 162 17.2

百度首页一共加载了4张图片,其中2张是img标签加载,另外两张是background加

载。2张img图片一张用于logo,大小为7.7KB,尺寸为270*129,但自然尺寸为

540*258,猜测之前是为了在retina屏幕下的显示,所以尺寸会*2(为什么不像

qq.com或者taobao.com的logo那样通过image-set呢?)。但这样在普通屏幕下

就会有冗余,而且这张图片是可以再压缩的,通过腾讯的智图工具压缩后大小变成

了2.6KB,少了66.2%;

另一张图片用于pjax的搜索结果页的logo,不理解为什么要把这张以后才可能用到

的图片的优先级放在logo的后面。个人认为应该把这种图片合入到背景图里面

http://tieba.baidu.com(百度贴吧) 2100 2600 80.8

贴吧首页图片似乎有很多没有经过压缩,而且绝大多数图片的加载方式都是同步的

img标签形式(104张),轮播时候才会出现的图片以及非首屏的图片也会直接加

载(连最基本的图片lazyload和占位图都不知道吗)。其中在贴吧头部的banner

部分的图片大小:

(98+24.4+53.6)+

(18.6+33.2+8.3)+

(87.9)+

(26.5+39.6)

=390.1KB

贴吧精选模块里面:252+71.8+164+29.3=517.1KB(图片需要那么大吗)

如果贴吧的图片经过压缩和lazyload,保守估计图片大小可以由2100KB减少到

400KB,页面整体大小减少到900KB。

 

点进去首页的两会吧,页头的两会背景图片会把你吓一跳

(http://tb1.bdstatic.com/tb/cms/ngmis/file_1425371814749.jpg):

大小为493KB。如果把这张图片压缩一下的话,大小可以变成不到100KB。

贴吧的开发人员,赶紧改吧。

 

http://zhidao.baidu.com(百度知道) 2100 2400 87.5

知道和贴吧的问题类似,而且比贴吧还要严重,知道的大banner一共用到了

4张图片:172+93.3+173+146=584.3KB,3个69*69的图片,

本来加起来用到60KB就可以了,结果用的是450*450的图片,大小超过了

400KB,也是醉了。这还不是最严重的,有个“知道用户”模块,

页面最大的一张图片(282KB)

http://hiphotos.baidu.com/album/pic/item/9f2f070828381f30

cb52405aa9014c086f06f0fe.jpg就是来自这里,而且视觉大小只有55*54!

这个模块的其他图片也都有这种大图小用的问题

知道的,你知道吗?

 

http://wenku.baidu.com(百度文库) 1500 2000 75.0

文库的图片也存在大图小用、图片压缩率不高的问题,但问题不大,除了中间

banner的第二张图片

http://img.baidu.com/img/iknow/wenku/704X272xhjzy.jpg

有点略大(311.6KB),用腾讯的智图http://zhitu.tencent.com/

压缩后,也就变成了38.8KB而已

http://baike.baidu.com(百度百科) 1100 1600 68.8

图片没用lazyload,轮播图片下一页内容不是按需加载

除此之外,页面最开始的轮播功能如果点击太快的话...

应该是轮播模块在轮播期间没有锁定的缘故,换个好用点的轮播组件吧

http://music.baidu.com(百度音乐) 1700 2100 81.0

和贴吧问题类似:

1、大图小用;(“推荐榜单”最严重)

2、图片压缩率不够;

3、lazyload用的不大好;

4、轮播图片直接加载

http://image.baidu.com(百度图片) 461 621 74.2 除了背景图有点大(240KB)之外,其他还行
http://news.baidu.com(百度新闻) 1200 1600 75.0

 右侧的轮播区图片个头都不小,其中有三张大小都在200KB左右,尤其是

robin的第一张

http://a.hiphotos.baidu.com/news/q%3D100/sign=b09ec35e82183

67aab897bdd1e728b68/08f790529822720e0c3cec8d7fcb0a46f31

fabd2.jpg,大小达到了227KB,压缩一下肯定可以少很多

 

顺便吐槽一下轮播区用的loading图

http://news.baidu.com/iphone/img/loading_3.gif

因为不存在,302跳转到了http://www.baidu.com/search/error.html

 

除此之外,新闻很多lazyload的图片的src为空,懒到连张占位图都没有,

在IE低版本下会重新加载http://news.baidu.com的,体验上也不好

 

    图片在网站的比重越来越大,如何在保证用户体验的前提下,尽量减少或延后图片资源的加载,以减少对页面其他资源的带宽抢占和整体带宽占用,还是需要下点心思的。

 

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn