【原】一张图片优化5K的带宽成本

简介:

上周,我参加了公司的一门课程《网站性能优化》,讲师提出了一个问题:一张图片优化后减少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、广告的上下线时间等有关系。。

网站优化如此重要,我们可以做的还有很多,今天你优化了吗?

 

作者:白树

出处:http://peunzhang.cnblogs.com/

目录
相关文章
|
开发工具
最低成本尝试做游戏的方式
如果说有 100 个人想过去做游戏的话,那么最终大概只有不到 20 个人真的去尝试了,这 20 个尝试的人里面,最终可能有两三个人真的做出了游戏,这个是尝试做游戏领域里的二八法则。 你或许就曾经有过想要做游戏的想法 ,之后因为各种各样的原因没有去尝试。回想那些我们曾经想要去做,但是最终却没有去做的事情,大部分的原因可能是因为做这件事情的成本太高。
129 0
|
编解码 运维 监控
轻松处理高于平常10倍的视频需求,还能节省60%的IT成本,蓝墨做对了什么?
如果说Serverless到底解决了什么问题,核心就是节约成本、节省精力。
3341 14
轻松处理高于平常10倍的视频需求,还能节省60%的IT成本,蓝墨做对了什么?
|
负载均衡 算法 Serverless
函数计算助力石墨文档突破性能瓶颈,有效节省58%服务器成本
石墨文档 是中国第一款支持云端协作的企业办公服务软件(功能类比于Google docs、Quip等),可以实现多成员多终端的在线实时协作,同步响应速度达到毫秒级,是团队协作的最佳选择。 石墨文档还是一款具有中国式美感的科技产品,2015 年获得极客公园最佳互联网创新产品 50 强。
5038 8
|
物联网
挑战设备接入量,节省最高92%资费
2020年3月31日前,设备接入达到指定量级,即可获得1.5-0.8折折扣,物联网卡和物联网平台设备接入服务劲省92%资费。
26736 0
挑战设备接入量,节省最高92%资费
|
Web App开发 前端开发 Unix
使用WebP节省网站流量和存储空间,加快网站加载速度
使用WebP节省网站流量和存储空间,加快网站加载速度
859 0
|
前端开发 数据安全/隐私保护 缓存
低成本打造一个带宽无限的网站(三)
前端代理 HTML5 时代的黑科技层出不穷,但最具创新的也许要数 Service Worker,它甚至可以颠覆传统的 B/S 网络架构。 顾名思义,Service 是服务程序,而 Worker 常用于多线程。
1452 0
阿里云批量计算推出预付费模式,最高节省用户60%成本
近日,阿里云批量计算推出预付费模式,适用于有稳定长期计算量需求的批量计算客户,用户通过包月方式创建集群,可以降低计算资源成本。
1657 0
这就是多媒体开发 视频竟然比连续图片更省带宽
多媒体开发技术不仅技术栈庞大,许多技术需要深度钻研,学习起来并不容易。
1544 0
|
Web App开发 编解码 UED
YouTube高效传输策略:节省14%带宽 用户体验提升
视频平台会侦测用户端的带宽来调整码率及分辨率,但通常只考虑到编码器的比特率率--质量关联,忽略了用户的可用带宽影响。
2040 0