Does Base64 encoding increase file size?

Yes. Base64 encoding increases data size by approximately 33%.

When should I use Base64 images vs. separate files?

Base64 is best for very small images (under 5–10KB) like icons. Larger images should be served as separate files for caching and performance.

Can I use the output directly in an tag?

Yes. Paste the full data URI (including data:image/...;base64, prefix) as the src attribute of an tag.

Why would I encode an image as Base64 in CSS or HTML?

Base64-encoded images are embedded directly in the file, eliminating HTTP requests for small images. This reduces the number of requests (improving performance for small icons and UI elements) and allows the image to be bundled in a single CSS or JS file. Common use cases: CSS background images, HTML email images (many email clients block external images), data URIs in SVG, and offline-capable applications. The tradeoff is larger file size (Base64 is ~33% larger than binary) and no browser caching benefit.

What is the maximum size image I should encode as Base64?

Keep Base64-encoded images under 2–5 KB for optimal performance. At that size, the savings from eliminating an HTTP request outweigh the increased file size. For images larger than 10 KB, a separate file with browser caching is generally faster. Large Base64 strings in CSS files block rendering until the entire CSS file is parsed. Use Base64 for icons, small logos, and UI elements; use separate optimized image files for photographs and hero images.

Home
All Tools
Image to Base64 Converter — Encode & Decode Images

B64

Image to Base64 Converter — Encode & Decode Images

Convert images to Base64 Data URLs or decode Base64 back to viewable images. Bidirectional converter.

Mode

Upload an image

📁

Drop image here

or click to select

Options

Include Data URI prefix (data:image/...;base64,)Wrap at 76 chars (MIME format)

Related Tools

Image Resizer
PNG to JPG Converter
WebP Converter

View all tools

Developer

What is Base64 Encoding? How It Works and When to Use It

A beginner-friendly guide to Base64 encoding. Learn how it works, comm…

About Image to Base64 Converter — Encode & Decode Images

Image to Base64 Converter encodes any image file (PNG, JPG, WebP, GIF) as a Base64 data URI string. Use the output to embed images directly in HTML, CSS, or JavaScript without separate HTTP requests.

How to Use

1Select or drag and drop your image file.
2Copy the generated Base64 data URI string from the output area.
3Embed it in your HTML as <img src="data:image/png;base64,..."> or in CSS as background-image.

Features

Embed images directly in HTML/CSS to eliminate extra HTTP requests
Useful for email templates, SVGs, and small icons
Supports all common image formats
Completely browser-based — no upload required

Base64エンコードとData URIの基礎知識

Base64はバイナリデータをASCII文字列に変換するエンコーディング方式です。画像・フォント・PDFなどのバイナリファイルをテキストとして扱えるようにするために使われます。Webでは主にData URIスキームと組み合わせて、HTML・CSS・JSファイル内に画像を直接埋め込む用途で活用されます。

Data URIスキームの構造

Data URIの形式は「data:[MIMEタイプ];base64,[Base64データ]」です。例えばPNG画像なら「data:image/png;base64,iVBORw0KGgo...」となります。ブラウザはこのURLを通常の画像URLと同じように解釈し、外部ファイルを取得せずにインラインで表示します。MIMEタイプにはimage/png・image/jpeg・image/webp・image/gif・image/svg+xmlなどが使えます。

HTTPリクエスト削減による効果

小さなアイコン画像をBase64でCSSに埋め込むと、その画像のHTTPリクエストが不要になります。HTTP/1.1環境では同一ドメインへの同時接続数に制限があるため、リクエスト削減は表示速度改善に直結しました。HTTP/2以降では多重化により影響が小さくなりましたが、初回ロード時にすべてのアセットをCSSとともに取得できる点は依然として有利です。

Base64サイズ増加と使いどころの判断

Base64エンコードでファイルサイズが約33%増加するため、大きな画像の埋め込みには不向きです。実用的な使いどころは1KB〜10KB程度の小さなアイコン・ロゴ・区切り線などのUI要素、または外部リクエストを完全に排除したい自己完結型のHTMLページ（メール、オフライン対応ページ）です。10KB以上の画像は外部ファイルとして提供するほうが一般的にパフォーマンスが良くなります。

CSS・HTML・メールでのBase64画像の活用方法

Base64エンコードした画像はさまざまな文脈で活用できます。それぞれの用途に合った記述方法と注意点を把握しておくことで、正しく効率的に使えます。

CSSへの埋め込み方法

CSSのbackground-imageプロパティにData URIを指定します。例：.icon { background-image: url("data:image/svg+xml;base64,PHN2Zyg..."); width: 24px; height: 24px; background-size: contain; }。SVGアイコンをBase64でCSSに埋め込むことで、画像スプライトなしでアイコンセットを管理できます。CSSファイル内のBase64データはGzip圧縮が効くため、実効サイズの増加は見かけより抑えられます。

HTMLのimgタグへの埋め込み

imgタグのsrc属性にData URIを指定します。例：<img src="data:image/png;base64,iVBORw0KGgo..." alt="ロゴ">。Javascriptでキャンバスから生成した画像をBase64で取得してimgタグに表示する場合や、ファイルをアップロードせずにプレビュー表示する場面でよく使われます。

HTMLメール（メールマガジン）での使用

HTMLメールでは外部画像URLが画像ブロッカーでブロックされる可能性があります。Base64で画像をインライン埋め込みすると、受信者の画像表示設定に関わらず確実に画像を表示できます。ただしメールサイズが増加し、一部のメールクライアント（Gmailなど）ではサイズ制限により表示が崩れる場合があるため、ロゴや重要なアイコンのみに限定するのが実用的です。76文字改行オプション（MIME形式）を使用してください。

FAQ

Does Base64 encoding increase file size?: Yes. Base64 encoding increases data size by approximately 33%.
When should I use Base64 images vs. separate files?: Base64 is best for very small images (under 5–10KB) like icons. Larger images should be served as separate files for caching and performance.
Can I use the output directly in an <img> tag?: Yes. Paste the full data URI (including data:image/...;base64, prefix) as the src attribute of an <img> tag.
Why would I encode an image as Base64 in CSS or HTML?: Base64-encoded images are embedded directly in the file, eliminating HTTP requests for small images. This reduces the number of requests (improving performance for small icons and UI elements) and allows the image to be bundled in a single CSS or JS file. Common use cases: CSS background images, HTML email images (many email clients block external images), data URIs in SVG, and offline-capable applications. The tradeoff is larger file size (Base64 is ~33% larger than binary) and no browser caching benefit.
What is the maximum size image I should encode as Base64?: Keep Base64-encoded images under 2–5 KB for optimal performance. At that size, the savings from eliminating an HTTP request outweigh the increased file size. For images larger than 10 KB, a separate file with browser caching is generally faster. Large Base64 strings in CSS files block rendering until the entire CSS file is parsed. Use Base64 for icons, small logos, and UI elements; use separate optimized image files for photographs and hero images.

bug_report

Found a bug or something not working as expected?

Report a bug →