圖片轉 Base64
輸出可直接嵌入程式碼的字串。
圖片轉 Base64 會把上傳的圖片轉換成 base64 編碼的資料網址字串，可以直接貼到 HTML、CSS 或其他程式碼中——小型嵌入圖形不需要額外的圖片檔案。
點擊選擇圖片，或將圖片拖曳到這裡
每次僅支援 1 張圖片
使用指引
- 上傳一張圖片。
- 下方會自動顯示 base64 字串。
- 點擊「複製到剪貼簿」，或下載成文字檔。
常見使用情境
- 把小型圖示或商標直接嵌入 CSS 的 background-image 屬性。
- 把小圖片內嵌到 HTML 郵件中，不依賴外部圖片主機。
- 把預留圖或網站圖示直接嵌入應用程式程式碼。
- 在不方便上傳檔案時，以純文字方式分享圖片。
✓內容與驗證流程複查: 2026-08-25
圖片轉 Base64 的驗證方法與判讀界線
如何確認 base64 字串完整且可在你的程式碼中使用。
Base64 文字比原始檔案大
Base64 編碼的資料大約比原始二進位檔案大三分之一——用於小圖示與圖形沒問題，但如果用在大型相片，會明顯增加程式碼或頁面體積。
複製
你可以直接把字串複製到剪貼簿貼進程式碼，也可以下載成 .txt 檔以便另外儲存或分享——兩種方式得到的字串完全相同。
輸出
產生的字串會以類似「data:image/png;base64,」的前綴開頭——請確保貼上完整字串，包含這個前綴，否則瀏覽器不會把它辨識為有效的圖片資料。
使用結果前的檢查清單
- 了解 base64 文字會比原始圖片檔案大約多三分之一。
- 如果頁面體積很重要，確認這是用於小型圖示／圖形，而非大型相片。
- 已複製或下載完整字串，包含「data:image/...;base64,」前綴。
- 已測試貼上的字串在目標情境中確實能正確顯示圖片。
適合誰使用
- 想把小圖片直接內嵌到 CSS 或 HTML 中的網頁開發者。
- 要建立不依賴外部主機圖片的 HTML 郵件的人。
- 要把預留圖形或圖示直接嵌入應用程式程式碼的開發者。
- 需要以純文字（而非檔案附件）分享圖片的人。
實際案例
把圖示內嵌進 CSS
開發者把小圖示直接以 base64 background-image 嵌入 CSS，避免為一個小圖形多發一次 HTTP 請求。
自成一體的 HTML 郵件圖片
有人製作 HTML 郵件，把小商標以 base64 內嵌，即使收件者的郵件用戶端封鎖外部圖片，圖片依然能顯示。
透過
開發者需要透過只接受純文字的聊天或系統分享一張小截圖，於是把它轉成 base64 字串貼上。
使用限制
- Base64 文字大約比原始檔案大三分之一，適合小圖示，不適合大型照片。
常見問題
為什麼 base64 字串
Base64 編碼是把二進位資料表示成文字，本質上會比原始檔案大約多三分之一——這是正常且預期的，不代表出了什麼問題。
需要
需要——這段前綴告訴瀏覽器或應用程式接下來的資料類型與如何解碼；沒有它，字串不會被辨識為有效的圖片資料。
Base64 適合用在大型相片嗎？
一般來說不適合——體積開銷較大，也無法個別快取，比較適合小型圖示與圖形，而不是大型照片圖像。
轉成 base64 會改變圖片畫質嗎？
不會——base64 只是把完全相同的圖片位元組編碼成文字，不涉及重新壓縮或畫質損失。
🔒 在瀏覽器內處理，不會上傳。結果僅供參考，詳見 免責聲明。 最後更新: 2026-08-25
訂閱更新
新工具上線與實用技巧，第一時間寄到你的信箱。不塞廣告，隨時可退訂。