Image to Base64 Converter

Features

• Two-Way Conversion: Encode images to Base64 and decode Base64 strings back to images — all in one screen
• Multiple Formats: Supports JPG, PNG, WebP, GIF, BMP, and SVG
• Instant data URI: Outputs a ready-to-use data URI for HTML img src or CSS background-image

How to Use

1. Upload Image: Drag an image into the left panel or click to choose a file
2. Copy Result: Copy the full data URI or just the Base64 part
3. Base64 → Image: Paste a Base64 string in the right panel to restore the image

Use Cases

• HTML Embed: Use data URI in img src to display images without a server request
• CSS Background: Embed images directly in CSS via background-image: url(data:...)
• API Payload: Include image data in REST APIs or JSON payloads as Base64
• Debugging: Quickly visualize Base64-encoded image data

Code Examples

Paste the generated data URI directly into your HTML or CSS.

HTML

<!-- Inline a data URI in img src -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...==" alt="image">

<!-- Use with the picture element -->
<picture>
  <source srcset="data:image/webp;base64,UklGRiAA...==" type="image/webp">
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...==" alt="image">
</picture>

CSS

/* data URI as background-image */
.thumbnail {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...==");
  background-size: cover;
  background-position: center;
}

/* Use in the content property */
.icon::before {
  content: url("data:image/svg+xml;base64,PHN2ZyB4bWxu...==");
}