Image to Base64 Converter
Convert images to Base64 data URI strings instantly in your browser. Perfect for CSS, HTML embedding and JSON payloads. No upload.
ファイルをここにドロップ、またはクリックして選択
対応形式: .png, .jpg, .jpeg, .gif, .webp, .svg, .bmp · 最大: 20MB
📘 使い方
ガイドは英語のみ。自動翻訳は近日公開予定。
How to Convert an Image to Base64
What This Tool Does
The Image to Base64 Converter encodes any image (PNG, JPG, GIF, WebP, SVG, BMP) into a Base64 string. Two output formats are supported: a complete data URI (data:image/png;base64,...) ready to paste into HTML or CSS, and raw Base64 for APIs and JSON payloads.
Why Embed Images as Base64?
Base64 embedding eliminates HTTP requests: the image travels inside your HTML, CSS, or JSON instead of being fetched separately. This is useful for small icons, logos, and illustrations where a separate request costs more latency than the larger encoded payload. Email templates also rely on data URIs because many email clients block external images by default — embedding keeps your design intact.
When NOT to Use Base64
Base64 inflates file size by roughly 33%. For large photos or hero images, a regular image file with browser caching and next-generation compression (WebP/AVIF) is almost always better. The sweet spot for embedding is images under 10KB: icons, simple badges, and small graphics reused across pages.
How to Use
- Drop your image onto the upload zone (or click to browse).
- Choose output format: data URI for HTML/CSS embedding, raw Base64 for API use.
- Click Convert. The encoded string appears in the preview area.
- Copy it to your clipboard or download it as a .txt file.
Usage Examples
In CSS:
.logo { background-image: url("data:image/png;base64,iVBORw0KGgo..."); }
In HTML:
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxu..." alt="logo" />
Privacy and Limits
The image is read with the FileReader API entirely in your browser — nothing is uploaded. Files up to 20MB are supported, though very large images produce very long strings that may slow down your editor; most embedding use cases involve much smaller files.
❓ よくある質問
Which image formats are supported?
PNG, JPG/JPEG, GIF, WebP, SVG, and BMP. Any format the browser can read as a binary file works, since encoding is format-agnostic.
Data URI vs raw Base64 — which should I choose?
Data URI includes the mime prefix (data:image/png;base64,) and works directly in HTML src attributes and CSS url(). Raw Base64 is just the encoded bytes, for APIs and JSON payloads.
Why is my Base64 string larger than the original file?
Base64 encoding represents 3 bytes as 4 characters, adding ~33% overhead. This is normal and expected.
Is my image uploaded to a server?
No. The file is read locally with the FileReader API and encoded in your browser. Nothing leaves your device.