The pure Base64 string with no prefix. Use this when you need to pass the value to an API or store it in a database.
iVBORw0KGgoAAAANSUhEUgAA…
CSS snippet
Ready to paste into a CSS rule. Useful for embedding icons or backgrounds without an extra HTTP request.
background-image: url("data:image/png;base64,…");
HTML <img>
A self-contained <img> tag. Paste directly into HTML email templates or any markup where external URLs are blocked.
<img src="data:image/png;base64,…" alt="" />
When to use Image to Base64
Base64 encoding embeds image data directly into HTML, CSS, or JavaScript so no extra HTTP request is needed. It is commonly used for small icons and sprites in CSS (eliminating a round-trip), for embedding images in HTML email templates where external URLs are blocked by email clients, and for passing images as strings in JSON API payloads. The trade-off is size: Base64 increases file size by approximately 33%, so it is best reserved for images under about 10 KB. Larger images are better served as separate files from a CDN.
How to convert an image to Base64
Drop or select your image. Drag the file onto the upload area, or click to open the file browser. PNG, JPG, GIF, WebP, SVG, BMP, and ICO files are all supported up to 5 MB.
Choose the output format. Select Raw Base64 for API payloads and database storage, CSS snippet for background images in stylesheets, or HTML img for email templates and inline markup.
Copy the result. Click the Copy button next to the output panel. The full string is copied to your clipboard and ready to paste into your code.
Use the snippet. Paste the raw Base64 into your JSON body, drop the CSS snippet into a selector, or paste the HTML tag directly into your template. No external URL or HTTP request needed.
Frequently Asked Questions
How do I convert an image to Base64 online?
Drag your image onto the upload area or click to browse your files. The tool reads the image using the FileReader API and converts it to Base64 instantly. Choose your output format (Raw Base64, CSS snippet, or HTML img tag) and click Copy. The entire process takes under 5 seconds and nothing is sent to a server.
Can I use Base64 images in HTML email templates?
Yes. HTML email is one of the most common use cases. Many email clients block external image URLs for privacy reasons, but they do render data URIs embedded directly in the HTML. Use the HTML img output format and paste it into your email template. Note that some older clients such as Outlook 2007-2013 have limited support for data URIs.
Is the image uploaded to a server?
No. The entire conversion happens in your browser using the FileReader API. The image bytes never leave your device. This makes the tool safe to use with private or confidential images.
Why is the Base64 output larger than the original file?
Base64 encoding represents every 3 bytes of binary data as 4 ASCII characters, which means the output is approximately 33% larger than the source file. This size increase is the main reason Base64 is recommended only for small assets.
What image formats are supported?
PNG, JPEG, GIF, WebP, SVG, BMP, and ICO. The MIME type is detected from the file and included in the data URI prefix automatically, so the correct format is set without any manual input.
How do I use the CSS output?
Paste the CSS snippet into any selector style block. For example: .icon { background-image: url("data:image/png;base64,..."); background-size: contain; }. This embeds the image directly in the stylesheet and eliminates an HTTP request for small icons.
What is the 5 MB file size limit?
A 5 MB image produces a Base64 string of roughly 6.7 MB. Embedding a string that large into HTML or CSS will slow page parsing significantly. For images above 1 to 2 KB, serving them as separate files from a CDN is almost always faster and more cache-friendly.
Does this work the same way for PNG and SVG files?
Yes, both are read through the same FileReader API and encoded to Base64 the same way. The only difference is the MIME type in the data URI prefix, data:image/png;base64,... for PNG versus data:image/svg+xml;base64,... for SVG. One caveat for SVG specifically: since SVG is already text-based XML, pasting it directly (without Base64) into an <img> src via a plain data:image/svg+xml,<svg>... URI is sometimes smaller than the Base64 version. Base64 is still the safer default when the SVG contains characters that would need escaping in a URI.
