影像轉 Base64

將影像轉換為 Base64 Data URI — 適合嵌入程式碼中使用

🔒 你的影像永遠不會離開你的裝置。 所有處理都使用 FileReader API 在你的瀏覽器中進行。不上傳、不經伺服器、不追蹤。

功能特色

  • Data URI 輸出 — 取得完整的 data:image/... URI 字串,可直接貼入 HTML、CSS 或 JavaScript。
  • 一鍵複製 — 複製為原始 Data URI、<img> 標籤,或 CSS background-image 屬性。
  • 大小比較 — 查看原始檔案大小與 Base64 字串長度的比較(Base64 約大 33%)。
  • 即時轉換 — 轉換瞬間完成 — 不需要處理。

運作方式

  1. 上傳你的影像 — 拖放任何影像即可轉換為 Base64。
  2. 選擇複製格式 — 複製為 Data URI、<img> 標籤,或 CSS background-image。
  3. 貼入你的程式碼 — Base64 字串可直接將影像嵌入你的程式碼 — 不需要額外的檔案。

使用情境

  • 在 HTML 中直接嵌入小影像以減少 HTTP 請求
  • 在 HTML 電子郵件中內嵌影像,無需外部載入即可顯示
  • 嵌入在樣式表中的 CSS 背景影像
  • 將圖示打包在 JavaScript 程式碼中以進行單檔發佈

常見問題

什麼時候應該使用 Base64?

適用於小影像(10KB 以下) — 圖示、標誌、小型 UI 元素。嵌入可避免額外的 HTTP 請求。對於較大的影像,作為獨立檔案提供會更好。

為什麼 Base64 字串比檔案大?

Base64 編碼會增加約 33% 的大小,因為它將二進位資料轉換為 ASCII 文字。這是為了能在程式碼中直接嵌入影像的取捨。

完整的影像品質會保留嗎?

是的。Base64 只是相同二進位資料的不同編碼方式 — 完全不會損失品質。

相關工具

  • 🔁 格式轉換 — 在 PNG、JPG、WebP 之間轉換 — 在瀏覽器中即時完成
  • 📦 壓縮影像 — 在不損失品質的情況下減少檔案大小 — 全在瀏覽器中完成
  • 🔗 URL 編解碼 — URL 編碼與解碼——在瀏覽器中即時完成