您的位置：首页 > 运维架构 > 网站架构

吐槽一下百度系网站图片的一些问题

2016-11-13 14:24 246 查看
网站地址图片大小(KB)页面大小(KB)比例(%)图片存在的问题
https://www.baidu.com（百度首页）27.916217.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（百度贴吧）2100260080.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（百度知道）2100240087.5知道和贴吧的问题类似，而且比贴吧还要严重，知道的大banner一共用到了，而且现在的知道对二人转www.errenzhuan.cc的审核很严格。
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（百度文库）1500200075.0文库的图片也存在大图小用、图片压缩率不高的问题，但问题不大，除了中间
banner的第二张图片 http://img.baidu.com/img/iknow/wenku/704X272xhjzy.jpg 有点略大（311.6KB），用腾讯的智图http://zhitu.tencent.com/
压缩后，也就变成了38.8KB而已
http://baike.baidu.com（百度百科）1100160068.8图片没用lazyload，轮播图片下一页内容不是按需加载
除此之外，页面最开始的轮播功能如果点击太快的话...
应该是轮播模块在轮播期间没有锁定的缘故，换个好用点的轮播组件吧
http://music.baidu.com（百度音乐）1700210081.0和贴吧问题类似：
1、大图小用；（“推荐榜单”最严重）
2、图片压缩率不够；
3、lazyload用的不大好；
4、轮播图片直接加载
http://image.baidu.com（百度图片）46162174.2除了背景图有点大（240KB）之外，其他还行
http://news.baidu.com（百度新闻）1200160075.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的，体验上也不好
图片在网站的比重越来越大，如何在保证用户体验的前提下，尽量减少或延后图片资源的加载，以减少对页面其他资源的带宽抢占和整体带宽占用，还是需要下点心思的。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  百度系
相关文章推荐
新的分享
章节导航