網站性能優化：動态縮略圖技術實作思路

　　在網站開發過程中，大家都是如何解決多尺寸圖檔縮略圖問題的呢？猶為典型的是電商網站，據了解，淘寶的圖檔縮略圖是直接存儲多張縮略圖的方式，以滿足各種情況下使用，因為它有牛逼的開源+自主開發的海量圖檔存儲架構作支撐。但是，我們在做網站時，并不可能直接搬牛逼的架構過來，就可以達到預期的效果，況且各種成本投入也是有限的。是以一般性能優化的原則大都是這樣：先考慮軟體的優化，再考慮硬體的更新，當然土豪客戶則除外。

　　很多網站可能沒有對圖檔進行縮略圖處理，上傳時圖檔可能幾百kb，在頁面也是直接加載幾百kb的圖檔大小，這樣極為占用帶寬，影響網站加載速度。也有很多網站的做法可能也是直接根據前端頁面所需求圖檔的尺寸，在上傳時就處理生成相應尺寸的縮略圖，但如果前端頁面布局進行調整時，可能就得調整縮略圖生成的尺寸，之前生成的圖檔也有可能需要重新生成。之前我在一個網站項目時就遇到這樣的問題，經過一系列地驗證，最終是采用動态縮略圖技術解決的，現在整理出來給大家分享分享。

　　其實，原理很簡單，通過高性能的圖檔壓縮算法，在一般處理程式（httphandler）對圖檔進行壓縮處理，圖檔路徑則直接指向httphandler，将圖檔路徑、需要壓縮的寬高等參數傳進去，實作動态壓縮。

　　在網站目錄下建立 resizeimage.ashx 檔案，代碼如下：

 　　圖檔壓縮算法中，有幾個參數可以根據自己的需求進行調整，比如：smoothingmode、interpolationmode、encoder.quality，反正圖檔的大小與圖檔品質成正比，也跟性能成反比，具體參數用法，請移步msdn檢視，是以大家根據實際需求進行取舍了。

　　在頁面需要調用地方，将img的src設定為resizeimage.ashx，這跟圖檔驗證碼處理方式一樣，如：

  1 <img runat="server"

src="~/resizeimage.ashx?src=/upload/20140428/www_ideek_cn.jpg&width=128&height=128"

/> 

　　這樣，一張圖檔可以在網站任意地方使用，圖檔經過壓縮後傳輸，通過google或firefox浏覽器開發者工具可以很明顯地看出圖檔大小效果和加載速度都有非常明顯的提升。

　　當然，可能很多人會問頻繁的計算對伺服器會産生性能影響，是以在實際使用過程中，可以根據自己的需求采用一些手段進行規避，比如引入緩存機制等，這些優化将會在後續文章中講解。