跳至主要內容
SPCXTools

圖片轉 Base64

將任何圖片轉換為 Base64 Data URI，並複製為純 Base64、CSS 背景、HTML img 標籤或 Markdown 格式。

本機執行 — 檔案絕不會離開您的裝置

正在載入工具…

如何使用 圖片轉 Base64

  1. 1選擇圖片或將其拖曳至頁面中。
  2. 2選擇輸出格式 — Data URI、純 Base64、CSS、HTML 或 Markdown。
  3. 3查看預覽圖旁顯示的編碼後檔案大小。
  4. 4點擊 複製，並將程式碼貼到您需要的地方。

將圖片直接嵌入程式碼

有時候您會需要不依賴獨立檔案的圖片：例如樣式表中的圖示、單一 HTML 報表中的標誌、JSON API 回應中的佔位圖、Markdown 文件中的圖片，或是元件庫的背景圖。這款轉換工具能將任何圖片編碼為 Base64，並格式化成可直接貼上的語法——包含 Data URI、純 Base64、CSS background-image、HTML <img> 標籤或 Markdown 圖片語法。

功能特色

  • 支援所有常見圖片格式：PNG、JPG、GIF、WebP、AVIF、SVG、ICO 等。
  • 五種輸出格式，滿足不同使用需求。
  • 大小比較：顯示原始檔案與編碼後文字的大小差異。
  • 圖片預覽：附帶透明度棋盤格背景。
  • 一鍵複製。
  • 安全隱私：檔案絕對不會離開您的瀏覽器。

輸出範例

格式 輸出樣式
Data URI data:image/png;base64,iVBORw0KGgo…
Base64 iVBORw0KGgo…
CSS background-image: url("data:image/png;base64,…");
HTML <img src="data:image/png;base64,…" alt="logo">
Markdown ![logo](data:image/png;base64,…)

保持嵌入圖片小巧

嵌入的圖片無法獨立快取 (cache)，每次載入包含該圖片的網頁或樣式表時，都會重新下載。一般建議只嵌入小於幾 KB 的圖片。您可以先使用壓縮圖片工具來縮小圖片體積；如果需要點陣圖，可透過 SVG 轉 PNG 來轉換向量圖示；或者使用 Base64 編碼工具來處理其他檔案與文字。

常見問題

什麼是 data URI？
data URI 會將檔案直接嵌入文字中，格式為 data:image/png;base64, 後接編碼後的位元組。瀏覽器顯示它的方式與從 URL 載入圖片完全相同，但不需要發送額外的請求。
為什麼 Base64 版本比原圖片大？
Base64 會將每 3 個位元組編碼為 4 個字元，因此結果會比原始檔案大約 33%。當網頁使用 gzip 或 Brotli 壓縮傳輸時，可以抵銷部分增加的體積。
何時應該使用 Base64 嵌入圖片？
適用於小圖片（圖示、小 logo、佔位圖，以及 HTML 電子郵件或單一檔案文件中的圖片），這時避免額外的請求會很有幫助。對於大型相片，使用一般的圖片檔案會更好，因為它可以獨立快取，且不會讓你的 HTML 或 CSS 檔案變得肥大。
電子郵件軟體會顯示 Base64 圖片嗎？
支援度因軟體而異。許多網頁信箱（Webmail）會阻擋或移除 data-URI 圖片，因此對於電子報來說，將圖片代管在伺服器上或作為內嵌附件發送通常會比較可靠。
我的圖片會被上傳嗎？
不會。圖片完全由您的瀏覽器讀取與編碼，不會有任何資料傳送至伺服器。

相關工具

Base64 編碼與解碼在文字、檔案與 Base64 之間互相轉換，完整支援 UTF-8 與 Base64URL。SVG 轉 PNG將 SVG 向量圖轉換為任意尺寸的清晰 PNG 圖片，並保留透明度。壓縮圖片依據畫質或指定的目標 KB 大小來縮小圖片 — 支援批次處理，且無需上傳檔案。URL 編碼與解碼將文字進行百分比編碼以用於網址，或將已編碼的 URL 與查詢字串解碼回一般可讀文字。Base64 轉圖片在瀏覽器中即時將 Base64 字串與 Data URI 解碼還原成可預覽及下載的圖片。Chmod 計算機在核取方塊、八進位數字（如 755）與符號權限（如 rwxr-xr-x）之間進行轉換。