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

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

• 使用JPG圖片

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

• 使用雪碧圖

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

• 圖片使用base64編碼

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

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

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

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

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

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