Base64.imBase64 在線編碼解碼(最好用的 Base64 在線工具)
Base64.im使用教學
1. 為什麼要使用 Base64 編碼？
Base64 編碼是一種將二進位資料（如圖像檔案）轉換為文字格式的方式，非常適合以下場景：
- 快速載入小型圖片：將 Base64 圖片嵌入 HTML 或 CSS 檔案中，避免額外的 HTTP 要求，提高載入速度。
- HTML 電子郵件簽名：透過 Base64 編碼嵌入影像，避免觸發電子郵件用戶端中的「顯示影像」警告。
- 單一檔案示範：為客戶建立無需外部資源的單一檔案模型或示範頁面。
2. 支援的圖片格式
本工具支援以下常見影像格式的編碼：.jpeg、.png、.gif、.webp、.svg、.BMP和.bmp。
3. 如何使用base64.im轉換影像
上傳圖像：透過拖曳圖像檔案到瀏覽器視窗或點擊上傳按鈕，選擇您要編碼的圖像。
查看結果：檔案上傳後，您可以在下方看到 Base64 字串。
上傳數量限制：您一次最多可以上傳20個檔案。
4. 使用 Base64 編碼的圖像作為 HTML 圖片來源
Base64 字串可以用作 HTML 中 `img` 標籤的 `src` 屬性值。以下是一個範例：
<img src="data:image/jpeg;base64,/9j/4RiDRXhpZgAATU0AKgA..." width="100" height="50" alt="base64 test">
使用步驟：
①. 點選工具提供的複製按鈕，將 Base64 字串複製到剪貼簿。
②. 如果您的瀏覽器不支援直接複製，可以手動從對話方塊複製字串。
③. 將字串貼到 HTML 檔案中的 `src` 屬性中。
您可以在CodePen上查看base64 圖像演示。
5. 使用 Base64 編碼的圖片作為 CSS 背景
Base64 字串也可以用作 CSS 的 `background` 屬性值，用於定義背景圖片。以下是一個範例：
.my-class {
background: url('data:image/jpeg;base64,/9j/4RiDRXhpZgAATU0AKgA...');
}
使用步驟：
①. 點選工具的複製按鈕，將 Base64 字串複製到剪貼簿。
②. 如果複製按鈕不可用，您可以手動從對話方塊複製字串。
③. 將字串貼到 CSS 檔案中的 `url()` 參數。
您可以在CodePen上查看base64 CSS 演示。
6. 注意事項
Base64 編碼適合小型影像，大型檔案可能會增加檔案體積，不建議在大型圖片或需要頻繁載入的資源中使用。
請確保編碼後的字串符合項目需求並在不同裝置上正常顯示。
透過以上步驟，您可以輕鬆使用 Base64 工具完成圖片編碼任務，提升開發效率！