Image to Base64

🖼️ Overview

Convert image files to Base64 strings for embedding directly in HTML, CSS, or JavaScript without separate image URLs.

📖 How It Works

Base64 encodes binary data using 64 printable characters. It is often used where text-only channels are required, such as email (MIME) and some XML payloads.

An image encoded as Base64 becomes a single string you can use in place of a file URL.

✨ Features

• Many formats: JPEG, PNG, GIF, WebP, SVG, and more.
• Drag and drop: Drop a file onto the upload area to convert.
• Live preview: See the image and Base64 output right after upload.
• One-click copy: Copy the Base64 string to the clipboard.
• Online preview: Open a preview of the encoded image.
• Local processing: Everything runs in your browser for privacy.

💡 Steps

1. Drag an image onto the upload area, or click to choose a file.
2. The image is converted to Base64 automatically.
3. The result appears in the text box below.
4. Click "Preview" to open the image in a new window.
5. Click "Copy" to copy the Base64 string.

📋 Supported Formats

• Input: JPEG, PNG, GIF, WebP, SVG, BMP, ICO, and more.
• Output: Base64 string.
• File size: Under 10MB recommended; very large files may be slow.

🎯 Use Cases

• Embed small icons and decorations in web pages.
• Base64 backgrounds in CSS.
• Inline images in email templates.
• Image assets in mobile apps.
• Offline image storage.
• Fewer HTTP requests for small assets.

⚠️ Notes

• Base64 increases file size by about 33%.
• Large images produce very long strings.
• Best for small images (under ~100KB).
• For CSS url(), you need a data:image/… prefix.
• This tool includes the data:image/ prefix automatically.
• All processing is local — nothing is uploaded.

💻 Examples

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==" alt="image">

background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==');

const img = new Image();
img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==';

❓ FAQ

• Does Base64 make files larger?
  Yes — about 33% larger, because every 3 bytes become 4 characters.
• When should I use Base64 images?
  For small assets (under ~100KB) where fewer requests help load time.
• Which image formats are supported?
  JPEG, PNG, GIF, WebP, SVG, BMP, ICO, and other common formats.
• Can I use the output string as-is?
  Yes — it includes the data:image/ prefix for HTML, CSS, and JavaScript.
• Can I convert large images?
  Yes, but very large images create long strings that are hard to maintain in code.