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

网站地址 图片大小(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一共用到了,而且现在的知道对二人转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(百度文库) 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的,体验上也不好

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

时间: 2024-08-05 09:50:24

吐槽一下百度系网站图片的一些问题的相关文章

怎么让百度收录网站的图片呢?

简单有效办法目前公认的是在自己想要被收录的图片加alt属性,并编写关键词,想要快速被收录最好是申请百度空间,把图片发在空间上,因为目前百度旗下产品图片存档以百度空间为优先,然后标题就写你想要被收录的关键词,再让关键词在内容部分多出现几次,一般24小时内会被收录看到!! 怎么让百度收录网站的图片呢?

如何:使用PicturBox实现类似淘宝网站图片的局部放大功能

转载至http://xuzhihong1987.blog.163.com/blog/static/267315872011822113131823/ 概要: 本文将讲述如何使用PictureBox控件实现图片的局部放大浏览功能,效果类似淘宝网站的图片局部放大浏览,通过鼠标悬浮查看局部大图,同时扩展了鼠标滚轮放大缩小功能.本文将详细讲述实现该功能的主要思路,例子虽是在Winform的环境下实现(当时开发的系统用的是winform),但是代码实现思路在其他环境(如WPF)应该是通用的. 解决方案:

网站图片优化

第一.网站图片要分类别放置. 第二.图片要注意是不是都加了一些搜索引擎能够识别的标签"alt属性"这点对图片网站来说是一"棵救命稻草"可不要放弃哦! 第三.图片如果能够在网页上加上一些说明最好不过,这样可以让你的图片被当作搜索引擎的素材采集,你的图片站快照更新也很快!注意说明在合适,和图片相符,不要乱加描述. 第四.图片要注意你的大小还有格式,最好不要放一些很特殊的格式,这样可能不容易被收录,就算是被搜索引擎收录了,用户浏览到了被下载的机会还是很小,这样就失去了我们

80行Python代码实现自动爬取色情网站图片

用Python爬取色情网站的图片,技术宅的小玩具.在这里我将会向你详细介绍用Python下载一个色情网站图片的全部步骤,你会从中看到Python的简洁以及技术宅的无聊. 首先你应该应该有一个色情网站的网址,当然我不会给你的,自己找!!!我会告诉你其中的规律: http://www.*****.com/htm/piclist[1]/[2].htm 一个色情网站的图片区中,URL不同的只有[1][2]两处,通过观察你可以发现,[1]处表示图片种类(丝袜美腿.清纯唯美.****.and so on),

6188 网站图片爬虫

Spider 本次使用的为python3.4 爬取www.6188.com上壁纸 第一步,我们先看网站分析,寻找规律: 我们要抓取的是网站所有的图片,通过对网站结构的分析,发现其中规律: 网站图片是按类区分的,每一个类别在主页(A)中有一个链接(B),该链接中有一个该类的列表(C),每一个类表中为图片list(D),ist中有图片的真实地址 ·大致结构图如下: 好了,网站结构了解了,循序渐进,一步步获取图片. 从主页开始分析其中包含的类别如图: 源码: 其中包含两大类,wallpaper和pho

百度Ueditor多图片上传控件

发现百度的Ueditor富文本编辑器中的多图片上传控件很不错,于是便想着分享出来使用,费了老劲,少不了无名朋友的帮助,也查了不少资料,终于搞定了 发代码给大家,请大家多多指正 1.首先要在html页面中添加对ueditor的脚本引用 <script src="../js/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="../public/ue

Python3抓取百度贴吧图片

我抓取的地址是http://tieba.baidu.com/p/3125473879?pn=2,这个帖子共有82页左右,下面的代码主要抓取82页的所有图片,具体代码如下: """抓取百度贴吧图片""" #导入模块 import re import urllib from urllib.request import urlopen,urlretrieve #获取抓取页面的源代码 def getHtml(url):     page = urlope

如何禁止百度对网站进行转码

为了更好的用户体验,百度会对于在移动端浏览体验较差的网站进行转码,转码之后,相对来说会比不转码要好,但是有些网站是不需要进行转码的,例如已经做了对应的手机站或者是当初在写网站的时候用的是html5语言,可以根据客户端的大小自动视频屏幕大小,这个时候就不需要百度再进行转码了,下面是禁止百度对网站进行转码的详细操作视频. 由于博客园视频受限,想要观看全屏高清版视频的朋友,点击链接:http://www.zymseo.com/54.html 根据自己的实际情况来操作,如果你有了单独的手机站,就可以在p

seo网站图片如何优化

各大搜索引擎对于图片的识别技术越来越成熟,但还是没有达到能100%识别图片内容的地步.网站中的图片优化急需一个完整的解决办法,下面我以太原雅辉装修公司网站中的近1000张图片优化经历来分享网站图片优化的实用技巧. 一.站内图片该有的属性一个都不能少 1.alt:用户是不会看这个属性的,但是对与搜索引擎来说却非常管用,现在搜索引擎还没有达到能100%准确识别图片内容的时候,所以alt属性依然不可忽视. 2.width.height:同样,用户也不会关心这个图片的宽高,只要看上去舒服就行.蜘蛛在爬取