網頁圖片Base64編碼深入研究

引言

圖片處理在前端工作中可謂佔據了很重要的一壁江山。而圖片的Base64編碼可能相對一些人而言比較陌生，本文不是從純技術的角度去討論圖片的base64編碼。標題略大，不過只是希望通過一些淺顯的論述，讓你知道什麼是圖片的base64編碼，為什麼我們要用它，我們如何使用並且方便的使用它，並讓你懂得如何去在前端的實際工作中運用它。

什麼是base64編碼?　　

我不是來講概念的，直接切入正題，圖片的base64編碼就是可以將一副圖片資料編碼成一串字串，使用該字串代替影像地址。

這樣做有什麼意義呢？我們知道，我們所看到的網頁上的每一個圖片，都是需要消耗一個http請求下載而來的（所有才有了csssprites技術的應運而生，但是csssprites有自身的侷限性，下文會提到）。

沒錯，不管如何，圖片的下載始終都要向伺服器發出請求，要是圖片的下載不用向伺服器發出請求，而可以隨著 HTML 的下載同時下載到本地那就太好了，而base64正好能解決這個問題。

那麼圖片的base64編碼長什麼樣子呢？舉個例子。www.google.com的首頁搜尋框右側的搜尋小圖示使用的就是base64編碼。我們可以看到：

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

    ...
}

//在html程式碼img標籤裡的寫法
<img src="data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=">

上面分別是圖片的base64編碼在css裡面的寫法和在html<img>標籤裡的寫法。base64編碼長得就是這個樣子，當然base64編碼不僅僅運用在圖片編碼，還可以：

thunder://QUFodHRwOi8vZG93bi5zYW5kYWkubmV0L3RodW5kZXI3L1RodW5kZXI3LjEuNS4yMTUyLmV4ZVpa（不要複製我我真的不是種子）

嘿嘿沒錯，迅雷的“專用地址”也是用Base64加密的，有興趣自行google，不做贅述。

為什麼要使用Base64編碼？　　

那麼為什麼要使用base64傳輸圖片檔案？上文也有提及，因為這樣可以節省一個http請求。圖片的base64編碼可以算是前端優化的一環。效益雖小，但卻缺能積少成多。

說到這裡，不得不提的是CssSprites技術，後者也是為了減少http請求，而將頁面中許多細小的圖片合併為一張大圖。那麼圖片的base64編碼和CssSprites有什麼異同，又該如何取捨呢？

所以，在這裡要明確使用base64的一個前提，那就是被base64編碼的圖片足夠尺寸小。以部落格園的logo為例：

如圖所示，部落格園的Logo只有3.27KB，已經很小了，但是如果將其製作轉化成base64編碼，生成的base64字串編碼足足有4406個,也就是說，圖片被編碼之後，生成的字串編碼大小一般而言都會比原檔案稍大一些。即便base64編碼能夠被gzip壓縮，壓縮率能達到50%以上，想象一下，一個元素的css樣式編寫居然超過了2000個字元，那對css整體的可讀性將會造成十分大的影響，程式碼的冗餘使得在此使用base64編碼將得不償失。

那麼，是不是表示base64編碼無用武之地呢？不然。當頁面中的圖片滿足以下要求，base64就能大顯生手。

如果圖片足夠小且因為用處的特殊性無法被製作成雪碧圖（CssSprites），在整個網站的複用性很高且基本不會被更新。那麼此時使用base64編碼傳輸圖片就可謂好鋼用在刀刃上，思前想後，符合這個規則的，有一個是我們經常會遇到的，就是頁面的背景圖background-image。在很多地方，我們會製作一個很小的圖片大概是幾px*幾px，然後平鋪它頁面當背景圖。因為是背景圖的緣故，所以無法將它放入雪碧圖，而它卻存在網站的很多頁面，這種圖片往往只有幾十位元組，卻需要一個http請求，十分不值得。那麼此時將它轉化為base64編碼，何樂而不為？

下面是一個只有50位元組的2*2的的背景圖。將其轉化成base64編碼，只有100多個字元，相比一個http請求，這種轉換無疑更值得推崇。

CssSprites與Base64編碼　　

簡單陳述一下我對何時這使用這兩種優化方法的看法。

使用CssSprites合併為一張大圖：

• 頁面具有多種風格，需要換膚功能，可使用CssSprites
• 網站已經趨於完美，不會再三天兩頭的改動（例如button大小、顏色等）
• 使用時無需重複圖形內容
• 沒有base64編碼成本，降低圖片更新的維護難度。（但注意Sprites同時修改css和圖片某些時候可能造成負擔）

使用base64直接把圖片編碼成字串寫入CSS檔案：

• 無額外請求
• 對於極小或者極簡單圖片
• 可以被gzip。（通過gzip對base64資料的壓縮能力通常和圖片檔案差不多或者更強）
• 降低css維護難度
• 可像單獨圖片一樣使用，比如背景圖片重複使用等
• 沒有跨域問題，無需考慮快取、檔案頭或者cookies問題

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

將圖片轉化為base64編碼有許多工具，例如本文中我所使用的 http://www.pjhome.net/web/html5/encodeDataUrl.htm ，但是很多這些網站是國外網站，經常被牆登陸不了。這裡介紹一個更為快捷的方法，就是利用Chrome瀏覽器（我想FEer都應該有Chrome瀏覽器吧=。=）。

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