Ad
DevToolXBase64 圖片轉碼
圖片與 Base64 字串互轉，支援格式轉換
關於 Base64 圖片轉碼
Base64 圖片編碼把圖片檔案轉成 data URI，格式像 data:image/png;base64,…，可以直接內嵌在 HTML 的 img src、CSS 的 background-image，或 JSON 欄位中，不需要外部檔案路徑。瀏覽器將其視為一般圖片來源。這個工具處理編碼與解碼的來回轉換，並自動偵測 MIME type，產生符合標準的 URI 讓你直接貼用。
常見使用情境
常見問題
Base64 圖片建議的大小上限是多少？
建議控制在 10 KB 以內。Base64 編碼會讓檔案膨脹約 33%，圖片太大會顯著增加頁面體積，且瀏覽器無法單獨快取這張圖片。超過這個大小，建議改用外部 URL 並搭配 CDN。
為什麼 Base64 編碼後會膨脹約 33%？
Base64 把每 3 bytes 的二進位資料編成 4 個 ASCII 字元，4/3 這個倍率就是膨脹的來源。一張 9 KB 的 PNG 轉成 Base64 後大約會變成 12 KB。
data URI 的瀏覽器相容性如何？
所有現代瀏覽器都全面支援 data URI，超過十年沒有相容性問題。可用在 img src、CSS background-image、JavaScript Blob 操作，不需要任何 polyfill。
什麼時候應該用 inline SVG，而不是 Base64 PNG？
如果圖片本身就是 SVG，優先直接用 <svg> 標籤內嵌，而不是把它 Base64 編碼。inline SVG 體積更小、節點在 DOM 裡可以用 CSS 操控，而且縮放不失真。Base64 主要適用於 PNG、JPEG、WebP 等無法以純文字形式內嵌的點陣格式。
這個工具怎麼偵測 MIME type？
工具讀取檔案最前面的幾個 magic bytes 來判斷格式，例如 PNG 固定以 89 50 4E 47 開頭。這種方式比信任副檔名更可靠，能避免副檔名被修改導致類型錯誤的問題。
相關工具
Ad
Ad