將圖片轉換為Base64編碼，用於網頁嵌入、資料URL和儲存。支援各種圖片格式。
工具功能
- 將圖片轉換為Base64編碼用於網頁嵌入。: 將圖片轉換為Base64編碼用於網頁嵌入。
- 支援各種圖片格式，包括JPG、PNG、GIF、WebP。: 支援各種圖片格式，包括JPG、PNG、GIF、WebP。
- 即時轉換，即時預覽。: 即時轉換，即時預覽。
- 簡潔介面，支援複製功能。: 簡潔介面，支援複製功能。
使用方法
- 步驟1: 從電腦中選擇一個圖片檔案。
- 步驟2: 查看Base64編碼結果。
- 步驟3: 複製Base64字串以供使用。
生成原理
Base64編碼和資料URL
Base64編碼使用64個字元（A-Z、a-z、0-9、+、/）將二進位影像資料轉換為ASCII文字，允許在HTML/CSS/JSON中嵌入影像而無需外部檔案。編碼過程：讀取影像二進位資料（JPEG、PNG、GIF、WebP位元組）、分割為6位元組（Base64每字元使用6位元vs二進位8位元）、將每組對映到Base64字元集以及用=填充對齊。資料URL格式：資料:[mimetype];base64,[編碼資料]。該工具實作FileReader API或Canvas toDataURL()進行轉換，支援拖放檔案上傳並提供即時Base64字串輸出。優點包括：消除HTTP請求、簡化分發以及API相容性。缺點：33%大小增加、無瀏覽器快取以及不適合大影像。
影像格式偵測和MIME類型
該工具透過讀取檔案簽章（魔數）自動偵測影像格式並設定適當的MIME類型。格式偵測使用檔案標頭：JPEG（FF D8 FF）、PNG（89 50 4E 47）、GIF（47 49 46 38）、WebP（52 49 46 46...57 45 42 50）、BMP（42 4D）、ICO（00 00 01 00）、SVG（帶<svg>根的XML）。MIME類型對映：圖片/jpeg用於JPEG/JPG、圖片/png用於PNG、圖片/gif用於GIF、圖片/webp用於WebP、圖片/svg+xml用於SVG、圖片/bmp用於BMP。該工具驗證輸入檔案，處理使用者選擇的檔案和貼上的影像，並支援基於Canvas的轉換進行格式轉換。
實際應用和Web開發用例
Base64編碼影像服務於特定的Web開發場景：嵌入小圖示/標誌、CSS背景影像、電子郵件範本以及離線應用程式。該工具提供：快速使用的複製到剪貼簿、儲存的下載為文字檔案以及HTML/CSS程式碼片段。最佳實踐：僅用於<10KB的影像、照片首選外部檔案、結合影像壓縮以及考慮大型集合的延遲載入替代方案。常見應用包括：SVG圖示庫、電子郵件簽名、列印樣式表以及快速原型設計。效能考慮：HTML中的Base64阻止解析、影響行動效能以及阻止漸進式JPEG載入。
常見問題
- 什麼是 Base64 編碼，為什麼要使用它？
- Base64 編碼使用 64 個字元（A-Z、a-z、0-9、+、/）將二進位影像資料轉換為 ASCII 文字。這允許在不使用單獨影像檔案的情況下直接將影像嵌入到 HTML、CSS 或 JSON 中。好處包括：消除 HTTP 請求、允許離線使用、簡化資源管理以及允許在電子郵件範本中使用內嵌影像。
- 哪些影像格式可以轉換為 Base64？
- 該工具支援 JPG、PNG、GIF、WebP、SVG、BMP 和 ICO 格式。每種格式都會自動偵測，並在 Base64 資料 URL 中分配正確的 MIME 類型（例如，圖片/png、圖片/jpeg）。SVG 影像被轉換為資料 URL 以便嵌入到 HTML 中。
- Base64 會使檔案增大多少？
- Base64 編碼使檔案大小比原始二進位格式大約增加 33%。例如，一個 100KB 的影像在 Base64 編碼後變為大約 133KB。這是因為 Base64 使用 4 個字元來表示 3 位元組的二進位資料。該工具顯示大小統計資訊，以幫助您了解影響。
- 如何在程式碼中使用 Base64 字串？
- 將 Base64 字串用作資料 URL：在 HTML 中：<img src="資料:圖片/png;base64,YOUR_BASE64_STRING">，在 CSS 中：background-圖片: url(資料:圖片/png;base64,YOUR_BASE64_STRING)，在 JavaScript 中：const img = 新 圖片(); img.src = "資料:圖片/png;base64," + base64String。該工具提供完整的資料 URL 格式，可直接使用。
- 我應該何時使用 Base64 與普通影像檔案？
- 使用 Base64 用於：小影像（< 10KB），如圖示和徽標、內嵌 CSS 背景、電子郵件範本、離線應用程式以及所有資源都嵌入的單檔案 HTML 應用程式。避免 Base64 用於：大影像（顯著增加頁面大小）、經常變更的影像（快取問題）以及需要定期更新的影像（需要程式碼變更）。
相關文件
- MDN - Canvas API - HTML5 Canvas API 圖像處理和操作
- MDN - 檔案 API - 在Web應用中處理檔案和Blob
- Web.開發 - 圖像優化 - Web圖像優化最佳實踐
- W3C - PNG 規範 - 官方PNG圖像格式規範
- MDN - 圖像檔案類型指南 - 圖像檔案類型和格式指南