如何把圖片轉成 Base64 Data URI
把小圖示與浮水印直接 embed 進 HTML、CSS、JSON 或郵件範本——不必多一個 HTTP 請求，也不會找不到資源。
與本篇教學搭配使用的更多工具：
為什麼重要
交易郵件需要小 logo。遠端圖片連結在使用者郵件程式以「隱私」為由擋下時就失效。解法：把 logo inline 成 data:image/png;base64,...。代價是體積約 +33%，但極小資產（4 KB 以下）省下的延遲與保證顯示往往值得。同技巧也適用 favicon、CSS 背景圖、靜態站產生器裡的 SVG sprite。
三個實際場景
將 80×80 logo 編碼，把 data URI 放進 <img> 的 src。
不必「載入遠端圖片」提示
background-image: url(data:image/svg+xml;base64,...) 讓 bundle 自給自足。
少一個網路請求
縮圖編碼後 embed 在 JSON；客戶端不必再 fetch。
單次往返
操作說明
開啟 圖片轉 Base64。
拖入圖片
PNG、JPEG、WebP、GIF、SVG、ICO。工具透過瀏覽器 File API 讀檔。
選輸出格式
完整 data URI（
data:image/png;base64,...）——貼進src或 CSS。純 Base64——JSON 欄位由伺服器處理前綴時使用。選 URL 安全編碼
標準 Base64 的
+/適用 HTML／CSS。URL 安全（-_）適合塞進查詢字串或檔名。複製或下載
輸出文字亦可下載為
.txt給超長字串用。
來源
icon.svg (412 bytes)
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 2L2 22h20L12 2z"/>
</svg>Data URI
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyIDJMMiAyMmgyMEwxMiAyeiIvPjwvc3ZnPg==
實用技巧
- 只 inline 小資產（≤ 4 KB）。較大圖會膨脹 HTML／CSS／JSON，省請求的效益逆轉。
- 圖示優先內嵌 SVG。 Base64 壓縮 SVG 成效好且可縮放不失真。
- CSS 用
url()形式。background: url(data:image/png;base64,...)普遍支援。 - 郵件請在實際客戶端測試。 舊版 Windows Outlook 對 data URI 較挑；現代 Gmail／Apple Mail 通常沒問題。
常見陷阱
常見陷阱
結果 URI 超過 CSS 字元上限
舊式 CSS 解析器可能無法處理數 MB 的單行。大圖放 CDN，只 inline 小資產。
常見陷阱
JSON 裡 data URL 的「/」造成破版
JSON 不一定要跳脫 /，但部分編輯器會自動跳脫。改用 URL 安全 Base64 可避開。
常見陷阱
HTML 郵件 inline 圖與 CID 衝突
部分客戶端偏好 cid: 參照勝 data:。請在目標客戶端測試；必要時兩者都做後援。
何時不適合用這套
- 建置階段大量 inline——用 Webpack
url-loader或 Vite 的?inline匯入後綴。 - 編碼前先處理圖像——先用 圖片壓縮。
- 超大圖——在 JSON body 塞 5 MB Base64 很浪費；改用 CDN URL。
FAQ
體積懲罰多大？
Base64 約膨脹 33%。1 KB PNG 當 data URI 約 1.37 KB。
瀏覽器會快取 inline 圖嗎？
不會——每個使用該 data URI 的頁面都會重新解析位元組。因此只適合小資產。
圖片會上傳嗎？
不會。編碼器本機讀檔並直接輸出字串。
下一步
- 反向——把 data URI 貼回檔案用 Base64 轉圖片。
- 編碼前先 壓縮圖片 控制體積。
- 若目的地只要 JPEG，用 圖片格式轉換。