雪碧圖過時了嗎？

1. 當前形式

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

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

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

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

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

2. 雪碧圖的劣勢

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

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

3. 那些在用雪碧圖的知名網(wǎng)站

新浪微博

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

再點開這個圖片可以發(fā)現(xiàn)：

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

百度

當我們點開百度的時候會發(fā)現(xiàn)它的圖標也是雪碧圖：


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

淘寶

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


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

4. 小結(jié)

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

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

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