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

前端圖片優(yōu)化七大方法
 
網(wǎng)頁在加載的過程中，圖片資源在網(wǎng)頁加載中占有很大容量比例，所以對圖片進(jìn)行優(yōu)化，是提高前端性能的一個重要的方法，本文總結(jié)了七大優(yōu)化方法：
 

• 使用JPG圖片

Jpg格式的圖片是一種高效的有損壓縮圖片，它是通過損失一部分圖像數(shù)據(jù)的方式來極大地壓縮圖片的容量，雖然損失了圖像數(shù)據(jù)，但是在高效率壓縮的同時，圖片的觀看效果也不會相差很大，所以這種格式的圖片廣泛地應(yīng)用在網(wǎng)頁制作中，這種格式不能使用透明背景，所以在網(wǎng)頁中，只要是圖片不需要透明背景，就可以使用這種圖片，我們利用Photoshop壓縮這種圖片時，可以根據(jù)圖片不同的用途，設(shè)置不同的壓縮比例，還可以設(shè)置圖片的連續(xù)屬性，這樣圖片在加載時，可以按照從模糊到清晰的方式加載，提高用戶體驗。如圖：
 
 
 

• 使用雪碧圖

所謂的“雪碧圖”，是指將多張網(wǎng)頁上使用的小圖片合并成一張圖片，這種圖片叫做”雪碧圖”，使用“雪碧圖”優(yōu)化的原理其實就是減少http請求數(shù)，我們知道，網(wǎng)頁上使用的一張圖片，在加載時就會發(fā)送一個http請求，讓服務(wù)器下載這張圖片，如果有十張圖片，就會有十個http請求，而http請求，在前端性能上是很奢侈的事情，一般為了前端性能會盡量減少http請求數(shù)，我們可以將那十張圖合并成一張圖片，利用CSS的技術(shù)，將圖片的不同部分應(yīng)用在網(wǎng)頁的不同地方，這樣就可以將十個http請求減少至一個http請求，極大地優(yōu)化的前端的性能，這是一個常用的技術(shù)，下圖就是facebook使用的雪碧圖，它們是一張圖片：
 
 
 
 

• 圖片使用base64編碼

圖片使用base64編碼，就是將圖片數(shù)據(jù)編碼成base64編碼的字符串，我們在CSS樣式中可以直接使用這個字符串作為要加載的圖片數(shù)據(jù)，節(jié)省了一個http請求數(shù)，而且方便CSS的維護(hù)，比如說，我們在網(wǎng)頁中要使用下面這個小圖標(biāo)的圖片作為背景，圖片的名稱為:shutoff.jpg，  在CSS中的偽代碼如下：

	.icon{ background:url( ..images/shutoff.jpg ); }

 如果將這張圖片轉(zhuǎn)化為base64編碼，可以寫成如下格式：
 

	.icon{ background:url("data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL....");

此時圖片的數(shù)據(jù)直接嵌入到了CSS樣式中，CSS就不用外鏈這張圖片了。

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