圖片 Base64 互轉

📖 工具介紹

圖片與 Base64 互轉工具把圖片編碼成可以直接寫進 HTML、CSS 或 JSON 的文字，也可以把這樣一段文字還原成圖片檔案。兩個方向集成在同一個介面裡，用下拉框切換，不需要在多個工具之間來回跳。

編碼方向的做法很直接：選擇或拖入一張圖片，工具讀取檔案字節並編碼成 data URI，形如 data:image/png;base64, 後接內容。這個字元串可以直接作爲 img 標籤的 src、CSS 的 background-image，或者塞進 JSON 字段傳給接口。常見的用途包括：把小圖標內聯進單檔案頁面以免額外請求；構造自包含的 HTML 郵件；把圖片作爲字元串放進設定檔案或環境變量；在接口調試時把二進制內容編碼後放進請求體。

解碼方向接受兩種輸入：完整的 data URI，或者不帶前綴的純 Base64 字元串。純 Base64 沒有聲明類型，工具按 PNG 處理，這也是瀏覽器在沒有類型資訊時的常見做法。識別成功後面板會顯示還原出的圖片，並給出尺寸與體積，確認無誤即可下載成檔案。

編碼會讓體積變大，這是 Base64 的固有代價：每三個字節變成四個字元，再覆蓋 data URI 的前綴，總體大約增加三分之一。工具會同時給出原圖大小、編碼後大小和變化百分比，讓你在決定要不要內聯時有個明確的依據。一般來說，幾 KB 的小圖標內聯是划算的，幾十 KB 以上的圖片內聯反而會拖慢首屏。

所有轉換都在瀏覽器本地完成。圖片通過檔案讀取接口進入記憶體，編碼與解碼都在原地完成，不會上傳到任何伺服器。你要轉換的可能是未發佈的素材、含人臉的照片或者內部截圖，本地處理讓這件事不需要權衡。

✨ 功能特點

• 雙向轉換：圖片編碼爲 data URI 字元串，或把 Base64 文字還原成圖片檔案
• 接受純 Base64：不帶 data 前綴的字元串也能識別，按 PNG 處理並直接預覽
• 即時預覽：編碼後顯示原圖，解碼後顯示還原結果，附尺寸與體積資訊
• 體積對比：同時給出原圖大小、編碼後大小與變化百分比，便於判斷是否值得內聯
• 結果可帶走：編碼結果可複製爲文字或儲存成檔案，解碼結果可直接下載爲圖片
• 本地處理：圖片只在瀏覽器記憶體中讀取與轉換，不會上傳到任何伺服器

🚀 使用方式

1. 在左上下拉框選擇轉換方向，預設爲圖片轉 Base64
2. 編碼方向：點擊上傳區選擇圖片，或直接把檔案拖進去
3. 解碼方向：把 data URI 或純 Base64 字元串貼上進文字框
4. 點「開始處理」，右側預覽區顯示圖片，輸出區給出結果文字
5. 點「複製」帶走文字結果，或點「下載結果」儲存爲檔案或圖片

⚠️ 注意事項

• 編碼會讓體積變大：Base64 大約增加三分之一的體積，大圖內聯反而會拖慢載入
• 建議只內聯小圖標：幾 KB 的圖標內聯划算，幾十 KB 以上的圖片應繼續用獨立檔案
• 純 Base64 按 PNG 處理：不帶類型前綴的字元串無法判斷格式，預設按 PNG 解碼
• 超大圖片可能較慢：幾十 MB 的原圖編碼會佔用較多記憶體，建議先壓縮再轉換
• 矢量圖注意類型：SVG 屬於文字格式，內聯時可直接嵌入源碼，不一定需要 Base64