Dev Tools
純前端檔案不上傳

圖片 ↔ Base64 互轉

拖曳圖片即可輸出 data URI、原始 base64、HTML img、CSS background 四種片段;反向貼 base64 即時預覽 + 下載。完全在瀏覽器跑,不上傳。

›如何使用
  1. 圖片 → Base64:拖曳檔案或點選擇檔,每張圖會顯示縮圖、原始 / data URI 大小、增加百分比。
  2. 點任一段 (data URI / 原始 base64 / HTML / CSS) 右上角的 Copy 直接複製。
  3. Base64 → 圖片:切到第二個 tab,把字串貼進去 → 按 解碼預覽,右側預覽 + 下載按鈕。
  4. 純 base64(沒有 data: 前綴)記得先選正確的 MIME;貼完整 data URI 會自動沿用其 MIME。
Tips
  • data URI 比原始檔大約 33%,塞 CSS / HTML 前評估一下是否會炸 bundle。
  • data URI 適合小圖(icons、placeholder);大圖建議放 CDN 或用 引用。
  • 若 base64 內容其實是 JPEG 但你選了 PNG,我們會自動偵測 magic bytes 修正 MIME 並產正確副檔名的下載檔。
  • 整個流程完全在你的瀏覽器進行,圖片從不離開本機。

相關工具