引言
圖片處理在前端工作中可謂占據了很重要的一壁江山。而圖片的Base64編碼可能相對一些人而言比較陌生，本文不是從純技術的角度去討論圖片的base64編碼。標題略大，不過只是希望通過一些淺顯的論述，讓你知道什么是圖片的base64編碼，為什么我們要用它，我們如何使用並且方便的使用它，並讓你懂得如何去在前端的實際工作中運用它。
什么是base64編碼?
我不是來講概念的，直接切入正題，圖片的base64編碼就是可以將一副圖片數據編碼成一串字符串，使用該字符串代替圖像地址。
這樣做有什么意義呢？我們知道，我們所看到的網頁上的每一個圖片，都是需要消耗一個http請求下載而來的（所有才有了csssprites技術的應運而生，但是csssprites有自身的局限性，下文會提到）。
沒錯，不管如何，圖片的下載始終都要向服務器發出請求，要是圖片的下載不用向服務器發出請求，而可以隨着 HTML 的下載同時下載到本地那就太好了，而base64正好能解決這個問題。
那么圖片的base64編碼長什么樣子呢？舉個栗子。www.google.com的首頁搜索框右側的搜索小圖標使用的就是base64編碼。我們可以看到：
1 //在css里的寫法 2 #fkbx-spch, #fkbx-hspch { 3 background: url(data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=) no-repeat center; 4 5 ... 6 }
1 //在html代碼img標簽里的寫法 2 <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編碼，是不是很方便。
http://www.cnblogs.com/coco1s/p/4375774.html