> 影像轉 Base64
把圖片轉成 Base64 Data URI,或對文字做 Base64 編碼 / 解碼——還能把 Base64 還原成檔案
✓ 永久免費 · ✓ 無需註冊 · ✓ 檔案不上傳 · ✓ 離線可用
🔒 你的資料永遠不會離開你的裝置。 所有處理都使用 FileReader API 在你的瀏覽器中進行。不上傳、不經伺服器、不追蹤。
功能特色
- Data URI 輸出 — 取得完整的 data:image/... URI 字串,可直接貼入 HTML、CSS 或 JavaScript。
- 一鍵複製 — 複製為原始 Data URI、<img> 標籤,或 CSS background-image 屬性。
- 大小比較 — 查看原始檔案大小與 Base64 字串長度的比較(Base64 約大 33%)。
- 也能處理文字和解碼 — 把任意文字以 UTF-8 編碼成 Base64(標準或 URL 安全),把 Base64 解碼回文字,或把 Base64 字串還原成可預覽、可下載的檔案。
運作方式
- 上傳你的影像 — 拖放任何影像即可轉換為 Base64。
- 選擇複製格式 — 複製為 Data URI、<img> 標籤,或 CSS background-image。
- 貼入你的程式碼 — Base64 字串可直接將影像嵌入你的程式碼 — 不需要額外的檔案。
使用情境
- 在 HTML 中直接嵌入小影像以減少 HTTP 請求
- 自帶圖片的獨立 HTML 檔(報告、離線頁面)——注意 Gmail 和 Outlook 會封鎖郵件裡的 data URI 圖片
- 嵌入在樣式表中的 CSS 背景影像
- 將圖示打包在 JavaScript 程式碼中以進行單檔發佈
常見問題
什麼時候應該使用 Base64?
適用於小影像(10KB 以下) — 圖示、標誌、小型 UI 元素。嵌入可避免額外的 HTTP 請求。對於較大的影像,作為獨立檔案提供會更好。
為什麼 Base64 字串比檔案大?
Base64 編碼會增加約 33% 的大小,因為它將二進位資料轉換為 ASCII 文字。這是為了能在程式碼中直接嵌入影像的取捨。
完整的影像品質會保留嗎?
是的。Base64 只是同一組位元組的另一種編碼——完全不會損失品質。唯一例外:iPhone 的 HEIC 照片會先轉成 JPEG,因為瀏覽器無法從 data URI 顯示 HEIC;發生這種情況時頁面會告訴你。
也能解碼 Base64 嗎?
能——切到「文字 ⇄ Base64」,選「解碼」。貼上 Base64 或整段 data: URI,空格、換行和 URL 安全格式都能辨識。解碼出來是文字就顯示文字;是檔案(PNG、JPG、PDF、ZIP……)就盡量給出預覽並提供下載。有錯誤字元時會指出是哪個、在第幾位。
什麼是 URL 安全的 Base64?
同一種編碼,只是用 - 和 _ 取代 + 和 /,通常也不帶 = 填充,這樣放進 URL 或 JWT 裡不用跳脫。編碼時勾選「URL 安全」;解碼時兩種都會自動辨識。
相關教學
- 📖 How to Encode and Decode Base64 (and Turn an Image Into a Data URI) — Encode and decode Base64 text, and convert a small image into a data URI you can inline in CSS or HTML — all locally in your browser, nothing uploaded.
相關工具
💬 Bug、點子,或者就想打個招呼? 告訴 Milo 🐨 · [email protected]