圖片轉 Base64

功能簡介

這個工具會把圖片轉換成 Base64 文字和可以直接貼上的 Data URI。Data URI 能把圖片直接嵌入 HTML、CSS、Markdown、JSON 或電子郵件中，讓頁面少一次 HTTP 請求，程式碼片段也不必另外託管圖片檔案。它也能反向操作：貼上 Base64 或 Data URI，即可預覽並下載圖片。

使用方法

1. 把圖片拖到放置區、按 選擇圖片，或按 範例 載入一個 SVG Logo。
2. 預覽區會顯示圖片，以及它的類型、檔案大小、Base64 大小和尺寸。
3. 選擇 輸出格式：
   • Data URI：data:image/png;base64,…，用於 src 屬性和 JSON。
   • 純 Base64：只有編碼字串，可選擇每 76 個字元換行，供 MIME 和 PEM 風格使用。
   • CSS 背景：完整的 background-image: url("…"); 宣告。
   • HTML <img>：以 Data URI 作為 src 的圖片標籤。
   • Markdown：![image](data:…)。
4. 複製結果。如果要解碼，把 Base64 或 Data URI 貼到輸入框，再按 下載圖片。

範例

一個 2×1 像素的 PNG 會變成：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAIAAAB7QOjdAAAADUlEQVR4nGP4zwAE/wEHAAH/4iOeWQAAAABJRU5ErkJggg==

在 CSS 中使用：

.dot { background-image: url("data:image/png;base64,iVBORw0KGgo…"); }

什麼時候適合內嵌圖片

內嵌適合小型、經常使用的圖片，例如圖示、小背景圖、載入動畫和電子郵件簽名檔。它不適合照片和大型圖片：Base64 會讓大小增加約三分之一，圖片無法與頁面或樣式表分開快取，還會延後檔案其餘部分的解析。一般原則是，內嵌圖片最好控制在幾 KB 以內。對 SVG 來說，百分比編碼的 Data URI（data:image/svg+xml,…）通常比 Base64 更小，而這個工具兩種都接受。