Python培訓(xùn)之前端圖片優(yōu)化七大方法（二）

• 使用SVG矢量圖片

前面說的幾種方式，使用的都是位圖，或者叫點(diǎn)陣圖，這里所說的矢量圖，指的是一種新的svg圖片格式，矢量圖片相對于位圖來說，容量更小，在顯示上圖像元素的邊緣光滑，不會出現(xiàn)鋸齒，矢量圖不足的地方是，它沒有位圖的色彩豐富，所以在使用單色的圖標(biāo)圖片的時候，使用svg，不僅可以提高性能，而且在顯示效果上也非常好，下面是位圖和矢量圖放大時的對比：
 
 
 
 

• 使用字體圖標(biāo)

所謂的字體圖標(biāo)，是指我們在網(wǎng)頁上使用的一些單色的圖標(biāo)，可以把這些圖標(biāo)做成自定義的字體，這些圖標(biāo)就沒必要用圖片來做，直接用特殊字體就可以實(shí)現(xiàn)，網(wǎng)上有集成的字體圖標(biāo)庫，我們可以下載使用，但是這些字體圖標(biāo)庫集成了許多不需要的圖標(biāo)，會增加下載的容量，建議使用阿里巴巴的字體圖標(biāo)庫，http://www.iconfont.cn/，在這個平臺上，UI可以將項(xiàng)目中用到的圖標(biāo)按照特定格式上傳，生成項(xiàng)目自定義的字體庫，也就是說，字體庫里面只包含項(xiàng)目要用的圖標(biāo)字體，這樣就可以節(jié)約字體庫的容量，提高性能，同時也可以方便前端的開發(fā)。
 

• 設(shè)置圖片文件的緩存

設(shè)置圖片的緩存，也就是設(shè)置圖片文件在客戶端緩存的時間，在多少時間期限之內(nèi)，讓用戶的請求直接使用本地的緩存圖片，而不用去服務(wù)器下載，這樣可以極大地提高前端的性能。設(shè)置文件的緩存有多種方式，可以結(jié)合幾種方式來設(shè)置。這種方法不僅僅適用于圖片文件，還適用于其他可以緩存的文件。
 
 

• 使用靜態(tài)資源服務(wù)器

所謂的靜態(tài)資源服務(wù)器，就是專門存儲靜態(tài)資源的服務(wù)器，比如說圖片資源，將圖片存儲在這種服務(wù)器上，這些圖片在頁面請求時，不會額外地增加cookie等信息，節(jié)約網(wǎng)絡(luò)傳輸?shù)娜萘?，靜態(tài)資源服務(wù)器不僅僅適用于圖片，還適用于其他的資源，比如公共的CSS樣式，文檔等等資源。
 
以上就是七種針對圖片優(yōu)化的方案，您可以根據(jù)項(xiàng)目的需要，選取特定的方案來對項(xiàng)目的圖片進(jìn)行優(yōu)化，提高前端的新能。

本文版權(quán)歸傳智播客Python培訓(xùn)學(xué)院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請注明作者出處。謝謝！
作者：傳智播客Python培訓(xùn)學(xué)院
首發(fā)：http://www.xamj520.com/python/