Monu Tools

画像をBase64に変換

ブラウザ内で画像をHTML・CSS・JSONに埋め込むためのBase64データURIに変換します。

画像→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はいつ使うべきですか?

アイコンなどの小さい画像で、ネットワークリクエストを1回省くことがサイズ増加に見合う場合です。大きな画像には通常のファイルの方が適しています。

なぜBase64はファイルより大きいのですか?

Base64エンコーディングは限られたテキスト文字セットでバイナリデータを表現するため、約33%のオーバーヘッドが生じます。

出典

このツールを埋め込む

このツールをご自身のウェブサイトに追加できます。下のコードをコピーしてください。内容は自動的に最新の状態に保たれます。

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

関連ツール