[前端性能提升]--圖片轉化為base64

圖片的 base64 編碼就是可以將一副圖片數據編碼成一串字符串，使用該字符串代替圖像地址

 

意義:網頁上的每一個圖片，都是需要消耗一個 http 請求下載而來的（所有才有了 csssprites 技術的應運而生，但是 csssprites 有自身的局限性）。

圖片的下載始終都要向服務器發出請求，要是圖片的下載不用向服務器發出請求，base64可以隨着 HTML 的下載同時下載到本地.減少https請求。

1 2 3 4

//在css里的寫法 #fkbx-spch, #fkbx-hspch {    background: url(data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP ///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=) no-repeat center; }

1 2	//在html代碼img標簽里的寫法 <img src= "data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=" >

什么樣的圖片可以轉為成base64編碼：

如果圖片足夠小且因為用處的特殊性無法被制作成雪碧圖（CssSprites），在整個網站的復用性很高且基本不會被更新。

更便捷的將圖片轉化為Base64編碼　　

將圖片轉化為 base64 編碼有許多工具，例如本文中我所使用的 http://www.pjhome.net/web/html5/encodeDataUrl.htm ，

方法2;

在 chrome 下新建一個窗口，然后把要轉化的圖片直接拖入瀏覽器，打開控制台，點 Source，如下圖所示，點擊圖片，右側就會顯示該圖片的 base64 編碼，是不是很方便。