圖片轉base64

🖼️ 功能介紹

圖片轉base64工具可以將圖片檔案轉換為base64 編碼字串，支援多種圖片格式，轉換後的字元串可以直接嵌入到HTML、CSS或JavaScript 程式碼中使用，無需額外的圖片檔案。

📖 技術原理

base64 是一種基於 64 個可列印字元來表示二進制資料的表示方法。它常用於在通常處理文字資料的場合，表示、傳輸、儲存一些二進制資料，包括 MIME 的電子郵件及 XML 的一些複雜資料。

圖片的 base64 編碼就是可以將一幅圖片資料編碼成一串字元串，使用該字元串代替圖片地址，從而不需要使用圖片的 URL 地址。

✨ 主要特性

• 多格式支援： 支援 JPEG、PNG、GIF、WebP、SVG等常見圖片格式
• 拖曳上傳： 支援拖曳圖片檔案到指定區域進行轉換
• 即時預覽： 上傳後立即顯示圖片預覽和base64 編碼
• 一鍵複製： 點擊複製按鈕即可複製base64 字串
• 線上預覽： 可以預覽轉換後的base64圖片效果
• 本機處理： 所有轉換都在瀏覽器本機完成，保護隱私安全

💡 使用步驟

1. 將圖片檔案拖曳到上傳區域，或點擊選擇圖片檔案
2. 系統會自動將圖片轉換為base64 編碼
3. 轉換完成後，base64 字串會顯示在下方文字方塊中
4. 點擊"預覽"按鈕可以在新視窗檢視圖片效果
5. 點擊"複製"按鈕複製base64 字串到剪貼簿

📋 支援格式

• 輸入格式： JPEG、PNG、GIF、WebP、SVG、BMP、ICO等
• 輸出格式： base64 編碼字串
• 檔案大小： 建議不超過10MB，大檔案可能影響轉換速度

🎯 適用場景

• 網頁開發中嵌入小圖示和裝飾圖片
• CSS背景圖片的base64 編碼
• 郵件模板中的圖片嵌入
• 行動應用程式中的圖片資源
• 離線應用中的圖片儲存
• 減少HTTP請求，提升網頁載入速度

⚠️ 注意事項

• base64 編碼會使檔案大小增加約33%
• 大圖片轉換為base64會生成很長的字元串
• 建議只對小圖片（小於100KB）使用base64 編碼
• base64 字串不能直接用於CSS的url()函數，需要添加data:image/格式前綴
• 轉換後的字元串會自動包含data:image/格式前綴
• 所有處理都在本機進行，不會上傳到伺服器

💻 使用範例

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==" alt="圖片">

background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==');

const img = new Image();
img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==';

❓ 常見問題

• Q: base64 編碼會增加檔案大小嗎？
  A: 是的，base64 編碼會使檔案大小增加約33%，因為每3個位元組會編碼為4個字元。
• Q: 什麼時候應該使用base64圖片？
  A: 建議對小圖片（小於100KB）使用base64 編碼，可以減少HTTP請求，提升載入速度。
• Q: 支援哪些圖片格式？
  A: 支援 JPEG、PNG、GIF、WebP、SVG、BMP、ICO等常見圖片格式。
• Q: 轉換後的字元串可以直接使用嗎？
  A: 可以，轉換後的字元串已經包含了data:image/格式前綴，可以直接在HTML、CSS或JavaScript中使用。
• Q: 大圖片可以轉換嗎？
  A: 可以，但建議不要轉換過大的圖片，因為會生成很長的字元串，影響程式碼可讀性。