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

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

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

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

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

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

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

1、圖片格式的選擇

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

圖片格式選擇過程如下：

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

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

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

3、圖片壓縮

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

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

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

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

5、使用base64編碼代替圖片

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

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

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

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

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

7、圖片懶加載

在頁面圖片非常多的情況下，可以使用懶加載。只加載第一屏的圖片，當(dāng)用戶通過滾動訪問后面的內(nèi)容時再加載相應(yīng)圖片。方法是先用一張極小的占位圖代替圖片，占位圖只需下載一次，將原本圖片的src存儲在另一個屬性中，判斷當(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)化方案，也可以在下面留言和大家分享~