Stax
Tools

Image to Base64 Converter

Convert any image to Base64 or Data URI instantly.

🖼️
Drop an image here or click to browse
PNG, JPG, GIF, WebP, SVG — any image format

Base64画像エンコーディングの用途

2つの出力フォーマットの解説

HTMLとCSSでBase64画像を使う方法

Base64画像エンコーディングはWebサイト開発で画像をHTML・CSS・JavaScriptファイルに直接インライン化するために使用される技術です。外部の画像ファイルにリンクする代わりに、画像全体をテキスト文字列として埋め込みます。これによりHTTPリクエストが排除され、リソースが完全に自己完結します。

フロントエンド開発者は小さなアイコンとロゴをBase64データURIとしてCSSファイルに埋め込み、余分なHTTPリクエストを排除してファーストペイント時のレイアウトシフトを防ぎます。メールテンプレートデザイナーはメールクライアントが外部画像の読み込みをブロックする場合でも正しく表示されるようにBase64として画像をインライン化します。モバイルアプリ開発者はアプリにバンドルするためにJSONコンフィグファイルに小さなUIアセットをBase64文字列として保存します。JSON形式のリクエストボディとして画像アップロードを受け付けるAPI統合では、純粋なBase64文字列としてエンコードされた画像が必要なことがよくあります。

  • Data URI — MIMEタイプのプレフィックスを含む（例：data:image/png;base64,...）。HTMLのsrc属性・CSSのbackground-image: url(...)・メールテンプレートで直接使用します。
  • 純粋なBase64 — プレフィックスなしの生のエンコード文字列。APIやデータベースフィールドがData URI全体ではなくBase64データのみを期待する場合に使用します。
  • HTML imgタグ：<img src="data:image/png;base64,ABC..." />
  • CSSのbackground：background-image: url('data:image/png;base64,ABC...');
  • メールHTML：メールに画像をインライン化することで、メールクライアントが画像をブロックする際の壊れた画像の問題を防ぎます。

よくある質問

What is Base64 encoding for images?
Base64 encoding converts binary image data into a string of ASCII characters. This lets you embed an image directly inside HTML, CSS, or JSON without needing a separate file. The encoded string is about 33% larger than the original binary file.
What is a Data URI?
A Data URI (data URL) is a complete image reference embedded as a string. It has the format: data:[mediatype];base64,[base64data]. You can use it directly in the src attribute of an <img> tag, as a CSS background-image value, or anywhere a URL is accepted.
Is my image uploaded to a server?
No. This tool runs entirely in your browser using the FileReader API. Your image is never sent to any server. It is read and converted locally, making this tool safe to use with sensitive or private images.
Why is the Base64 output larger than the original image?
Base64 encodes every 3 bytes of binary data into 4 ASCII characters, resulting in approximately 33% size overhead. For example, a 100 KB image will produce roughly 133 KB of Base64 text. This is the inherent cost of representing binary data as text.
When should I use Base64 images vs regular image files?
Use Base64 for small icons, logos, or images that are part of a CSS/HTML file to save an HTTP request. Avoid Base64 for large images — the size overhead and lack of browser caching make it slower than serving a regular image file. A common rule of thumb: use Base64 only for images under 5–10 KB.

関連ツール