Image to Base64 Converter - Encode & Decode Images Online

Convert images to Base64 strings or decode Base64 back to images. Supports PNG, JPG, SVG, GIF, and WebP. 100% client-side processing.

Input

Drop image here or click to browse

Supports PNG, JPG, SVG, GIF, WebP (max 10MB)

Output

Images are processed entirely in your browser. No files are uploaded to any server.

Frequently Asked Questions

What is Image to Base64 encoding and why would I use it?

Image to Base64 encoding converts binary image data into a text string using the Base64 alphabet (A-Z, a-z, 0-9, +, /). The resulting string can be embedded directly in HTML, CSS, or JavaScript as a Data URI (data:image/png;base64,...). This eliminates a separate HTTP request for each image, which is particularly beneficial for small images like icons, logos, and UI elements. It is also essential for email templates where external images are often blocked by email clients.

How do I use this Image to Base64 tool?

To encode: Select the 'Encode' mode, then drag and drop an image onto the upload area (or click to browse). The tool instantly generates the Base64 string. Choose your preferred output format (Raw Base64, Data URI, HTML <img>, CSS Background) and click the copy button to copy the result. To decode: Select the 'Decode' mode, paste a Base64 string or Data URI into the input textarea. The tool automatically decodes it and displays the image preview. You can then download the decoded image.

Is my image data safe? Are images uploaded to a server?

Your images are 100% safe and never leave your browser. All encoding and decoding is performed client-side using the browser's native FileReader API and atob()/btoa() functions. No image data, Base64 strings, or any information is transmitted to any server. You can verify this by checking your browser's Network tab — no upload requests are made. The tool works entirely offline after the page loads.

What image formats are supported?

This tool supports the five most common web image formats: PNG, JPEG (JPG), SVG, GIF, and WebP. Each format is automatically detected by its MIME type and correctly encoded with the appropriate Data URI prefix. SVG files, being XML-based, encode particularly well and maintain their vector quality in Base64 form. Animated GIFs preserve their animation when Base64-encoded.

What is the size overhead of Base64 encoding?

Base64 encoding increases data size by approximately 33%. This is because Base64 converts every 3 bytes of binary data into 4 ASCII characters. For example, a 30KB icon becomes roughly 40KB as a Base64 string. This makes Base64 embedding ideal for small images (under 10-20KB) where eliminating an HTTP request outweighs the size increase. For larger images (100KB+), it is generally better to serve them as separate files to take advantage of browser caching and parallel loading.

What is the difference between Raw Base64 and a Data URI?

Raw Base64 is the plain encoded string (e.g., iVBORw0KGgoAAAA...). A Data URI wraps it with a MIME type prefix: data:image/png;base64,iVBORw0KGgoAAAA... You need the Data URI format when embedding images in HTML <img src>, CSS background-image: url(...), or browser <link> tags. Raw Base64 is useful when you need just the encoded data for API payloads, database storage, or custom processing.

When should I use Base64 images vs. regular image files?

Use Base64 embedding for: small icons and logos (under 10-20KB), single-file HTML pages, email templates, CSS sprites replacement, and inline SVG alternatives. Use regular image files for: large photographs, images that benefit from browser caching, images shared across multiple pages, and images over 50KB where the 33% size overhead becomes significant. The general rule: if the HTTP request overhead is greater than the Base64 size overhead, use Base64.

Can I decode a Base64 string that does not have a Data URI prefix?

Yes. If you paste a raw Base64 string without the data:image/...;base64, prefix, the tool will attempt to decode it by assuming a default format (PNG). For best results, include the full Data URI prefix so the tool can correctly detect the image type and set the appropriate file extension when downloading.

Code Examples

// === Image to Base64 Encoding (Browser) ===

// Encode image file to Base64 Data URI
function imageToBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = () => reject(new Error('Failed to read file'));
    reader.readAsDataURL(file);
  });
}

// Extract raw Base64 from Data URI
function extractRawBase64(dataUri) {
  const commaIndex = dataUri.indexOf(',');
  return commaIndex !== -1 ? dataUri.substring(commaIndex + 1) : dataUri;
}

// Format output for different use cases
function formatBase64Output(dataUri, format) {
  switch (format) {
    case 'raw': return extractRawBase64(dataUri);
    case 'html': return `<img src="${dataUri}" alt="" />`;
    case 'css': return `background-image: url(${dataUri});`;
    default: return dataUri;
  }
}

// === Base64 to Image Decoding ===

function base64ToBlob(base64Input) {
  let dataUri = base64Input.trim();
  if (!dataUri.startsWith('data:')) {
    dataUri = `data:image/png;base64,${dataUri}`;
  }
  const [header, data] = dataUri.split(',');
  const mimeMatch = header.match(/data:(.*?);/);
  const mimeType = mimeMatch ? mimeMatch[1] : 'image/png';
  const byteString = atob(data);
  const byteArray = new Uint8Array(byteString.length);
  for (let i = 0; i < byteString.length; i++) {
    byteArray[i] = byteString.charCodeAt(i);
  }
  return new Blob([byteArray], { type: mimeType });
}

// Usage
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', async (e) => {
  const file = e.target.files[0];
  const dataUri = await imageToBase64(file);
  console.log('HTML:', formatBase64Output(dataUri, 'html'));
});