引言
圖片處理在前端工作中可謂占據(jù)了很重要的一壁江山。而圖片的Base64編碼可能相對一些人而言比較陌生，本文不是從純技術(shù)的角度去討論圖片的base64編碼。標(biāo)題略大，不過只是希望通過一些淺顯的論述，讓你知道什么是圖片的base64編碼，為什么我們要用它，我們?nèi)绾问褂貌⑶曳奖愕氖褂盟⒆屇愣萌绾稳ピ谇岸说膶嶋H工作中運用它。
什么是base64編碼?
我不是來講概念的，直接切入正題，圖片的base64編碼就是可以將一副圖片數(shù)據(jù)編碼成一串字符串，使用該字符串代替圖像地址。
這樣做有什么意義呢？我們知道，我們所看到的網(wǎng)頁上的每一個圖片，都是需要消耗一個http請求下載而來的（所有才有了csssprites技術(shù)的應(yīng)運而生，但是csssprites有自身的局限性，下文會提到）。
沒錯，不管如何，圖片的下載始終都要向服務(wù)器發(fā)出請求，要是圖片的下載不用向服務(wù)器發(fā)出請求，而可以隨著 HTML 的下載同時下載到本地那就太好了，而base64正好能解決這個問題。
那么圖片的base64編碼長什么樣子呢？舉個栗子。www.google.com的首頁搜索框右側(cè)的搜索小圖標(biāo)使用的就是base64編碼。我們可以看到：
1//在css里的寫法2#fkbx-spch,#fkbx-hspch{3background:url(data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=) no-repeat center;45...6}
1//在html代碼img標(biāo)簽里的寫法2
上面分別是圖片的base64編碼在css里面的寫法和在html
標(biāo)簽里的寫法。base64編碼長得就是這個樣子，當(dāng)然base64編碼不僅僅運用在圖片編碼，還可以：
thunder://QUFodHRwOi8vZG93bi5zYW5kYWkubmV0L3RodW5kZXI3L1RodW5kZXI3LjEuNS4yMTUyLmV4ZVpa
為什么要使用Base64編碼？
那么為什么要使用base64:URL傳輸圖片文件？上文也有提及，因為這樣可以節(jié)省一個http請求。圖片的base64編碼可以算是前端優(yōu)化的一環(huán)。效益雖小，但卻缺能積少成多。
說到這里，不得不提的是CssSprites技術(shù)，后者也是為了減少http請求，而將頁面中許多細(xì)小的圖片合并為一張大圖。那么圖片的base64編碼和CssSprites有什么異同，又該如何取舍呢？
所以，在這里要明確使用base64的一個前提，那就是被base64編碼的圖片足夠尺寸小。以博客園的logo為例：
如下圖所示，博客園的Logo只有3.27KB，已經(jīng)很小了，但是如果將其制作轉(zhuǎn)化成base64編碼，生成的base64字符串編碼足足有4406個。即便base64編碼能夠被gzip壓縮，壓縮率能達(dá)到50%以上，想象一下，一個元素的css樣式編寫居然超過了2000個字符，那對css整體的可讀性將會造成十分大的影響，代碼的冗余使得在此使用base64編碼將得不償失。
那么，是不是表示base64編碼無用武之地呢？不然。當(dāng)頁面中的圖片滿足以下要求，base64就能大顯生手。
如果圖片足夠小且因為用處的特殊性無法被制作成雪碧圖（CssSprites），在整個網(wǎng)站的復(fù)用性很高且基本不會被更新。那么此時使用base64編碼傳輸圖片就可謂好鋼用在刀刃上，思前想后，符合這個規(guī)則的，有一個是我們經(jīng)常會遇到的，就是頁面的背景圖background-image。在很多地方，我們會制作一個很小的圖片大概是幾px*幾px，然后平鋪它頁面當(dāng)背景圖。因為是背景圖的緣故，所以無法將它放入雪碧圖，而它卻存在網(wǎng)站的很多頁面，這種圖片往往只有幾十字節(jié)，卻需要一個http請求，十分不值得。那么此時將它轉(zhuǎn)化為base64編碼，何樂而不為？
下面是一個只有50字節(jié)的2*2的的背景圖。將其轉(zhuǎn)化成base64編碼，只有100多個字符，相比一個http請求，這種轉(zhuǎn)換無疑更值得推崇。
CssSprites與Base64編碼
簡單陳述一下我對何時這使用這兩種優(yōu)化方法的看法。
使用CssSprites合并為一張大圖：
頁面具有多種風(fēng)格，需要換膚功能，可使用CssSprites
網(wǎng)站已經(jīng)趨于完美，不會再三天兩頭的改動（例如button大小、顏色等）
使用時無需重復(fù)圖形內(nèi)容
沒有base64編碼成本，降低圖片更新的維護難度。（但注意Sprites同時修改css和圖片某些時候可能造成負(fù)擔(dān)）
使用base64直接把圖片編碼成字符串寫入CSS文件：
無額外請求
對于極小或者極簡單圖片來
可以被gzip。（通過gzip對base64數(shù)據(jù)的壓縮能力通常和圖片文件差不多或者更強）
降低css維護難度
可像單獨圖片一樣使用，比如背景圖片重復(fù)使用等
沒有跨域問題，無需考慮緩存、文件頭或者cookies問題
更便捷的將圖片轉(zhuǎn)化為Base64編碼
將圖片轉(zhuǎn)化為base64編碼有許多工具，例如本文中我所使用的http://www.pjhome.net/web/html5/encodeDataUrl.htm，但是很多這些網(wǎng)站是國外網(wǎng)站，經(jīng)常被墻登陸不了。這里介紹一個更為快捷的方法，就是利用Chrome瀏覽器（我想FEer都應(yīng)該有Chrome瀏覽器吧=。=）。
在chrome下新建一個窗口，然后把要轉(zhuǎn)化的圖片直接拖入瀏覽器，打開控制臺，點Source，如下圖所示，點擊圖片，右側(cè)就會顯示該圖片的base64編碼，是不是很方便。
