What Is a Data URI and Base64-Encoded Image?
A data URI (Uniform Resource Identifier) is a scheme that lets you embed file contents directly inside HTML, CSS, or JavaScript instead of referencing an external URL. For images, the format looks like data:image/png;base64,iVBORw0KGgo..., where the MIME type declares the image format and the Base64 string represents the binary pixel data as printable ASCII characters.
Base64 encoding works by taking every three bytes of binary data and mapping them to four ASCII characters drawn from a 64-character alphabet (A-Z, a-z, 0-9, +, /). This tool reads your image file using the browser's FileReader API, encodes the binary result as a Base64 string, and prepends the correct data: prefix so the output is ready to paste into your code. Everything runs locally in your browser -- no files are uploaded to any server.
When to Inline Images vs. Use External Files
Embedding images as data URIs eliminates an HTTP request for each asset, which can noticeably improve page load times when you have many small graphics. However, the technique comes with trade-offs, so choosing the right approach depends on the file size and use case.
Inline as data URIs when the image is roughly 2--5 KB or smaller. Common candidates include:
- UI icons and simple SVG logos used in CSS
background-imagerules - 1x1-pixel tracking pixels or spacer images
- Favicons and small decorative elements embedded in a stylesheet
- Email HTML templates, where external images are often blocked by clients
Keep as external files when the image exceeds a few kilobytes. Larger Base64 strings bloat HTML or CSS, bypass the browser cache (the string must be re-downloaded with every page load), and can slow down initial rendering because the parser has to process the entire inline payload before painting the page.
Supported Formats and Browser Compatibility
This tool accepts any image format your browser can read, including the most common web formats:
- PNG -- lossless compression, ideal for icons and screenshots with transparency
- JPEG -- lossy compression, best for photographs and complex imagery
- GIF -- limited palette, supports simple animation
- WebP -- modern format offering both lossy and lossless compression at smaller sizes (supported in all modern browsers)
- AVIF -- next-generation format with excellent compression ratios (supported in Chrome, Firefox, and Safari 16.4+)
- SVG -- vector format; can be inlined directly as XML, but Base64 encoding is useful when embedding in CSS
url()values
Data URIs themselves are supported in every modern browser, including Chrome, Firefox, Safari, and Edge. The only practical limit is the size of the encoded string -- Internet Explorer historically capped data URIs at 32 KB, but that constraint no longer applies in any current browser.
The 33% Size Overhead and When It Matters
Base64 encoding converts three bytes of binary data into four bytes of ASCII text, producing an output that is approximately 33% larger than the original file. A 3 KB PNG becomes roughly 4 KB of Base64 text; a 30 KB JPEG becomes around 40 KB. For tiny assets this trade-off is worthwhile because eliminating an HTTP round-trip (typically 50--200 ms on mobile networks) saves more time than the extra bytes cost.
For larger images, the overhead becomes significant. A 100 KB photo turns into roughly 133 KB of inline text that the browser cannot cache independently. Worse, if the data URI sits inside a CSS file, the stylesheet itself becomes much heavier, delaying the first paint of the entire page. As a rule of thumb, if the Base64 output exceeds about 5 KB, serve the image as a separate file and let the browser cache it normally.
Keep in mind that transport compression (Brotli or gzip) partially offsets the Base64 overhead on the wire, since Base64 text compresses well. The real cost is in cache efficiency and parse time, not necessarily in transferred bytes.
Related Tools
If you work with encoded data regularly, these other CodeBoxTools utilities may help:
- Base64 Encode / Decode -- encode or decode arbitrary text and binary data as Base64, useful for API payloads, authentication headers, and data transfer.
- QR Code Generator -- generate a QR code from any text or URL. The output is a PNG image that you could convert to Base64 right here for inline embedding.
All tools run entirely in your browser with no server-side processing, so your data stays private.