使用雪碧圖的優點:
減少加載網頁圖片時對服務器的請求次數
可以合並多數背景圖片和小圖標,方便在任何位置使用,這樣不同位置的請求只需要調用一個圖片,從而減少對服務器的請求次數,降低服務器壓力,同時提高了頁面的加載速度,節約服務器的流量。
提高頁面的加載速度
sprite 技術的其中一個好處是圖片的加載時間(在有許多 sprite 時,單張圖片的加載時間)。由所需圖片拼成的一張 GIF 圖片的尺寸會明顯小於所有圖片拼合前的大小。單張的 GIF 只有相關的一個色表,而單獨分割的每一張 GIF 都有自己的一個色表,這就增加了總體的大小。因此,單獨的一張 JPEG 或者 PNG sprite 在大小上非常可能比把一張圖分成多張得來的圖片總尺寸小。
減少鼠標滑過的一些bug
IE6不會主動預加載鼠標滑過即a:hover中的背景圖片,所以,如果使用多張圖片,鼠標滑過會出現閃白的現象。使用CSS雪碧,由於一張圖片即可,所以不會出現這種現象。
使用雪碧圖的缺點:
CSS雪碧的最大問題是內存使用
除非這個雪碧圖片是被非常小心的組織,你就會最終使用大量的無用的空白。一個例子是來自於WHIT TV的網站。注意這是一個1299×15,000像素的PNG圖片。它也被壓縮的很好——實際下載大小只有大概26K — 但是瀏覽器並不會渲染壓縮后的圖片數據。當這個圖片被下載並被解壓縮之后,它將占用差不多75MB的內存 (1299 * 15000 * 4)。如果這個圖片並沒有使用alpha透明,它將會被優化至1299 * 15000 * 3,但是要在損失渲染速度的情況下。即使那樣,我們也會討論55MB。這張圖片的大部分其實就是
空白,那里什么都沒有,沒沒有任何有用的內容。只是加載 WHIT主頁 就會導致你的瀏覽器的內存占用上升到至少75+MB,僅僅是因為那一張圖片。(PS:遺憾的是,該網站最近已經改版,文中提到的圖片已經不存在了)
影響瀏覽器的縮放功能
如果一個使用CSS雪碧的頁面使用一些瀏覽器提供的整頁縮放功能縮放了,瀏覽器就需要做一些額外的工作來糾正這些圖片邊緣的行為——基本上來說,是為了避免雪碧中相鄰的圖片被“露進來”。這對於小圖片沒有什么問題,但是對於大圖片會是一個性能下降。
拼圖維護比較麻煩
拼合這么多圖片,需要耐心。同時還要時刻思考如何在使用這個圖片是不會產生相互的影響。將又瘦又高的圖片和又寬又矮的圖片放到一起時,不容易操作。如果要修改雪碧中的一個圖片,你就要修改整張圖片,這無疑會增大工作量。
使CSS的編寫變得困難
如果CSS雪碧足夠復雜,則大大增加了CSS的代碼量和難度,讓維護和修改變得困難起來。
CSS 雪碧調用的圖片不能被打印
CSS 雪碧調用的圖片不能被打印,除非在@media中特別添加 print聲明。
錯誤得使用 Sprites 影響可訪問性
一些剛入門的開發人員會為了節省 HTTP 請求數(這是使用 CSS Sprite 一直強調的好處)而把所有的圖片都當背景圖片來處理 – 甚至是那些傳達重要信息的圖片。結果會導致一個缺乏可訪問性的網站,也會降低 HTML 中 title 和 alt 的潛在益處。
因此,CSS sprite 本身沒錯,而且也不會引發可訪問性問題(事實上,正確得使用會提高可訪問性)。但是不分對錯得過度使用 sprite 會阻礙具有可訪問性和生產率方面的網頁建設進程。
上面都是百度里的內容!!!
下面我要說的是:
我們在使用雪碧圖的時候,就必須得衡量一下我們最需要的是哪個方面的優化。
我在實際項目中碰到過的問題如下:
1.考慮網絡環境比較差的情況,例如:印度的那每秒幾K的網速。在那么慢的速度下,如果使用雪碧圖,圖的加載速度將會很慢,嚴重影響了用戶體驗。所以這種情況下,雪碧圖不合適。
2.在移動端頁面上夜間模式下,你知道會出現什么情況嗎?
使用雪碧圖,都是以背景圖的方式插入頁面中的,日間模式下看起來沒什么區別。但是換到夜間模式下,那就是一個悲劇(如果產品不接受的話)。因為插入背景圖的方式在夜間模式下會變得很不清晰,沒有插入img元素那么清晰可見。但是圖在一個頁面中的重要性是很大,如果產品接受不了,那就必須得換成插入img方式了,雪碧圖也就不適用了。