雪碧圖過時了嗎？

1. 當前形式

目前網上有一些言論說雪碧圖已經過時了，理由一般主要為以下幾個觀點：

• 在 HTTP2 的場景下雪碧圖便失去了意義；
• 一些簡單的圖標直接用 CSS 或者 SVG 就可以搞定；
• 圖片不能靈活設置樣式；
• 一張圖崩了整個網頁的圖標就都崩了；
• 圖標位置確定后就不好再修改了；
• 為了適應不同的分辨率需要準備多個規格的圖片。

首先不得不承認的是由于 SVG、iconfont 的沖擊，雪碧圖確實比以前用的少了，iconfont 也確實很好用。

但是依然還是有相當一部分項目在用雪碧圖，證明其依然還在發揮余熱。

而且在序列幀動畫這一領域內雪碧圖的用處還很大，最后的兩個章節我們就會講到序列幀動畫以及為何適用于雪碧圖。

2. 雪碧圖的劣勢

既然網上有這種言論存在，那么必然證明雪碧圖也存在著一定的劣勢：

• 要預留足夠的空間，防止板塊內出現不必要的背景；
• 自適應頁面時，如果雪碧圖如果不夠寬，很容易出現背景斷裂；
• 在開發的時候比較麻煩，要通過 PhotoShop 或其他工具測量計算每一個背景單元的精確位置，這是體力活，雖然沒什么難度，但是很繁瑣；
• 如果某個圖標有少許改動，一般就要重新排列這張合并的圖片。

3. 那些在用雪碧圖的知名網站

新浪微博

咱們打開新浪微博，然后隨便找個帶皇冠的，按下F12鍵(Mac用戶按command+option+i)然后選中控制臺的箭頭，再點擊皇冠：

再點開這個圖片可以發現：

可以看到那些大 V 圖標皇冠圖標以及各種微博認證等圖標，都是放在了一張雪碧圖里(即使再牛的大 V，身份標志也是放在雪碧圖中的)。

百度

當我們點開百度的時候會發現它的圖標也是雪碧圖：


它的圖標是靠著雪碧圖中不同的圖標來切換顏色的。

淘寶

再來看看淘寶網，它也使用了一些雪碧圖來支持圖標的切換：


這三個網站幾乎是國內最流行的三個網站了，但是這還并沒有展現出雪碧圖的潛力，在最后我們將會以實戰的形式帶領大家使用雪碧圖來制作無限循環的炫酷動畫效果。

4. 小結

如果你有選擇困難癥的話，我可以給你個小小的建議：兼容性要求高的用雪碧圖、不怎么考慮兼容性的新項目用iconfont。

但雪碧圖也并不僅僅只是能做個圖標而已，如果是幀動畫技術的話雪碧圖是難以替代的。

好多網頁小游戲或者一些網頁炫酷動畫就用到了雪碧圖的幀動畫技術，那么接下來就讓我們開啟雪碧圖的學習之旅吧！