站長之家-站標logo圖片
歡迎你來到站長之家!
攜手合作圖片
banner圖片
當前位置:網站首頁 >> 站長經驗 >>



站長之家分析CSS Sprites的優缺點及其使用場合


【發布人:本站站長    發布日期:2015-04-02】

關于CSS Sprites圖片拼合技術,是CSS制作網頁技術上用于快速展現圖片的特殊技巧之一。CSS Sprites又稱為CSS精靈,通常我們將之稱為“CSS圖像拼合”或“CSS貼圖定位”,它將網頁上能夠使用到的圖片整合到一張圖片上,然后通過CSS的定位圖片技術在瀏覽器上將這張大圖片上的一個個小圖片展現在相應的位置。

其作用主要是減少網頁在打開時的HTTP請求IIS的次數,加快網頁的顯示速度,主要是加快網頁上圖片的展現速度,提升瀏覽者的體驗效果。其實就是通過將多個圖片融合到一張圖里面,然后通過CSS里的background背景定位技術技巧布局網頁背景。由此可見,網頁上的圖片越多,在瀏覽器瀏覽網頁是所產生的http請求就越多,這將延長網頁加載時間,而使用CSS Sprites則只有一次http請求,所以圖片越多使用CSS Sprites的效果越顯著。

使用CSS Sprites雖然有其優勢所在,但也不是沒有缺點,另外在使用CSS Sprites時也要挑選一些場合,有些場合適合使用,有的場合不適合使用。下面,筆者就來為各位站長們分析一下CSS Sprites的優缺點及其使用場合的問題。

一、使用CSS Sprites的優缺點分析:
1、CSS Sprites的優點:
很明顯,CSS Sprites對于網站上有多個圖片的時候,可以明顯減少http請求的次數,加快網頁打開速度,尤其是加快加載圖片的速度,這對于有大量圖片的網頁非常適合使用。尤其是對于那些大型大流量網站,對于http請求非常看重,而采用這種CSS Sprites技術可以提升網頁打開速度,降低服務器的工作量,節省服務端資源,無形中提升了網站瀏覽性能,對用戶體驗非常有好處。但這在圖片較多的網站上非常有用,而在圖片不多的網站上則優勢并不明顯。

2、CSS Sprites的缺點:
使用CSS Sprites技術雖然可以減少大量圖片的http請求,圖片越多效果越明顯。但是圖片越多,站長們就需要花費更多的時間來把這一個個圖片拼合在一張大圖片上,這需要花費一定的時間,圖片越多花費的時間也越多。而且在圖片拼合的時候,站長還要注意圖片大小協調、合理有序,盡量占用最小的空間,防止拼合后的大圖片過大。在制作網頁的時候,站長還要通過photoshop或其他工具測量計算每一個單元圖片的精確位置和其長寬,不能少錯,這要求站長非常仔細,雖然沒什么難度,但是很麻煩,容易出錯,占用時間長,這是在是以站長的時間長,換取用戶打開網頁的時間短為代價。這還不是其缺點的全部,還有經過CSS Sprites拼合后的大圖片在維護時也很麻煩,一旦更換一個小單元圖片,就需要修改這個大圖片,而且還可能要修改CSS代碼里的圖片定位數字,這無形中增大了維護的難度。

CSS Sprites技術雖然有其明顯的有點,然而存在著平和圖片、測量定位數值、修改不便等缺點,一般小型網站、小流量網站、一般企業網站不推薦使用這種技術,尤其是那些經常更換產品圖片的網頁,更不要使用這種技術了。但這并不是說CSS Sprites技術沒有用武之地了,對于站長來說還是應該好好學習,靈活掌握的,這對于大型網站、大流量網站、圖片不經常更換的網站上可以推薦使用。

二、CSS sprites使用的場合:
CSS Sprites技術最適合使用在那些圖片較多的網站上,最好圖片都是一些小圖標類的圖片,比如列表前的小圖標、某些序列的圖片等,由于這些圖片較小,即便是很多小圖標拼合起來,也只能拼合起一張并不太大的圖片,而這些一個個小圖標又太多,會占用大量的http請求,這是使用CSS Sprites技術對于節省http請求次數的網站尤其適合。但如果網頁上有較大的圖片,比如較大的banner圖片,這樣的大圖片,一張圖片就頂得上數個小圖片,將這樣的大圖片拼合起來,就有點劃不來了,所以大圖片不推薦采用這種拼合圖片的CSS Sprites技術了。


(本頁地址為:http://www.hdfwko.tw/zzjy/zzjy-30.html,請尊重別人的勞動,不要復制和采集。轉載請注明本文出處)

信息顯示圖片
頁腳blank圖片

版權所有:站長之家    備案號:豫ICP備14011667-1號

四川快乐12开奖号