【原】一张图片优化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、广告的上下线时间等有关系。。

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