Image to Base64

Your data never leaves your browser

Convert any image to a Base64 data URI. Get the raw string, a CSS snippet, or an HTML <img> tag. Drag & drop. Nothing leaves your browser.

Output format

Drop an image here, or click to browse

PNG, JPG, GIF, WebP, SVG, BMP - max 5 MB

Ctrl+Shift+CCopyCtrl+KClearImage is converted entirely in your browser. Never uploaded anywhere.

Share this tool

Found it useful? Help a fellow developer discover it.

https://developertoolkit.dev/tools/image-to-base64

Output formats explained

Raw Base64

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.

Image to Base64

Output formats explained

When to use Image to Base64

How to convert an image to Base64

Frequently Asked Questions

Related Tools