圖片轉 Base64

將圖片拖曳至上方框格、點擊瀏覽、從剪貼簿貼上，或輸入圖片網址。工具會立即將圖片轉換為 Base64 字串，並顯示可直接複製的 data URI，格式包含 CSS、HTML 和 Markdown。所有處理均在您的瀏覽器中完成 — 圖片永遠不會上傳至任何伺服器，確保私密或敏感圖片的安全。

切換至「Base64 → 圖片」頁籤，貼上 data URI（data:image/png;base64,…）或純 Base64 字串。工具會解碼並預覽圖片，讓您以檔案形式下載。系統會自動偵測格式，支援 PNG、JPG、SVG、WebP 和 GIF。完整解碼在瀏覽器本機執行 — 不會發出任何伺服器請求，您的 Base64 字串也不會被傳輸至任何地方。

將 Base64 data URI 作為 img 標籤的 src 屬性值：在 src="data:image/png;base64,…" 中貼上編碼字串。點擊上方的「複製 <img>」，即可取得完整的、可直接貼上的圖片標籤，無需額外的檔案請求 — 非常適合電子郵件、單一頁面及行內圖示。這樣可省去一次額外的 HTTP 來回請求，即使原始圖片檔案不可用也能正常顯示。

在 url() 中引用 data URI，例如 background-image: url("data:image/png;base64,…")。點擊上方的「複製 CSS」，即可取得完整的 background-image 規則。以這種方式內嵌小型背景和圖示可省去一次 HTTP 請求，常見於設計系統圖示、載入動畫，以及鮮少變動的裝飾元素。這也讓單一 HTML 檔案的示範完全自給自足。

在瀏覽器中，使用 FileReader API 讀取檔案：const reader = new FileReader(); reader.onload = () => console.log(reader.result); reader.readAsDataURL(file)。reader.result 即為完整的 data:image/...;base64 URI。在 React 或 Next.js 中，可在 useEffect 或檔案輸入的 onChange 處理函式中呼叫此方法。本轉換器完全使用此方式，全程在用戶端執行。您可利用此處的輸出快速驗證自己的 JavaScript 實作，無需架設本機伺服器。

以二進位模式開啟檔案並進行編碼：import base64; data = base64.b64encode(open('image.png', 'rb').read()).decode(); uri = f'data:image/png;base64,{data}'。使用 PIL/Pillow 時，可先將圖片儲存至 BytesIO 緩衝區，再對緩衝區的位元組進行 Base64 編碼。使用本線上工具可在嵌入正式程式碼前，快速驗證您的 Python 輸出是否符合預期。

data URI 可將圖片位元組直接以文字形式嵌入 HTML、CSS、JSON 或電子郵件中，使圖片隨文件一起載入，而非作為獨立的 HTTP 請求。非常適合用於小型圖示、HTML 電子郵件中的商標、單一頁面示範，以及在資料庫或設定檔中儲存小圖片。開發人員也利用它規避在同一頁面進行 canvas 操作時的 CORS 限制。網站圖示（favicon）通常以 data URI 形式嵌入 HTML head，以消除首次載入時的額外網路請求。

通常不建議。Base64 編碼會使資料比原始二進位檔大約增加 33%，而且內嵌圖片無法由瀏覽器單獨快取，也無法使用 loading="lazy" 進行延遲載入。Base64 適合用於小型、鮮少變動的資源，例如網站圖示、小型商標或 10 KB 以下的圖示集。對於大型照片、主視覺圖片或跨多個頁面重複使用的資源，請保持為一般圖片檔案並設定適當的 HTTP 快取標頭。

完全安全。編碼和解碼完全在您的瀏覽器中使用 FileReader 和 Canvas API 執行 — 您的圖片永遠不會離開您的裝置，也不會傳送至任何伺服器。這是相較於 <strong>base64.guru</strong> 和 <strong>base64encoder.io</strong> 的重要隱私優勢，後兩者會將您的圖片上傳至其伺服器進行處理。在 UtiloKit 上，私密、機密或未公開的圖片在整個轉換過程中始終保留在您的設備上。即使在載入頁面後中斷網路連線，工具仍可正常運作。

只要您的瀏覽器可以讀取的格式，均可進行編碼，包括 PNG、JPEG/JPG、SVG、WebP、GIF、AVIF、BMP 和 ICO。解碼支援所有標準的 data:image/* MIME 類型，並在下載前預覽結果。SVG 檔案有特殊處理方式 — 其 Base64 也可在 CSS 中直接以 url('data:image/svg+xml,…') 搭配 URL 編碼嵌入而無需 Base64，但 Base64 更為通用，在所有瀏覽器和電子郵件客戶端中均可使用。

可以。使用「複製 Markdown」按鈕可取得  格式，或使用「複製 <img>」取得 HTML 電子郵件格式。請注意，部分電子郵件客戶端（尤其是 Outlook 和 Gmail 行動版）會移除或封鎖 Base64 圖片，因此在大量發送前務必先行測試。對於電子報行銷活動，建議將圖片託管於 CDN 並以連結方式引用更為安全。對於單一收件人的交易型電子郵件，Base64 在大多數客戶端中均可穩定運作。

Base64.guru 和 base64encoder.io 均在伺服器端處理您的圖片 — 您的檔案會上傳至其基礎設施。UtiloKit 的圖片轉 Base64 工具 100% 在您的瀏覽器中執行：無需上傳、無需伺服器、不儲存任何資料。UtiloKit 還提供可直接貼上的 CSS、HTML 和 Markdown 程式碼片段，支援雙向轉換（編碼和解碼），並可在頁面載入後離線使用。而且完全免費，對檔案大小或轉換次數均無限制。

完全免費，無需註冊、無浮水印、對檔案大小或圖片數量均無限制。與 browserling.com 不同，後者限制免費圖片轉換次數，超過特定大小的檔案需付費方案，UtiloKit 沒有任何限制。由於採用用戶端執行，不產生任何按圖片計費或頻寬費用 — 可轉換任意數量的圖片，大小上限僅受您裝置記憶體限制。

可以。本工具完全響應式設計，可在所有行動瀏覽器上運作，包括 iPhone 上的 Safari 和 Android 上的 Chrome。您可以點按從相簿或「檔案」應用程式選取圖片，或貼上網址載入遠端圖片。輸出結果可複製到剪貼簿，直接貼入 Notion、程式碼編輯器或其他應用程式。無需下載任何應用程式 — 只需在行動瀏覽器中開啟頁面，即可享有與桌面版完全相同的功能。