上周,我参加了公司的一门课程《网站性能优化》,讲师提出了一个问题:一张图片优化后减少5K,1年内可以大概省下多少宽带成本呢?非常好奇,仔细听完讲师分析,计算出来的数据让小伙伴们都惊呆了,仅仅5K,看起来真的没什么,一年内大概节省540元~1440元,这说明一个问题,用户数庞大的网站中,一点优化可能会带来巨大的带宽成本节省,表现出价值是特别高的,不容忽视小小优化带来的意义。相信很多同学也好奇这个数据是怎么计算的,公司的内部数据不好透露,给大家重新举个例子:
<!--
公司内某个活动的最高峰半小时PV大概占总PV的3%,某天PV大概去到50万
高峰期的半小时PV大概就是500000*0.03 = 15000,每秒PV是15000/1800 = 8.3(次每秒)(活动页面一般只访问一次,不考虑客户端缓存的情况)
一张图片优化了5K,减少的宽带就是5*8.3 = 41.6kByte/s
Byte是字节数,bit是位数,在计算机中每八位为一字节,也就是1Byte=8bit
那么5K产生的带宽就是41.6*8/1024 = 0.325Mbit/s
不同地区的IDC服务效果不同,价钱差异也比较大,每月100M大概在1万~2.68万不等(09年市场带宽成本价算的,数字不一定精准,但也是有力的数据)
5K的图片所带来的0.325M带宽的成本,大概每月32.5元~87.1元
那么,一年大概节省390元~1045元
-->
这个例子只是图片的优化,对于实际工作中,还有很多节省宽带成本的方法,如果要去算,那这个影响会放大10倍,100倍甚至是1000倍以上的数量级。网站性能的优化是一个一直不容忽视的话题,曾经写过《提高网站加载速度的3项黄金守则》一文,有兴趣可以了解下,平时多关心自己网站的性能优化,无形地为公司省钱,老板不止关心赚钱的事情,省钱的事情老板也会关注,如果你为老板省钱,说不定他一高兴就涨你工资了~
今天写这篇文章不止是想告诉大家小小优化带来的价值,另外给大家带来jpg图片的优化技巧,相信如何优化图片也是大家特别关心的问题。
实际运营的业务,很多图片存在被被忽视的优化,近期我在部门网站上下载了4张jpg广告图共300K+,这几张广告图上线前已被公司内部的优图工具压缩过,而我自己再通过软件进行二次压缩,保证图片质量良好下,优化后可以减少150K+,压缩率100%,那么,是什么软件压缩率这么好呢?
相信很多同学会猜想是我们非常熟悉的photoshop,ps的确是非常优秀的图像处理软件,基本上做web开发都会使用它,我们可以使用它压缩图片,效果也非常不错,以前我一直是使用它的存储为web格式的功能来压缩图片。今天介绍另一款图片处理软件,回顾博文《PNG的使用技巧》,推荐过大家在移动端使用PNG8 alpha格式,该格式不仅文件小,节省流量,而且半透明效果良好,而导出它的软件正是传说中Fireworks,没错,就是它,强大的图片压缩软件,为网页设计而出生的作图软件, 是一款创建与优化 Web 图像和快速构建网站与 Web 界面原型的理想工具,我们来看实例~
保证图片质量良好的情况下,使用firework与photosop分别对jpg图片的进行,对比它们压缩率
下图是上上周上线的一张广告图:
图片大小96.3KB
1.用photoshop CS6压缩处理图片
按存储为web所有格式(CTRL+ALT+SHIFT+S),弹出如下界面,设置如下,优化后的图片大小为55.5K,减少了40.8K
2.用firework CS6压缩处理图片
如下界面,在优化面板中选择:JPEG - 较高质量
使用导出功能来压缩图片,优化后的图片大小为49.2K,减少了47.1K
2者对比如下:
经过笔者多次尝试使用后,firework对图片(jpg、png、gif)压缩处理上比photoshop要优秀(例外:photoshop在png32的压缩处理稍微好点),关于png的压缩处理,可以参考《PNG的使用技巧》。强烈推荐大家可以使用firework,即便是Adobe公司在CC版本停止了firework,但相比其他图片处理软件,值得肯定的是,它的压缩图片功能(压缩图片的算法)是一流,未来我们还是可以继续使用。
话说回来,按照文章开头的计算,该广告图使用ps和fw压缩后可剩下多少钱多少流量呢,相信这也是一个惊人的数据,具体还跟页面的PV、广告的上下线时间等有关系
网站优化如此重要,我们可以做的还有很多,今天你优化了吗?