css sprite技術 – 減少網站圖片請求次數

     CSS Sprites在國內很多人叫css精靈,是一種網頁圖片應用處理方式。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去,這樣一來,當訪問該頁面時,載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。

     對於當前網絡流行的速度而言,不高於200KB的單張圖片的所需載入時間基本是差不多的,所以無需顧忌這個問題。加速的關鍵,不是降低重量,而是減少個數。

     傳統切圖講究精細,圖片規格越小越好,重量越小越好,其實規格大小無所謂,計算機統一都按byte計算。客戶端每顯示一張圖片都會向服務器發送請求。所以,圖片越多請求次數越多,造成延遲的可能性也就越大。

   CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的組合進行背景定位,background-position可以用數字能精確的定位出背景圖片的位置。

     優點:減少瀏覽器與服務器之間的通信次數

              a、一張圖片的大小會比很多張分散的圖片小

              b、這樣可以一次加載完圖片,例如做按鈕的普通和hover狀態時,如果用兩張圖片,那麼在一些瀏覽器下,hover的時候明顯有一個空白再切換圖片的過程,而如果合成一張圖片,通過background-position就不會有這種問題了。

              c、如果多個css樣式都會用到合成的圖片,那麼最後將它們放到一起來設置它們的背景圖片。如div1,div2 { background:url(..); } IE6下不會緩存圖片,這樣的話就避免了每次讀到一個樣式的時候都要重新加載同一張圖片

發佈了42 篇原創文章 · 獲贊 2 · 訪問量 5萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章