Convert images to Base64 - instant, private, copy-ready.
Turn JPG, PNG, WebP, GIF, and SVG files into Base64 data URIs, raw Base64 strings, or embeddable HTML img tags. Batch convert multiple files, copy to clipboard in one click. No upload, no server, runs in your browser.
Drop your images here
or browse files or paste from clipboard
How to convert images to Base64 online.
Upload your images
Drag JPG, PNG, WebP, GIF, or SVG files onto the upload area. Select multiple files for batch conversion. On mobile, tap to browse your photo library. You can also paste a screenshot from your clipboard with Ctrl+V (Cmd+V on Mac).
Choose your format
Each image shows three output tabs. Data URI gives you the full data:image/... string for CSS and HTML. Raw Base64 gives the encoded string without the prefix for API payloads. HTML Tag gives a ready-to-paste img element with width and height attributes.
Copy to clipboard
Click the Copy button below any output to copy the full string to your clipboard. The button shows a brief "Copied!" confirmation. Paste directly into your CSS file, HTML template, API request body, or email markup.
Who uses Base64 images and why.
CSS background images under 10 KB
Small icons, loading spinners, and decorative dots embedded directly in CSS with background-image: url(data:image/png;base64,...). A 2 KB spinner as Base64 adds 2.7 KB to your stylesheet but eliminates one HTTP request. For sites loading 8-12 tiny assets, inlining saves 8-12 round trips and reduces time to first render by 200-400 ms on 3G connections. Webpack and Vite do this automatically for imports under their size threshold (default 4 KB in Vite).
Email HTML templates
Gmail, Outlook, and Apple Mail block external images by default until the user clicks "display images." Base64-inlined images render immediately without that prompt. Logos, social icons, and divider graphics under 20 KB work well inline. Keep total email HTML under 102 KB to avoid Gmail clipping. Mailchimp, SendGrid, and Amazon SES all support Base64 inline images in their HTML email APIs.
Single-file HTML pages
Embedding all images as Base64 creates a self-contained HTML file with zero external dependencies. Useful for offline documentation, portable reports, and HTML exports from tools like Jupyter notebooks or Google Docs. A 500 KB HTML file with 10 inlined thumbnails loads from disk without a server. The tradeoff is file size - the same page with external images and HTTP/2 multiplexing loads faster over a network.
API payloads and JSON fields
REST and GraphQL APIs that accept image data in JSON body fields need Base64 because JSON cannot contain raw binary. OpenAI's Vision API, Anthropic's Messages API, Twilio MMS, and Stripe identity verification all accept Base64-encoded images. The raw Base64 format (without the data URI prefix) is what most APIs expect. Typical payload limit is 20 MB encoded, which corresponds to roughly 15 MB of original image data.
Base64 vs external files - when to use which.
The decision comes down to file size and context. Base64 adds 33% overhead to every image. A 10 KB icon becomes 13.3 KB of text. For a single small asset, that overhead is less than the cost of an HTTP request (which adds 100-300 ms of latency on mobile networks). For larger images, the math flips - a 100 KB photo becomes 133 KB of non-cacheable text embedded in your HTML or CSS.
Under 10 KB - use Base64
Favicons, 1x1 tracking pixels, tiny UI icons, loading spinners, and simple logos. The Base64 overhead (3.3 KB on a 10 KB file) is smaller than the TCP+TLS handshake cost of a separate HTTP request. Vite inlines imports under 4 KB by default. Webpack's url-loader uses an 8 KB threshold. Both exist because the performance math favors inlining at that scale.
Over 10 KB - use external files
Photos, illustrations, hero images, and anything that benefits from browser caching. A 50 KB external PNG gets cached after the first page load and costs zero bytes on subsequent visits. The same image inlined as Base64 adds 66.7 KB to every single page load because inline data cannot be cached independently. If you need to resize images before serving them, do that first to get the file size under your threshold.
Email templates - always Base64
Email clients (Gmail, Outlook, Yahoo Mail, Apple Mail) block external image loading by default. The user sees a broken image icon until they click "display images." Base64-inlined images bypass this entirely and render on open. The 33% size overhead is worth it because email has no caching mechanism anyway - every open re-downloads the full HTML. Keep individual images under 20 KB and total email size under 102 KB (Gmail's clipping threshold).
Combining with other tools
For the best results, optimize your images before encoding. Use the JPG compressor to reduce file size before converting to Base64. If you need to convert between formats first, the JPG to PNG converter handles that. For combining multiple images into one before encoding, use the JPG Joiner to merge them first.
Merge images together?
Combine multiple photos into one image with vertical, horizontal, or grid layouts.
JPG JoinerConvert JPG to PNG?
Convert JPEG and WebP images to lossless PNG format with transparency support.
JPG to PNGCompress JPG files?
Reduce JPG file size before converting to Base64 for smaller encoded output.
Compress JPGConvert images to PDF?
Turn JPG or PNG files into a multi-page PDF document for sharing or printing.
JPG to PDFNeed lossless PNG merge?
Merge PNG files without quality loss. Transparency and sharp edges preserved.
Merge PNGFrequently asked questions.
What is Base64 encoding?
Base64 is a binary-to-text encoding that represents binary data using 64 ASCII characters (A-Z, a-z, 0-9, +, /). It converts every 3 bytes of binary data into 4 ASCII characters. A 3 KB icon becomes a 4 KB text string. The encoding exists because many systems - email (SMTP), JSON APIs, CSS url() values, HTML attributes - only accept text, not raw binary. Base64 bridges that gap by turning any file into a safe text representation.
When should I use Base64 images instead of external files?
Use Base64 for images under 10 KB - favicons, tiny icons, simple logos, 1x1 tracking pixels, and small UI elements. At that size, the HTTP request overhead (DNS lookup, TCP handshake, TLS negotiation) costs more than the 33% size increase from Base64. For images over 10 KB, external files are better because browsers can cache them independently, load them in parallel, and avoid bloating your CSS or HTML. Email HTML templates are the exception - always inline with Base64 because email clients block external image loads by default.
How much larger is a Base64 string compared to the original file?
Base64 increases file size by exactly 33% (4/3 ratio) plus a few bytes of padding. A 9 KB PNG becomes a 12 KB Base64 string. A 30 KB JPG becomes 40 KB of text. This overhead compounds when the Base64 string sits inside a CSS or HTML file that also gets gzip-compressed for transfer - gzip recovers some of the bloat (typically 10-15%), but the decoded size in the browser DOM is still the full 33% larger. For a data URI, add another 20-30 bytes for the data:image/png;base64, prefix.
What is the difference between a data URI and raw Base64?
A data URI includes a header that tells the browser how to interpret the data: data:image/png;base64,iVBORw0KGgo... The header specifies the MIME type (image/png) and encoding (base64). Raw Base64 is just the encoded string without the header: iVBORw0KGgo... Use data URIs in CSS background-image url() values and HTML src attributes. Use raw Base64 when sending image data to APIs that expect the payload without the data URI prefix, or when storing in databases where the MIME type is tracked separately.
What is the maximum image size I should Base64 encode?
Keep Base64 images under 10 KB (original file size) for CSS embedding. Google Lighthouse flags render-blocking CSS, and a 100 KB Base64 image inside your stylesheet adds 133 KB of uncompressed text to every page load. For inline HTML img tags, 20-30 KB is a reasonable upper limit - beyond that, the HTML document becomes too heavy for fast First Contentful Paint. Email templates can go higher (up to 100 KB per image) because there is no external file alternative, but keep total email size under 102 KB for Gmail clipping avoidance.
Do all browsers support Base64 data URIs?
Every modern browser supports data URIs - Chrome, Firefox, Safari, Edge, and all mobile browsers from 2012 onward. Internet Explorer 8 added partial support with a 32 KB limit per data URI. IE 9+ removed that limit. The only practical restriction today is that some Content Security Policy (CSP) configurations block data: URIs by default. If your site uses a strict CSP, add data: to the img-src directive to allow inline Base64 images.
Is this tool safe? Does it upload my images?
No images leave your device. The conversion uses the browser FileReader API to read the file locally and output the Base64 string entirely in JavaScript. Open your browser developer tools (F12), switch to the Network tab, and convert an image - you will see zero outgoing requests. The tool runs on static HTML and JavaScript with no server backend. Close the tab and all data is cleared from memory.
Can I Base64 encode SVG files?
Yes, but SVG is already text-based XML, so Base64 encoding an SVG is often unnecessary. A raw SVG data URI (data:image/svg+xml,...) without Base64 is typically 20-30% smaller because you skip the 33% encoding overhead. This tool provides the Base64 version for compatibility with systems that require Base64, but for CSS background images, consider using the raw SVG in a url() with percent-encoding instead. The Base64 version works everywhere, while the unencoded version fails in some older email clients.