zoukankan      html  css  js  c++  java
  • 吐槽一下百度系网站图片的一些问题

    网站地址 图片大小(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的,体验上也不好

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

  • 相关阅读:
    Codeforces 1000C Covered Points Count
    Array类型
    Object对象
    变量、作用域与内存
    window.onload 方法脚本
    页面的性能优化
    node属性
    JavaScript图片
    DOM节点
    canvas象棋 画图
  • 原文地址:https://www.cnblogs.com/shinnyChen/p/4313473.html
Copyright © 2011-2022 走看看