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

网站优化如此重要，咱们能够作的还有不少，今天你优化了吗？