這篇文章介紹一款線上的圖檔 base64 編碼利器 — Duri.me。data URI 圖檔是 base64 編碼的圖檔檔案，可以嵌入到 HTML 或者 CSS 檔案中，能夠減少 HTTP 請求，提高網頁加載速速。
<a href="http://www.cnblogs.com/lhb25/archive/2012/06/12/8-free-tools-for-testing-website-speed.html" target="_blank">推薦8款很棒的測試網站速度的免費工具</a>
<a href="http://www.cnblogs.com/lhb25/archive/2012/10/19/10-free-html-admin-templates.html" target="_blank">10套精美的免費網站背景管理系統模闆</a>
<a href="http://www.cnblogs.com/lhb25/archive/2012/11/20/cloud-ide-for-developers.html" target="_blank">開發者必備的8個最佳雲端內建開發環境</a>
<a href="http://www.cnblogs.com/lhb25/archive/2012/09/27/10-css3-online-generator-tools.html" target="_blank">十款精心挑選的線上CSS3代碼生成工具</a>
<a href="http://www.cnblogs.com/lhb25/archive/2012/06/18/8-useful-and-free-web-application-security-testing-tools.html" target="_blank">推薦8款優秀的免費 Web 安全測試工具</a>
<code> mediatype </code>是一種MIME類型字元串, 例如 "<code>image/jpeg</code>" 代表 JPEG 圖像檔案。如果省略這個參數，則預設值為<code>text/plain;charset=US-ASCII。</code>如果資料是文本類型, 你可以直接将文本嵌入在 data: 後面 （根據文本類型以及編碼，使用合适的 HTML 實體編碼或者百分号編碼）。如果是二進制資料，你可以将資料進行 base64 編碼之後再進行嵌入。
下面是一些示例：
簡單的text/plain類型資料
base64編碼過的資料
一個HTML文檔源代碼 <code><h1>Hello, World</h1></code>
在 Firefox 浏覽器中，将一個 nsIFile 轉換為 data URI 的方法：
下文介紹一些在使用 <code>data</code> URIs 時遇到的常見問題：
文法：data URIs 的格式很簡單，但很容易會忘記了在 "data:" 協定名後面必須有一個逗号(MIME類型和"base64"都是可省略的)，或者在對資料進行 base64 編碼時發生錯誤。
HTML代碼格式化：一個data URI 是作為了一個檔案内的檔案，是以在嵌入其他文檔的内部時，這個data URI 所在的行就會非常的長，是以應當用空白符（換行符、制表符、 空格）來對它進行格式化，但如果資料是經過base64編碼過的,就可能會遇到一些問題。
長度限制：雖然 Mozilla 支援無限長度的 data URIs,但是标準中并沒有規定浏覽器必須支援無限長度的 data URIs。比如 Opera 11 限制 data URIs 的長度最多為 65000 個字元。
不支援查詢字元串：一個 data URI 的資料字段是沒有結束标記的，是以嘗試在一個data URI後面添加查詢字元串會導緻,查詢字元串也一并被當作資料字段。例如：
這個data URI代表的HTML源檔案内容為：
注意：從Firefox 6開始，data URI 中的錨點标記(#)會像在其他普通網頁 URI 上一樣可被識别,是以,如果想要表示檔案内容中的 "#"，必須将它轉義為'%23'。
浏覽器相容性：已經支援 data: 協定的浏覽器有 Opera 7.20 及其以上版本，Safari 和 Konqueror。Internet Explorer 7 及以下版本不支援，Internet Explorer 8 及以上版本隻支援在 CSS 檔案中使用 data URIs 格式的圖檔。
<a href="http://www.cnblogs.com/lhb25/archive/2012/08/08/ajax-jquery-pagination-plugin-tutorial.html" target="_blank">精心挑選的優秀 jQuery Ajax 分頁插件</a>
<a href="http://www.cnblogs.com/lhb25/archive/2012/08/31/free-application-icon-sets.html" target="_blank">讓人愛不釋手的13套精美網頁圖示素材</a>
<a href="http://www.cnblogs.com/lhb25/archive/2012/11/08/showcase-of-really-awesome-css3-demo.html" target="_blank">Web前沿：那些讓人驚歎的CSS3應用</a>
歡迎任何形式的轉載，但請務必注明出處。