加速圖片顯示-網頁設計教程

來源:藍色理想作者:一葉千鳥更新時間:2007-06-06點擊:

加速的要害，不是降低重量，而是減少個數。假如重量在200K以內，只要網絡不是非凡慢，效率都差不多。但是，假如圖片個數多一倍，效率將明顯低一個檔次。

傳統切圖講究精細，圖片規格越小越好，重量越小越好，其實規格大小無所謂，計算機統一都按Byte計算。客戶端每顯示一張圖片都會向伺服器發送請求，所以，圖片越多請求次數越多，造成延遲的可能性也就越大。因為一張圖片的傳輸時間，通常遠小于請求等待的時間。

減少圖片的三個技巧(CSS Sprite)：

1. 圖片限制(Image Slicing)

典型如文本編輯器，小圖標非凡多，打開時一張張跑出來，給用戶的感覺很不好。假如能用一張圖解決，則不會有這個問題，比如百度空間、163博客、Gmail都是這么做的。

2. 單圖轉滾(Single-image Rollovers)

觸發切換圖片的需求，傳統方案得重新請求新圖片，因為網絡問題經常造成停留或等待。假如能把多種狀態合并成一張圖，就能完美解決，然后再使用背景圖技術模擬動態效果。

3. 延長背景(Extend Background Image)

假如圖片的某邊可以背景平鋪無限延長，則不需要每個角、每條邊單獨搞出來，圖片能少一個就少一個。其實，這個理論還可以擴展到四角容器里，好處是能大大簡化HTML Structure。

綜合案例

網頁設計教程