Image to Base64 Data URI Converter
Convert an image file into a Base64 data URI for an HTML, CSS, or data field. Inspect the output before embedding it.
Image to Base64: Turn Any Image Into a Data URI
Convert an image file into a Base64 data URI for an HTML, CSS, or data field. Inspect the output before embedding it. A data URI embeds image bytes in text and can make a document substantially larger. It is useful when a destination requires inline data, but a normal image URL may be easier to cache and maintain. Check the destination's size and content-security limits.
How to use the image to Base64 converter
- 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.
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: September 15, 2026 · Runs 100% in your browser — no uploads, tool input is not sent to Toolk.
Frequently asked questions
Why is the Base64 output larger than the original file?
Base64 encodes every 3 raw bytes as 4 text characters — a fixed 33% overhead by design. Encoding is not compression, so a 300 KB JPEG becomes roughly a 400 KB string; shrink the source first if size matters (Toolk’s Image Compressor at /tools/image-compressor does that locally too).
Does the image leave my device during conversion?
No. The file is read with the browser FileReader API entirely inside your tab, and Toolk’s page analytics do not receive your images or the generated string. Once loaded, the converter keeps working offline, so unreleased assets stay private.
How do I use the data URI in CSS versus HTML?
In stylesheets wrap it in url(): background-image: url("data:image/png;base64,..."). In HTML, drop it straight into an img src attribute. Inside a stylesheet the graphic is cached together with the CSS itself, which is one reason inline SVG and small icons are ideal candidates.
Which formats can I convert, and is there a size cap?
Anything your browser can read as an image Blob — PNG, JPEG, WebP, GIF, SVG, ICO — with a hard cap of 5 MB per file so the tab stays responsive. The MIME type in the data URI comes from the file itself via readAsDataURL, not from guessing at the extension.
When does inlining beat hosting the file separately?
Small graphics under a few kilobytes win: you save a round trip and avoid extra requests on HTTP/1.1. Large photos lose — the 33% overhead bloats every cached page load. A good rule of thumb: inline icons and logos, host hero imagery as real files.