image to Base64 converter

How to use the image to Base64 converter

  1. Drop or pick an image file — JPEG, PNG, GIF, WebP, or SVG all work.
  2. The Base64-encoded data URL appears instantly in the output box.
  3. Pick a wrap option: copy as a raw data URL, paste-ready CSS `background-image`, or HTML `<img src="...">`.
  4. Use the size estimate to confirm the encoded string isn't too large for your stylesheet.
  5. Copy the output — runs entirely in your browser, no upload.

When to use it

Useful for inlining tiny images (logos, icons, decorative backgrounds) into CSS or HTML to skip an extra network request. Best for assets under 5 KB; larger images bloat your HTML/CSS payload more than they save in HTTP requests. Alternative: use a build tool plugin (`url-loader` in webpack, `?inline` in Vite) for automatic inlining at build time.

Example

A small PNG icon as an inline CSS background:

.icon {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...");
  width: 24px;
  height: 24px;
}

Frequently asked questions

What is Base64 image encoding?
A way to represent binary image bytes as ASCII text using 64 printable characters. The result is ~33% larger than the original binary but can be embedded directly in HTML, CSS, or JSON.
When should I inline images as Base64?
When the image is under ~5 KB and used in a context where saving an HTTP request matters — critical above-the-fold CSS, email templates, or inlined SVG fallbacks. Larger assets are better served as separate files.
Why is my Base64 string huge?
Encoding adds 33% overhead to the binary size. A 50 KB JPEG becomes ~67 KB of Base64 text. Compress the image first (try our image compressor) before encoding.
Can I decode Base64 back to an image?
Yes — paste the data URL into a browser address bar to view it, or use the Base64 decoder tool to extract the raw bytes.
Are SVG images good Base64 candidates?
Often yes — SVG is already text and compresses well. For SVGs you control, also consider inlining the raw `<svg>` markup instead of Base64-encoding it (smaller and lets CSS style the SVG).

Related tools

Last updated: 2026-04-27