How to Use
- 1
Upload a PNG, JPG, WebP, GIF, or SVG image by clicking the upload area or dragging it in.
- 2
The full data URL (for use in <img src="..."> or CSS background-image) and the raw Base64 string are shown immediately.
- 3
Click Copy next to either output to copy it for use in your code.
Frequently Asked Questions
What is a Base64 data URL? ▼
A data URL embeds the image directly into HTML or CSS as a Base64-encoded string instead of referencing an external file. Format: data:image/png;base64,iVBORw0KGgo... - the browser renders it without a network request.
When should I use Base64 images? ▼
Base64 images are useful for small icons and logos that should be bundled with HTML/CSS, email templates (which cannot use external images reliably), and offline-first web apps that need to embed assets.
Does Base64 increase file size? ▼
Yes. Base64 encoding increases the data size by approximately 33% compared to the binary image file. Use it selectively for small images - large images are better served as external files.
Is my image uploaded to a server? ▼
No. The encoding uses the browser's built-in FileReader API. Your image never leaves your device.