Monu Tools

圖片轉 Base64

在瀏覽器中將圖片轉換為 Base64 資料 URI,用於嵌入 HTML、CSS 或 JSON。

如何使用 圖片轉 Base64

  1. 01

    從裝置選擇圖片。

  2. 02

    複製資料 URI,或現成的 CSS 片段。

  3. 03

    貼入您的 HTML、CSS 或 JSON 中。

What this converter does

This image to Base64 converter turns a picture into a data URI, a long text string that embeds the image directly, plus a ready-to-use CSS background snippet. You can inline an image instead of linking to a separate file.

It runs locally in your browser, so your image is read on your device and never uploaded.

Why inline an image

A data URI carries the whole image inside the markup, so the browser does not make a separate network request to fetch it. For small assets like icons, that saved round trip can make a page feel faster.

The trade-off: size and caching

The catch is size and caching. Base64 adds roughly 33 percent overhead because it represents binary data with a limited text alphabet, and an inlined image cannot be cached separately, so it is downloaded again with every page that contains it.

The rule of thumb is to inline small images, icons, tiny logos or a sprite, where avoiding a request is worth the overhead, and to keep larger images as normal files that the browser can cache and load in parallel.

Where data URIs work

Data URIs work anywhere a URL is accepted: an img src, a CSS background, or a field in JSON or an email template. That makes them handy for self-contained snippets.

常見問題

我的圖片會上傳到伺服器嗎?

不會。圖片完全在瀏覽器中讀取,不會離開您的裝置。

什麼時候應該使用資料 URI?

適用於圖示等小型圖片,避免額外的網路請求值得增加的大小。對於大型圖片,使用普通檔案更好。

為什麼 Base64 比檔案更大?

Base64 編碼使用有限的文字字元集表示二進位資料,因此會增加約 33% 的開銷。

來源

嵌入此工具

將此工具加入你自己的網站。複製下方的程式碼片段,它會自動保持最新。

<iframe src="https://monu.tools/embed/zh-Hant/image-to-base64" width="100%" height="640" style="border:1px solid #e5e5e5;border-radius:12px;max-width:680px" loading="lazy" title="Monu Tools"></iframe>

相關工具