雪碧圖過(guò)時(shí)了嗎？

1. 當(dāng)前形式

目前網(wǎng)上有一些言論說(shuō)雪碧圖已經(jīng)過(guò)時(shí)了，理由一般主要為以下幾個(gè)觀點(diǎn)：

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

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

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

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

2. 雪碧圖的劣勢(shì)

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

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

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

新浪微博

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

再點(diǎn)開(kāi)這個(gè)圖片可以發(fā)現(xiàn)：

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

百度

當(dāng)我們點(diǎn)開(kāi)百度的時(shí)候會(huì)發(fā)現(xiàn)它的圖標(biāo)也是雪碧圖：


它的圖標(biāo)是靠著雪碧圖中不同的圖標(biāo)來(lái)切換顏色的。

淘寶

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


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

4. 小結(jié)

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

但雪碧圖也并不僅僅只是能做個(gè)圖標(biāo)而已，如果是幀動(dòng)畫技術(shù)的話雪碧圖是難以替代的。

好多網(wǎng)頁(yè)小游戲或者一些網(wǎng)頁(yè)炫酷動(dòng)畫就用到了雪碧圖的幀動(dòng)畫技術(shù)，那么接下來(lái)就讓我們開(kāi)啟雪碧圖的學(xué)習(xí)之旅吧！