K
ken
中文
HomeArticles🕐 Time Converter📋 JSON Tools🖼️ Base64 Image🔑 Password Generator⏰ Cron Expression🔤 Case Converter📱 QR Code#️⃣ Hash🔡 Encoding🔍 Regex Tester⚙️ Config Convert🔐 Encrypt/Decrypt⚖️ BMI Calculator🎲 Random Data🗜️ Image Tools🌍 World Clock🏛️ Roman Numeral🔢 Number to Chinese💰 Loan Calculator

Base64 Image

Base64 encodes arbitrary binary data using 64 printable characters (A-Z, a-z, 0-9, +, /). It's widely used in web development — inlining small icons in HTML/CSS to reduce HTTP requests, embedding images in HTML emails to avoid broken links, and transmitting binary files in JSON APIs. This tool converts between Base64 strings and image files instantly, supporting PNG, JPEG, GIF, and WebP formats.

All processing happens entirely in your browser using the Canvas API and FileReader — your images are never uploaded anywhere. Supports drag-and-drop, live preview, and one-click copy of Base64 data URLs. Perfect for frontend developers who need quick Base64 encoding during development.

Base64 → Image

Image → Base64

🖼️

Click or drag to upload

PNG / JPG / GIF / WebP

📖 Base64 Image Tool Guide

What Is Base64?

Base64 is an encoding scheme that represents binary data using 64 printable ASCII characters (A-Z, a-z, 0-9, +, /). Every 3 bytes (24 bits) of raw data are split into 4 groups of 6 bits, each mapped to a Base64 character. If the input is not a multiple of 3 bytes, = padding is added. The encoded output is ~33% larger than the original, but the benefit is safe transmission of binary data through text-based protocols (HTML, CSS, JSON, Email, XML).

Base64 Data URL Format

data:[<MIME type>][;base64],<encoded data> Example: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA... MIME type is auto-detected from the uploaded file (image/png, image/jpeg, etc.)

Features

  • Image → Base64: Select an image file (PNG/JPG/GIF/WebP) to instantly generate a complete data:image/...;base64 Data URL. Drag-and-drop supported.
  • Base64 → Image: Paste a Base64 string (raw encoding or full Data URL) to preview the decoded image in real time.
  • Live preview: See the result immediately — verify your conversion is correct.
  • Copy with double-click: Copy the full Data URL, ready for <img src> or CSS background-image.

How to Use

  1. Image → Base64: Click or drag an image file onto the panel — the Data URL is generated automatically. Double-click to copy.
  2. Base64 → Image: Paste a Base64 string into the text box. The image preview appears on the right. Both raw encoding and full data: URL formats are accepted.
  3. The tool auto-detects the input format — paste either raw Base64 or a complete Data URL.

Embedding Base64 in HTML

<!-- Image tag with inline Base64 --> <img src="data:image/png;base64,iVBOR..."/> <!-- CSS background with inline Base64 --> background-image: url(data:image/png;base64,iVBOR...);

Tips & Caveats

  • Good for: Small icons (< 5KB), email-embedded images, eliminating HTTP requests. The ~33% size increase is negligible for small images compared to the overhead of an extra HTTP round trip.
  • Bad for: Large images (> 100KB). The larger encoded size plus the inability to cache across page loads (the image reloads with every page) make external URLs with proper caching a better choice.
  • Privacy: All processing is client-side using the Canvas API and FileReader. Your images never leave your browser. Verify in DevTools → Network: zero image upload requests.
  • Format support: PNG, JPEG, GIF, WebP. Other formats (BMP, SVG) may not preview correctly.