🖼️Image ↔ Base64

Encoding images as Base64 lets you embed them directly in HTML, CSS, or JSON as plain text without needing a separate file. Drop or paste an image and this tool instantly generates a Data URL, raw Base64 string, HTML img tag, CSS background value, and Markdown image syntax.

How to Use

1
Upload an image
Drag and drop an image file onto the zone, click to browse, or paste a screenshot from clipboard (Ctrl+V).
2
Check the preview
Review the image preview along with file name, type, size, dimensions, and Base64 size.
3
Copy the format you need
Click the copy button next to Data URL, Base64, HTML img tag, CSS background, or Markdown.

Tips

💡Best suited for small icons and logos. Large images produce large Base64 strings that may impact performance.
💡Copy the CSS background value and paste it directly into an inline style or CSS file.
💡All processing happens in your browser — your images are never uploaded to a server.
💡Use the 'Base64 → Image' tab to do the reverse: paste a Base64 string or Data URL to preview and download it as an image file.

FAQ

Q. Does Base64 encoding make the image file larger?: A. Yes. Base64 represents binary data as ASCII text, increasing the size by approximately 33%. This makes it unsuitable for large images; use it only for small icons or when embedding images is strictly necessary.
Q. Where are Data URIs used?: A. Data URIs embed images directly in HTML (<img src="data:...">) or CSS (background-image). They eliminate an HTTP request for small assets, which can be useful for single-file HTML pages or email templates.
Q. Is the image data sent to any server?: A. No. All conversion happens locally in your browser using the FileReader API. Your image data never leaves your device.