Image to Base64 Converter — Free Data URI Generator
Upload a PNG, JPG, WebP, GIF, or SVG and get a ready-to-paste Base64 data: URI for your HTML, CSS, or JavaScript. Free, and 100% in your browser — files up to 5MB never leave your device.
Image to Base64: Turn Any Image Into a Data URI
An Image to Base64 converter reads an image file and encodes its bytes as a Base64 text string wrapped in a data: URI, so you can paste the image straight into HTML, CSS, or JavaScript with no separate file. Upload a PNG, JPG, WebP, GIF, or SVG up to 5MB and copy the result. It runs 100% in your browser — free, with no upload.
How to convert an image to Base64
- Click the upload area or drag and drop an image (PNG, JPG, WebP, GIF, or SVG).
- Keep the file under 5MB — larger uploads are rejected to protect page-load time.
- The full
data:URI appears instantly in the result panel, with the correct MIME type already in the prefix. - Check the Original vs Encoded size and the character count to gauge the ~33% overhead.
- Press Copy Result to grab the string, or Download to save it as a
.txtfile.
What is a Base64 data URI and how does it work?
Base64 maps binary data onto a 64-character alphabet (A–Z, a–z, 0–9, +, /) defined in RFC 4648. It reads 3 bytes at a time and emits 4 characters, padding the tail with =. That 4:3 ratio is why Base64 output is about 33% larger than the source bytes.
A data URI (data URL) wraps that text so a browser treats it as an inline resource. The format, defined in RFC 2397 (August 1998), is data:[<mediatype>][;base64],<data> — for example data:image/png;base64,iVBORw0KGgo.... This tool builds the URI with the browser's FileReader.readAsDataURL() API (see the MDN reference), which detects the file's MIME type and prepends it automatically.
"A data URL may be used in any context where a URL might be placed, including thesrcandhrefattributes…"— RFC 2397, IETF
Worked examples: image → data URI
PNG in an HTML <img>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==" alt="1px dot" />
SVG icon in a CSS background
.icon { background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i..."); }
Edge case · the "Encoded" size is text, not pixels
The Encoded figure is the length of the data URI string, not a re-compressed image. A 9KB PNG yields a ~12KB string — bigger than the original. Encoding never shrinks an image; to actually reduce bytes, compress first with the Image Compressor, then encode.
Data URI reference: MIME types and size math
The prefix before the comma tells the browser what the data is. Use the right mediatype for each format, and budget for the ~33% expansion when estimating payload size.
| Format | Data URI prefix | ~Encoded size of 9KB source |
|---|---|---|
| PNG | data:image/png;base64, | ~12 KB |
| JPEG | data:image/jpeg;base64, | ~12 KB |
| WebP | data:image/webp;base64, | ~12 KB |
| GIF | data:image/gif;base64, | ~12 KB |
| SVG | data:image/svg+xml;base64, | ~12 KB |
When inlining actually helps — and when it backfires
The classic case for data URIs — killing extra HTTP requests — is much weaker under HTTP/2 and HTTP/3, where many small files are multiplexed over one connection. The caching drawback never went away: an inlined image cannot be cached on its own. Inside CSS it caches with the stylesheet and can be reused, but inside HTML it is re-downloaded on every uncached page view.
The honest rule: inline only assets under roughly 1–2KB that appear site-wide (tiny icons, an email logo, a critical-CSS sprite). On mobile, large data URIs have measured around 6× slower to render than a linked binary source. This tool's 5MB ceiling is generous; just because a 3MB hero photo can be encoded does not mean it should be.
Runs 100% in your browser
Your image never leaves your device. The file is read locally with FileReader.readAsDataURL() and copied with your browser's native clipboard — no uploads, nothing leaves your device. I tested PNG, JPEG, WebP, GIF, and SVG inputs from a few hundred bytes up to the 5MB limit; the data URI and the live original-vs-encoded size readout appear instantly, and a file over 5MB is cleanly rejected with an error instead of freezing the page.
Frequently asked questions
Is this Image to Base64 converter free?
Yes — 100% free with no signup and no daily limit. Upload an image up to 5MB, copy the data: URI, and paste it anywhere.
Does my image get uploaded to a server?
No. The image is read entirely in your browser with the FileReader API. No bytes are sent anywhere, so the tool works offline once loaded.
Why is the Base64 string bigger than my image?
Base64 encodes every 3 bytes as 4 characters, a fixed 33% expansion. Encoding is not compression — shrink the file first with the Image Compressor if size matters.
How do I use the result in CSS?
Wrap the data URI in url(): background: url("data:image/svg+xml;base64,...");. Inside a stylesheet it caches with the CSS for reuse.
Related encoding & asset tools
Reverse a data URI back to a file
Base64 EncoderEncode plain text or data to Base64
Base64 DecoderDecode a Base64 string to text
Image CompressorShrink an image before you encode it
Favicon GeneratorBuild favicons from one source image
URL EncoderPercent-encode strings for safe URLs
URL ParserBreak a URL into its components
JWT DecoderDecode Base64URL-encoded JWT tokens
HMAC GeneratorSign data with a keyed hash
Hash GeneratorCompute MD5, SHA-1, and SHA-256
JSON FormatterEmbed data URIs in JSON payloads
Guide: Base64 EncodingHow Base64 and data URIs work
Guide: JWT StructureBase64URL inside JSON Web Tokens
All ToolsBrowse the full Toolk hub
Last updated: June 2, 2026 · Runs 100% in your browser — no uploads, nothing leaves your device.
Need a different tool?
Browse all 89 free, in-browser tools — or tell us what we should build next.