Daily Office Tools
/
Home›Images›Image to Base64
🔡

Image to Base64

Select an image and convert it into a Base64 data URL locally.

preview

Image to Base64 — what it does

Convert an image into a Base64 string, entirely in the browser, ready to paste into CSS, HTML or JSON as a data URI. Embedding a small image this way removes one network request from a page — which is why icons, spinners and tiny logos are so often inlined rather than fetched.

When this tool helps

  • Inlining a small icon or logo in CSS so it loads with the stylesheet.
  • Embedding an image inside an HTML email template with no external hosting.
  • Passing image data through a JSON API that accepts Base64 fields.

How to use it

  1. Choose the image file.
  2. Let the tool encode it.
  3. Copy the Base64 output.
  4. Paste it into your CSS, HTML or JSON with the appropriate data URI prefix.

Accuracy, limits, and good practice

  • Keep it small. Base64 adds about a third to the byte count, so inlining anything above a few kilobytes usually costs more than the saved request.
  • For CSS, the value takes the form url(data:image/png;base64,...) — the tool provides the encoded part.
  • Inlined images cannot be cached separately, so a Base64 image embedded in HTML is re-downloaded with every page load.

Frequently asked questions

When should I not inline an image?

For anything reused across pages, or larger than a few kilobytes. Those benefit from being cached as separate files.

Does inlining work in email?

Support is mixed; several major clients block or ignore data URIs, so test before relying on it for a campaign.

Can I decode it back to a file?

Yes, the file Base64 tool decodes a string back into a downloadable image.

Related tools on this site

Everything above runs inside this page. Image to Base64 needs no account, no upload, and no server round trip — close the tab and nothing is left behind.

圖片轉 Base64能做什麼

完全在瀏覽器中把圖片轉成 Base64 字串，可直接以 data URI 貼進 CSS、HTML 或 JSON。用這種方式內嵌小圖，可以為頁面省下一次網路請求——這也是圖示、載入動畫與小型商標常被內嵌而非另外抓取的原因。

什麼時候用得上

  • 把小圖示或商標內嵌進 CSS，隨樣式表一起載入。
  • 在不需外部空間的情況下，把圖片嵌進 HTML 郵件範本。
  • 透過接受 Base64 欄位的 JSON API 傳遞影像資料。

使用步驟

  1. 選擇圖片檔案。
  2. 由工具完成編碼。
  3. 複製 Base64 輸出。
  4. 加上對應的 data URI 前綴，貼進 CSS、HTML 或 JSON。

精確度、限制與實務建議

  • 務必小。Base64 會讓位元組數增加約三分之一，超過幾 KB 的內容內嵌後，代價通常大於省下的那次請求。
  • 在 CSS 中形式為 url(data:image/png;base64,...)——工具提供的是編碼本體。
  • 內嵌圖片無法單獨快取，因此嵌在 HTML 裡的 Base64 圖片每次載入頁面都會重新下載。

常見問題

什麼情況不該內嵌？

跨頁面重複使用、或大於幾 KB 的圖片。那些做成獨立檔案由快取處理更划算。

郵件裡可以內嵌嗎？

支援度不一，好幾家主流郵件軟體會封鎖或忽略 data URI，正式發送前請先測試。

可以解碼回檔案嗎？

可以，檔案 Base64 工具能把字串還原成可下載的圖片。

本站相關工具

以上步驟全部在這個頁面內完成，圖片轉 Base64 不需要註冊、不上傳檔案、也不經過伺服器，關閉分頁後不會留下任何資料。