【原】一張圖片優化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、廣告的上下線時間等有關係。。

網站優化如此重要，咱們能夠作的還有不少，今天你優化了嗎？