DataURL基本原理
在網頁中我們通常用下面的方式來引用一張圖片，這樣當我們請求網頁的時候，瀏覽器也會想服務器發起一個請求，去請求這張圖片。
<img src='images/test.jpg'>
現在有一種另一種方式：
<img src='data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAwAAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFzByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSpa/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJlZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uisF81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PHhhx4dbgYKAAA7'>
這種方式叫做DataURL技術，它是將圖片對應的二進制代碼，通過base64轉換成可以打印的字母數字的形式。
這種方式需要有要求src具有一定的格式：
data:圖片類型;base64,base64轉換成的數據
圖片類型可以為:images/gif,images/jpg,images/png等。
DataURL的優缺點
優點：
- 當圖片很小時，但是占用一個HTTP請求顯得太浪費時，可以用這個技術。
- 當圖片是服務器端生成，並且每個用戶都不一致的時候，例如驗證碼，有的網站的頭像也可以用這種技術。
缺點：
- base64轉換過后的圖片會比原來的圖片大1/3
- DataURL形式的圖片不會被瀏覽器所緩存。
DataURL的使用
可以直接在html中以圖片src的形式引用
<img src='data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAwAAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFzByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSpa/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJlZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uisF81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PHhhx4dbgYKAAA7'>
可以在CSS樣式中以url的形式引用：
background:url("data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAwAAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFzByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSpa/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJlZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uisF81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PHhhx4dbgYKAAA7");
關於base64編碼的知識，可以參考阮一峰老師的這篇文章：Base64筆記