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

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

• 使用JPG圖片

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

• 使用雪碧圖

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

• 圖片使用base64編碼

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

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

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

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

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

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