What is a Base64 data URI for images?

A Base64 data URI is a text representation of an image file that can be embedded directly in HTML, CSS, or JavaScript. It uses the format data:[mime-type];base64,[encoded-data] and allows browsers to render the image without making a separate HTTP request for the file.

Does Base64 encoding increase file size?

Yes, Base64 encoding increases the data size by approximately 33% compared to the original binary file. A 10KB image becomes roughly 13.3KB as a Base64 string. This is because Base64 uses 4 ASCII characters to represent every 3 bytes of binary data.

When should I use Base64 images instead of regular image files?

Base64 images are best for small assets under 10KB like icons and logos, where eliminating HTTP requests improves performance. They are also useful in email templates and single-file HTML applications. For larger images, regular file references are more efficient due to the 33% size increase of Base64 encoding.

Image to Base64

画像をBase64データURIに変換。CSS・HTML・JSONで使用可能。

How to Use the Image to Base64 Converter

This free online tool converts any image file to a Base64-encoded data URI string directly in your browser. Simply upload an image (JPEG, PNG, WebP, SVG, GIF, or BMP), and the tool instantly generates the corresponding data URI. You can then copy the result with one click for use in HTML, CSS, JavaScript, or JSON files. All processing happens client-side, so your images are never uploaded to any server.

What Is a Base64 Data URI?

A Base64 data URI is a way to embed binary file data directly in text-based formats. It uses the format data:[mime-type];base64,[encoded-data]. For images, this allows you to include the entire image inline in an HTML document, CSS stylesheet, or JSON payload without needing a separate image file. The browser decodes the Base64 string and renders the image just like a regular file reference.

When to Use Base64 Images

Base64 encoding is ideal for small images like icons, logos, and UI elements (typically under 10KB). Embedding these inline eliminates extra HTTP requests, which can improve page load performance. It is also useful for email templates where external image links may be blocked, and for single-file HTML applications. However, Base64 encoding increases the data size by approximately 33%, so it is not recommended for large photographs or images where file size is critical.

Size Considerations

The Base64 string is roughly 33% larger than the original binary file. For example, a 10KB image becomes approximately 13.3KB when Base64-encoded. The tool displays both the original file size and the resulting string length so you can evaluate whether inline embedding is appropriate for your use case. For large images, consider using the Image Compressor to reduce file size before converting to Base64.

Image to Base64の使い方

このツールは画像ファイルをBase64エンコードされたデータURIに変換します。JPEG、PNG、WebP、SVG、GIFなどの画像をアップロードすると、即座にデータURIが生成されます。HTML、CSS、JavaScriptやJSONファイルにインライン画像として埋め込む際に便利です。すべての処理はブラウザ内で完結します。

よくある落とし穴と対処 / Common Pitfalls

落とし穴 / Pitfall	問題 / Problem	対処 / Fix
サイズが約1.37倍に増える Size grows by ~37%	Base64は3バイトを4文字で表すため必ず肥大化する Base64 encodes 3 bytes as 4 chars	埋め込みは小さい画像(目安10KB以下)に限定。先に圧縮する Inline only small images; compress first
大きい画像を埋め込んで遅くなる Large inlined images slow pages	データURIはキャッシュ分離・並列取得が効かず、HTML/CSS自体が肥大 Data URIs bypass caching and parallel fetch	大きい画像は通常のファイル参照+CDNで配信 Serve big images as normal files
CSPでブロックされる Blocked by CSP	img-src に data: が許可されていないと表示されない img-src must allow data:	必要なら CSP に img-src data: を追加(script等には付与しない) Allow data: for images only
メール署名で表示されない Not rendering in email clients	データURI画像をサポートしないメールクライアントがある(特にGmail) Some clients (Gmail) ignore data URIs	メールはホスティング画像+絶対URLが確実 Use hosted images for email
SVGの埋め込みでエスケープ崩れ SVG data URIs break	SVGはBase64より URLエンコード(utf8)の方が小さく安全な場合が多い URL-encoded SVG is often smaller	SVGは data:image/svg+xml;utf8, 形式も検討 Consider utf8 encoding for SVG

使用例 / Usage Examples

<!-- HTML -->
<img src="data:image/png;base64,iVBORw0KG..." alt="icon" />

/* CSS */
.icon { background-image: url("data:image/png;base64,iVBORw0KG..."); }

// fetchせずにJSONへ画像を同梱
{ "avatar": "data:image/jpeg;base64,/9j/4AAQ..." }

Why browser-only?

The images you inline are usually assets from unreleased products or private documents. This converter reads the file with the FileReader API entirely in your browser — the image itself never travels anywhere; only you see the resulting data URI. Offline-capable, with zero requests in the DevTools Network tab.

変換はFileReader APIでブラウザ内処理され、画像が外部送信されることはありません。文字化けの仕組みはBase64文字化けの原因と対処もどうぞ。