圖片轉 Base64 工具
將圖片轉換為 Base64 編碼字串，用於嵌入 HTML、CSS 或 JSON。
支援 PNG、JPG、GIF、SVG、WebP
什麼是 Base64 圖片編碼？
Base64 是一種將二進位資料（如圖片）轉換為純文字字串的編碼方式。透過 Base64 編碼，你可以將圖片直接嵌入 HTML、CSS 或 JSON 中，而不需要額外的圖片伺服器請求。這在製作獨立 HTML 電子郵件模板、小型圖示嵌入，或減少 HTTP 請求次數時非常實用。
Data URI 格式如下：data:image/png;base64,iVBORw0KGgo...，可直接作為 <img src="..."> 的值或 CSS 的 background-image。
如何使用本工具？
操作步驟非常簡單：
- 點擊上方區域或直接將圖片拖曳進去
- 工具自動將圖片轉換為 Base64 並顯示預覽
- 選擇你需要的輸出格式（Data URI、純 Base64、CSS 或 HTML 標籤）
- 點擊「複製輸出內容」按鈕即可直接貼到你的專案中
適用場景
- HTML 電子郵件嵌入圖片
- CSS 背景小圖示
- 離線網頁單檔封裝
- JSON API 傳遞圖片
- SVG 內嵌點陣圖
- 減少外部 HTTP 請求
- 快速原型開發測試
- Canvas 圖片來源使用
常見問題 FAQ
Base64 編碼後檔案會變大多少？
Base64 編碼通常會使原始檔案增加約 33% 的大小。這是因為 Base64 用 4 個字元來表示原始的 3 個位元組資料。因此建議只對小型圖片（通常建議 10KB 以下）使用 Base64 嵌入，以避免頁面過於龐大。
我的圖片會上傳到伺服器嗎？
不會。本工具完全在你的瀏覽器本機端執行，所有轉換過程使用 JavaScript 的 FileReader API 在你的設備上完成，圖片資料不會被傳送到任何伺服器，請放心使用。
Data URI 和純 Base64 有什麼差別？
Data URI 包含完整的資料格式宣告（如 data:image/png;base64, 前綴），可直接用於 HTML 的 src 屬性或 CSS。純 Base64 則只有編碼後的字串本體，適合用於需要自行組合格式的 API 或程式邏輯中。
支援哪些圖片格式？
本工具支援常見的網頁圖片格式，包括 PNG、JPEG/JPG、GIF、SVG 以及 WebP。只要是瀏覽器能夠讀取的圖片格式，基本上都可以正常轉換。
可以轉換很大的圖片嗎？
技術上可以，但不建議。大型圖片轉換後的 Base64 字串會非常龐大，嵌入 HTML/CSS 後會嚴重拖慢頁面載入速度，也會增加 DOM 解析負擔。建議大圖仍使用一般圖片 URL，Base64 嵌入較適合圖示或小型裝飾圖片。
如何在 CSS 中使用 Base64 圖片？
選擇「CSS 背景」格式，工具會自動產生可複製的 CSS 語法，格式為 background-image: url("data:image/...;base64,...");，直接貼到你的 CSS 樣式表即可使用，無需任何修改。