每個(gè)前端網(wǎng)站都有可能引入很多的圖片來(lái)達(dá)到酷炫或者展示的效果，有人會(huì)問(wèn)：為什么非要用圖片？因?yàn)橛行┘夹g(shù)上達(dá)不到的效果展示，只能用圖片來(lái)代替，比如淘寶天貓京東這些商城的酷炫的創(chuàng)意廣告圖。

圖像是web上提供的最基本的內(nèi)容類型之一，一張圖片勝過(guò)千言萬(wàn)語(yǔ)。但是如果你不小心的話，圖片大小有時(shí)高達(dá)幾十兆。而且圖片越多請(qǐng)求次數(shù)越多，造成延遲的可能性也就越大。

本文就和大家分享一些圖片優(yōu)化的技巧，希望能對(duì)大家有所幫助。

為什么要對(duì)圖片進(jìn)行優(yōu)化？

對(duì)于大多數(shù)前端工程師來(lái)說(shuō)，圖片就是UI設(shè)計(jì)師（或者自己）切好的圖，你要做的只是把圖片丟進(jìn)項(xiàng)目中，然后用以鏈接的方式呈現(xiàn)在頁(yè)面上，而且我們也經(jīng)常把精力放在項(xiàng)目的打包優(yōu)化構(gòu)建上，如何分包，如何抽取第三方庫(kù)……..有時(shí)我們會(huì)忘了，圖片才是一個(gè)網(wǎng)站最大頭的那塊加載資源(見下圖)：

雖然圖片加載可以不不阻礙頁(yè)面渲染，但優(yōu)化圖片，絕對(duì)可以讓網(wǎng)站的體驗(yàn)提升一個(gè)檔次。

如何對(duì)圖片進(jìn)行優(yōu)化？

1、圖片格式的選擇

選擇圖片格式是優(yōu)化的第一步。我們經(jīng)常聽到的詞語(yǔ)包括矢量圖、標(biāo)量圖、SVG、有損壓縮、無(wú)損壓縮等等，我們首先說(shuō)明各種圖片格式的特點(diǎn)：

圖片格式選擇過(guò)程如下：

2、選擇適當(dāng)?shù)膱D片寬度尺寸（即響應(yīng)式圖片）

不管是pc還是移動(dòng)端，都會(huì)有很多不同尺寸的圖片，如果你做的是響應(yīng)式網(wǎng)站和移動(dòng)端的話，那么你就更需要考慮圖片尺寸的選擇問(wèn)題了。

移動(dòng)端的屏幕分辨率和尺寸太多，所以就可能需要不同的尺寸加載不同尺寸的圖片，這樣就節(jié)省了網(wǎng)站的訪問(wèn)流量，以及頁(yè)面渲染的效率。

3、圖片壓縮

選擇了正確的圖片格式，按照正確的大小生成了圖片后，要進(jìn)一步提升優(yōu)化效果，可以通過(guò)有損或無(wú)損壓縮來(lái)減少圖片的大小。

我們的目的是降低圖片的大小kb，有很多工具可以做。例如在智圖中壓縮圖片，選擇更小kb的圖片格式，以達(dá)到最優(yōu)的顯示效果。

4、合并圖片sprite（雪碧圖）

將多個(gè)頁(yè)面上用到的背景圖片合并成一個(gè)大的圖片在頁(yè)面中引用，這樣可以有效的較少請(qǐng)求個(gè)數(shù)，而且，而不影響開發(fā)體驗(yàn)，使用構(gòu)建插件可以做到對(duì)開發(fā)者透明。這種方法適用于頁(yè)面圖片多且豐富的場(chǎng)景。

5、使用base64編碼代替圖片

將圖片轉(zhuǎn)換為base64編碼字符串inline到頁(yè)面或css中，這樣就可以減少http的請(qǐng)求次數(shù)，并可以放到后臺(tái)數(shù)據(jù)庫(kù)中，只傳輸字符串，有較多的構(gòu)建工具可以直接實(shí)現(xiàn)。

但是這種方法僅限于圖片總數(shù)較少，而且圖片大小小于2KB的情況，否則圖片字符串會(huì)變得很長(zhǎng)很長(zhǎng)。

6、字體圖庫(kù)代替圖標(biāo)

隨著技術(shù)的更新和瀏覽器的更新，字體圖庫(kù)去代替一些圖標(biāo)我認(rèn)為還是極好的，使用字體圖庫(kù)你不僅可以改變大小，而且還可以改變顏色。

字體圖標(biāo)在多終端顯示還是比較有優(yōu)勢(shì)的。再也不用擔(dān)心放大圖標(biāo)顯示模糊，也不用擔(dān)心在蘋果的視網(wǎng)膜屏幕模糊，因?yàn)樗鞘噶康?。所以如果站點(diǎn)中很多圖標(biāo)是純色的，推薦使用字體圖標(biāo)。

7、圖片懶加載

在頁(yè)面圖片非常多的情況下，可以使用懶加載。只加載第一屏的圖片，當(dāng)用戶通過(guò)滾動(dòng)訪問(wèn)后面的內(nèi)容時(shí)再加載相應(yīng)圖片。方法是先用一張極小的占位圖代替圖片，占位圖只需下載一次，將原本圖片的src存儲(chǔ)在另一個(gè)屬性中，判斷當(dāng)圖片快進(jìn)入可視區(qū)域就將路徑賦值給src并下載圖片進(jìn)行展示。

圖片優(yōu)化既是一門藝術(shù)，也是一門科學(xué)，要找到圖片的最優(yōu)設(shè)置，需要按照許多維度進(jìn)行認(rèn)真分析：格式能力、編碼數(shù)據(jù)內(nèi)容、像素尺寸等。快去在實(shí)戰(zhàn)中練習(xí)上面所講的方法吧！如果你有更好的優(yōu)化方案，也可以在下面留言和大家分享~