Base64.im使用教學

1. 為什麼要使用 Base64 編碼？

Base64 把二進位資料表示為文字，適合把小圖示放入 HTML、CSS 或單一檔案示範。郵件簽名的 Data URI 支援因郵件軟體而異，應實際測試。

2. 支援的圖片格式

支援 JPEG、PNG、GIF、WebP、SVG、BMP 圖片。轉換保留檔案位元組及 MIME 類型，不會壓縮、縮放或改變圖片格式。

3. 如何使用base64.im轉換影像

按檔案選擇按鈕或把圖片拖入圖片區域。一次最多 20 張，每張不超過 10 MB。每個結果都有獨立的複製與下載按鈕。

4. 使用 Base64 編碼的圖像作為 HTML 圖片來源

複製完整結果，包括 data:image/...;base64, 前綴，放入 img 的 src 屬性並提供 alt 文字。剪貼簿不可用時，可選取結果後手動複製。

<img src="data:image/png;base64,…" alt="…">

5. 使用 Base64 編碼的圖片作為 CSS 背景

把完整 Data URI 放入 CSS background-image 的 url()，保留前綴與結尾填補字元。範例中的省略號只用於示意，截短的字串不能顯示圖片。

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

6. 注意事項

Base64 通常比原始資料約大三分之一。盡量用於小圖片，並在目標瀏覽器測試；較大或需要快取重用的資源宜使用一般圖片 URL。