使用方式

選擇「Image → Base64」並挑選圖片檔，或選擇「Base64 → Image」進行反向轉換。
選擇需要的輸出格式：Data URL、純 Base64、HTML img 標籤、CSS background-image 規則或 Markdown。
複製結果，並貼到程式碼、電子郵件範本或 JSON 中。
若要解碼，請貼上 Data URL 或純 Base64；工具會預覽圖片，並提供下載。

運作方式

Base64 使用 64 個可列印字元表示二進位資料，因此可以將圖片直接寫入文字格式。Data URL 會在前面加上媒體類型，例如 data:image/png;base64,，後面接著編碼後的位元組。瀏覽器允許在任何可使用圖片 URL 的地方使用 Data URL：例如 img 標籤的 src、CSS 的 url()，或 SVG 圖片參照。

編碼後的文字大小通常會比原始檔案大約多三分之一（每 3 個位元組會變成 4 個字元）。將小圖示和佔位圖片嵌入程式碼中，可以省下一次額外的網路請求；但內嵌資料無法單獨快取，包含它的每個頁面或樣式表都會重新下載，因此超過幾 KB 通常就不划算。許多電子郵件用戶端會封鎖或移除 Data URL 圖片，寄送電子報前請先測試。

檔案會逐位元組編碼：不會重新壓縮，檔案內的中繼資料（例如 EXIF）也會保留。解碼時，此工具接受完整的 Data URL、純 Base64、URL-safe Base64，以及複製時包含 CSS url(…) 包裝的文字。圖片類型會根據解碼後的位元組判斷，不會直接採用標籤中的類型。

範例

樣式表中的小圖示

一個 600 位元組的 PNG 圖示會轉換成 800 個字元的 Base64 字串。使用 CSS 輸出可取得 background-image 規則，直接貼到 class 中，不必另外託管檔案。

來自 API 回應的圖片

API 回應中會有類似 "iVBORw0KGgoAAAANSUhEUg…" 的 JSON 欄位。將它貼到「Base64 → Image」，即可檢視圖片、確認尺寸並下載為 PNG。

HTML 中的 SVG 標誌

將 SVG 編碼後會得到可在 img 標籤中使用的 data:image/svg+xml;base64 URL。對 SVG 來說，未壓縮的 SVG 標記通常比 Base64 短，因此也可以考慮直接內嵌 SVG。

常見問題

為什麼 Base64 版本比我的圖片大？

Base64 使用 4 個文字字元儲存 3 個位元組，大小會增加約 33%，再加上 Data URL 前綴所占的少量空間。Web 伺服器上的 Gzip 或 Brotli 壓縮能縮小差距，但無法完全消除。

編碼會變更或壓縮圖片嗎？

不會。檔案的原始位元組會完整編碼，包含任何中繼資料。若要縮短字串，請先壓縮或調整圖片尺寸。

Data URL 和純 Base64 有什麼差別？

純 Base64 只有經過編碼的位元組。Data URL 會加上 data:image/jpeg;base64, 等前綴，告訴瀏覽器檔案類型，因此可以直接做為圖片來源。

有檔案大小限制嗎？

此工具可編碼最大 10 MB 的檔案。過長的字串可能會讓文字欄位和編輯器變慢，而這麼大的 Data URL 也不適合用在網站上。

隱私權

編碼與解碼都在您的瀏覽器中進行。圖片和 Base64 文字不會上傳、儲存或納入分析資料。