圖片 → Base64 轉換器

將任意圖片編碼為 Base64 資料 URI，或貼上資料 URI 將其解碼回圖片。複製結果或取得 CSS url() 片段。不會有任何內容離開你的裝置。

圖片轉 Base64 的運作方式

圖片轉 Base64 工具會讀取你的圖片檔案，並將其編碼為 Base64 資料 URI，你可以直接嵌入 HTML、CSS 或 JSON 中，無需額外的檔案請求。轉換使用瀏覽器中的 FileReader API；圖片中的位元組不會傳送到伺服器。你也可以貼入 Base64 字串進行解碼並預覽圖片，一切都在本機完成。

Base64 資料 URI 比二進位原始檔案大約大 33%，因為每組三個位元組會擴展為四個 ASCII 字元。這個大小增加是將圖片內嵌到文件或樣式表中所需付出的代價。工具會顯示原始 Base64 字串、可直接使用的 HTML img 標籤片段，以及 CSS background-image 片段，方便你快速複製貼上到專案中。

作者 Bastien Sulyan

圖片轉 Base64 的分步使用說明

將圖片檔案拖曳到上傳區或點擊瀏覽。接受的格式：JPEG、PNG、WebP、GIF、SVG。
Base64 資料 URI 立即出現在輸出欄位中。
複製原始 Base64 字串，或使用預先格式化的 HTML img 標籤或 CSS background-image 片段。
若要解碼，請將 Base64 字串貼入輸入欄位，並切換到解碼模式以預覽圖片。
點擊任何片段旁的複製按鈕，將其複製到剪貼簿。

常見使用情境

前端開發者將小圖示以資料 URI 的形式內嵌在 CSS 檔案中，以省去額外的 HTTP 請求。
開發者將小型載入動畫以 Base64 src 屬性嵌入，使佔位圖在 JavaScript 套件載入前就能顯示。
QA 工程師複製測試圖片的 Base64，以便直接貼入 API 測試的 JSON 負載中。
電子郵件範本製作者將簽名標誌以 Base64 資料 URI 的形式內嵌，因為部分郵件客戶端會封鎖外部圖片請求。

常見問題

為什麼 Base64 輸出比我的原始檔案大約三分之一？

Base64 編碼以四個 ASCII 字元表示每三個二進位位元組（4/3 的比率）。一張 100 KB 的圖片以二進位格式，在轉為 Base64 字串後約為 133 KB。這是編碼方案的固有特性，並非工具的限制。

編碼時圖片內容會傳輸到伺服器嗎？

不會。FileReader API 從你的本機磁碟讀取二進位檔案，並將結果直接傳遞給瀏覽器分頁內的 JavaScript 編碼函式。圖片資料不會離開你的裝置。

我可以在任何 HTML 或 CSS 環境中使用資料 URI 輸出嗎？

可以。以 data:image/jpeg;base64, 開頭後接編碼字串的資料 URI，可用作 img 標籤的 src 屬性或 CSS background-image 屬性中的 url() 值。所有現代瀏覽器都支援資料 URI。非常大的資料 URI 可能會讓頁面渲染變慢，因此內嵌通常保留給幾千位元組以下的小圖片。

工具支援動態 GIF 嗎？

工具會編碼你提供之任何檔案的完整二進位內容，包括動態 GIF。當產生的資料 URI 用作 img 標籤的 src 時，支援 GIF 動畫的瀏覽器中就會播放動畫。

如何反向操作，將 Base64 字串解碼回圖片？

將工具切換到解碼模式，貼入你的 Base64 字串（有無 data: 前綴皆可），工具會解碼它，並以二進位圖片形式提供下載，同時顯示預覽。