Image to Base64
Convert images to Base64 Data URIs instantly
Input
Click to upload image
JPG, PNG, GIF, WebP, SVG (Max 5MB)Output
Image to Base64 Examples
Upload an image to get a Data URI. The output format is data:image/<type>;base64,<base64-string>. Example of a minimal 1×1 pixel PNG:
Sample Data URI output
Upload an image above to generate your own Data URI.
What Is Image to Base64?
Image to Base64 converts image files into Base64-encoded Data URIs. Base64 is defined by RFC 4648 and allows binary data to be represented as ASCII text. Data URIs (e.g., data:image/png;base64,iVBORw0KGgo...) let you embed images directly in HTML, CSS, or JSON without separate files—useful for inline icons, small images, or when you need to pass image data through text-only APIs.
This tool uses the browser's FileReader API to read your image and converts it to Base64. Processing runs entirely in your browser—nothing is sent to a server. Supported formats include JPG, PNG, GIF, WebP, and SVG. For decoding Base64 back to a viewable image, use Base64 to Image.
How to Use This Tool
Upload Image
Click the upload area or use Upload to select an image file. Supported formats: JPG, PNG, GIF, WebP, SVG (max 5 MB). The left panel shows a preview of your image.
Get the Base64 Output
The right panel updates automatically with the full Data URI. You can copy it and paste directly into HTML <img src="..."> or CSS background-image: url(...). The format is data:image/png;base64, followed by the Base64 string.
Copy or Download
Use Copy to put the Data URI on your clipboard or Download to save it as a .txt file. For encoding any file (not just images) to Base64, use Base64 Encoder. For viewing a Base64 image string, use Base64 to Image.
How It Works
The tool reads your image file as binary data using FileReader.readAsDataURL(), which returns a Data URI. The Data URI format is defined in RFC 2397 and supported by all modern browsers. Base64 encoding increases size by ~33%, so a 100 KB image becomes ~133 KB when encoded. For large images, consider whether inline embedding is appropriate—external files with caching are often better for performance.
When embedding in HTML, use <img src="data:image/png;base64,..." alt="...">. For CSS, use background-image: url('data:image/png;base64,...'). For JSON APIs that expect Base64 image strings, you can use the raw Base64 part (without the data:image/...;base64, prefix) if the API specifies that format.
Where Image to Base64 Helps
Web developers use Base64 images for small icons, logos, or sprites to avoid extra HTTP requests. Email HTML often embeds images as Base64 so they display in clients that block external images. Canvas or PDF generation may require Base64 image input. APIs that accept profile pictures or product images sometimes expect Base64 strings in the request body.
Single-page apps (SPAs) sometimes bundle small images as Base64 to reduce the number of assets. For decoding a Base64 image back to a file, use Base64 to Image. For encoding any text or file (not just images), use Base64 Encoder. For general Base64 decoding, use Base64 Decoder.
Frequently Asked Questions
Is my data private?
Yes. Conversion runs entirely in your browser. No data is sent to any server. You can confirm this by opening your browser's Network tab while using the tool.
What's the size limit?
The tool limits uploads to 5 MB. Base64 encoding adds ~33% overhead, so a 5 MB image produces ~6.7 MB of text. Very large images may slow down the browser or cause memory issues. For big images, consider using external files or a CDN.
Can I use the output in HTML/CSS?
Yes. The output is a Data URI ready for <img src="..."> or background-image: url(...). Copy and paste directly. Some older email clients may not support Data URIs; test before relying on them.
Does it support SVG?
Yes. SVG is supported. SVG files are text-based, so Base64 encoding works but increases size. For SVG, inline embedding (without Base64) is often more efficient when possible. Use Base64 Decoder to decode Base64 back to the original SVG.
Why use Base64 instead of a regular image URL?
Base64 embeds the image in the document, so no extra HTTP request is needed. For tiny icons or critical above-the-fold images, this can improve load time. For larger images, external files with caching are usually better. Base64 also works when you can't host files (e.g., in some email or API contexts).
Related Tools
For the Base64 specification, see RFC 4648. MDN's Data URIs guide covers embedding. FileReader API handles file reading in the browser.