什麼是Data URI產生器？

Data URI 產生器將檔案轉換為 base64 編碼的 Data URI，可直接嵌入 HTML、CSS 或 JavaScript。為圖示、字型等小型素材省去額外的 HTTP 請求。

拖入最大 20 MB 的檔案，工具會自動辨識 MIME 類型，把位元組做 base64 編碼，再給你三段可直接貼上的程式碼：原始 data URI、CSS 背景圖規則，以及 HTML img 標籤。圖片附即時預覽，可以在丟到正式環境之前先看出空白或損毀的輸出。你也可以貼上純文字來編碼 SVG 或 JSON 字串、在編碼前縮小大圖讓 URI 更小、在 MIME 類型辨識錯誤時手動修正、一次編碼多個檔案、直接從網址抓取遠端檔案，或切換到解碼模式，貼上 data URI 把原始檔案還原下載。

使用方法

1. 用選擇器上傳檔案，或切換到文字模式貼上一段字串（SVG、JSON、CSS）來編碼。
2. 工具自動將其編碼為 base64 並產生包含正確 MIME 類型的完整 Data URI。
3. 複製 Data URI，用於 img src 屬性、CSS background-image 或 JavaScript 程式碼。

何時使用

• 在不託管任何資源的單檔 HTML demo 中嵌入小 logo 或圖示。
• 把圖片內嵌進電子郵件,即便遠端載入被擋也能顯示。
• 把字型或 SVG 貼進 CSS,少一個阻塞渲染的請求。

結果

將一個 2KB 的 favicon.png 轉換為 Data URI 後直接貼到 HTML 中——每次頁面載入少一個網路請求。

常見問題

為什麼編碼後的 data URI 大概比原檔大 33%?

Base64 用 4 個 ASCII 字元代表 3 個位元組的二進位資料,所以增加 33%。HTTP 回應啟用 gzip 後大多能壓回來,但磁碟上的 HTML 或 CSS 檔案確實比原始資源大。

data URI 的實用大小上限是多少?

未編碼前約 10 KB 是內嵌合理上限。超過後瀏覽器仍會解析,但快取優勢消失(每次開啟頁面都要重新解析),HTML 或 CSS 檔也變得難維護。更大的資源建議用一般託管方式。

可以把 data URI 拿來當 CSS 背景圖嗎?

可以。工具會直接給你完整 CSS 規則,將 URI 包在 url() 內寫進 background-image。首次繪製時由瀏覽器解碼,小圖示保持內嵌,省下一次拖慢首屏的網路請求。

瀏覽器會像普通圖片一樣快取 data URI 嗎?

不會。data URI 是父文件的一部分,只有父文件被快取時它才被快取。同一張圖被 20 個頁面引用,就要解析 20 次。多頁共用資源,普通託管 URL 整體上更快。

data URI 在 HTML 電子郵件能用嗎?

Gmail 和 Apple Mail 能正常顯示,Windows 版 Outlook 會直接把它移除。若要相容主流郵件用戶端,改用 CID 參照附件的方式內嵌圖片,比把 data URI 塞進 HTML 內文更穩。

相關工具