Image to Base64
Convert any image to Base64, Data URL, HTML, CSS, Markdown, or JSON — with instant inline preview and pixel dimensions. Runs entirely in your browser, nothing is uploaded.
Image to Base64 Converter
Upload an image, choose a format, copy the embeddable code.
Drop image here
or click to browse
Processed locally — nothing is uploaded
Have a Base64 string to convert back to an image?
Decode a Base64 string or Data URL back to an image with preview and download support.
How to Convert an Image to Base64
Upload an image
Drag and drop or click to select a PNG, JPEG, GIF, WebP, SVG, or AVIF file. The image is instantly previewed and pixel dimensions are shown.
Choose an output format
Pick from Data URL, HTML img, CSS background-image, Markdown, Raw Base64, or JSON. Every format is ready to paste directly into code.
Copy or download
Click copy to send the result to your clipboard. For large images, downloading a .txt file is more reliable than the clipboard.
Image to Base64 Output Formats
Six formats — each ready to paste directly into code.
Embed an image inline anywhere a URL is accepted. Works in HTML src, CSS url(), and as a general-purpose container format.
data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...
A ready-to-paste img tag with the Base64 Data URL as src, plus auto-detected width and height attributes.
<img src="data:image/png;base64,..." alt="logo" width="200" height="200" />
A .element rule with background-image pointing to the encoded image, plus width, height, and background-size.
.element { background-image: url("data:image/png;base64,..."); }Inline image syntax for Markdown documents. Works in GitHub READMEs, Notion, and anything that renders Markdown.
The encoded string only, with no prefix. Use this when the receiver needs just the Base64 data and not a full Data URL.
iVBORw0KGgoAAAANSUhEUgAAADAAAA...
A structured JSON object with filename, MIME type, pixel dimensions, encoding, and Base64 data — ready for API payloads.
{ "mime": "image/png", "width": 200, "data": "iVBOR..." }When Should You Use Base64 Images?
Base64 encoding works best for small images that need to be portable or embedded directly in code.
No external image requests
Inline images load with the page — no extra HTTP requests, no CDN dependency, no broken images if the server goes down.
Self-contained HTML files
Create portable HTML files with all images already embedded. Open them offline, share as a single file, or use as email templates.
CSS icons and small graphics
Embed small UI icons and decorative images directly in CSS, making your stylesheet fully self-sufficient.
API and JSON payloads
Transmit image data via REST or GraphQL without multipart form encoding. The JSON format is ready to paste.
Markdown documents
Inline screenshots or diagrams into Markdown docs, READMEs, or wiki pages without hosting the images separately.
HTML email templates
Many email clients block external linked images. Using Base64 embeds ensures images always display correctly.
Frequently Asked Questions
Which image formats are supported?
Any image format readable by the browser File API: PNG, JPEG, GIF, WebP, SVG, AVIF, ICO, BMP, and TIFF. The MIME type is auto-detected.
Does encoding to Base64 reduce image quality?
No. Base64 is lossless encoding — it converts binary data to text and back without losing any information. The decoded image is identical to the original.
Why is the Base64 output larger than the original?
Base64 represents every 3 bytes as 4 ASCII characters, so the output is about 33% larger than the original file. This is expected and unavoidable.
Do Data URLs work in all browsers?
Yes. Data URLs are supported in all modern browsers and have been part of the HTML specification for a long time. The only exception is the discontinued IE, which had a 32 KB size limit.
Are large images suitable for Base64?
Generally no. For images larger than a few kilobytes, serving via URL is more efficient — browsers can cache URL-referenced images, while Data URLs are re-parsed on every page load.
Is the image uploaded to a server?
No. The FileReader API runs entirely in the browser. Your image data never leaves your device.