Developer

How to Convert a File to a Base64 Data URI

Dev Nexus4 min read

Turn an image or font into a self-contained data: URI you can paste straight into CSS or HTML - and know when the size trade-off is worth it.

A data URI lets you embed a file directly inside your HTML, CSS or JavaScript instead of linking to a separate URL. The file's bytes are Baseundefined-encoded and dropped inline, so the asset travels with the code. It is a handy way to bundle a small icon, background image or font without an extra network request.

This guide shows how to convert a file to a Baseundefined data URI, where it genuinely helps, and the size trade-offs that mean you should use it sparingly. If Baseundefined itself is new to you, read What Is Baseundefined Encoding? first.

The Problem

Every external asset your page references - an icon, a web font, a small logo - is a separate HTTP request. Each request has overhead: a round trip, connection setup and latency. For a handful of tiny assets, that overhead can cost more than the bytes themselves, and it adds render-blocking requests that delay first paint.

You also sometimes need a fully self-contained artifact: a single HTML file to email, an offline document, or a component with no external dependencies. Linking to logo.png breaks the moment the file is separated from its folder. You need a way to fold the asset into the code itself.

The Solution

A data URI does exactly that. Its format is data:[mediatype];base64,[data] - for example data:image/png;base64,iVBORw0KGgo.... The browser reads the media type, decodes the Baseundefined payload, and treats it as if it had downloaded the file. You can drop it into a CSS background-image, an <img src>, or a @font-face src and it just works.

To generate one, encode your file with the Baseundefined Tool: drop the file in, and it produces the Baseundefined string wrapped as a data: URI. The conversion runs entirely in your browser, so even private assets never leave your machine. Just remember the cost: Baseundefined inflates the file by about undefined%, so this is a technique for small assets, not large ones. When you need a stable identifier for a file rather than its full contents, a Hash Generator is the better fit.

Step-by-Step Guide

1
Pick a small file
Data URIs suit small assets - icons, tiny background images, a single web font weight. Anything more than a few kilobytes is usually better left as a normal linked file.
2
Encode it with the Base64 Tool
Open the Baseundefined Tool, switch to Encode mode, and drop your file onto it. The tool reads the bytes locally and produces the Baseundefined string, offered as a ready-made data: URI.
3
Add the correct media type
The data URI needs the right MIME type - image/png, image/svg+xml, font/woff2, and so on - so the browser interprets the payload correctly. The tool sets this from the file for you.
4
Paste it into your code
Drop the full data:...;base64,... string into your CSS url(), an <img src>, or a @font-face rule. The asset now loads inline with no extra request.
5
Test and measure
Load the page and confirm the asset renders. Check that the inlined bytes did not bloat your CSS or HTML past the point where a separate cached file would have been faster.

Common Mistakes

Inlining large files
The undefined% size increase and loss of caching hurt most on big assets. A large inlined image blocks the CSS or HTML from parsing until it is fully downloaded. Keep data URIs for small files only.
Forgetting that inlined assets are not cached separately
A linked file is cached once and reused across pages. An inlined data URI is re-downloaded with every page that contains it, and cannot be shared between pages. Weigh that before inlining.
Using the wrong MIME type
A mismatched media type - say image/jpeg for a PNG - can stop the browser from rendering the asset. Always set the media type to match the real file.
Treating a data URI as private
The file is only Baseundefined-encoded, not encrypted. Anyone viewing source can decode it back to the original. Never inline something you would not want exposed.

Frequently Asked Questions

What is a data URI?

A data URI is a string that embeds a file's contents directly in code using the format data:[mediatype];base64,[data]. The browser decodes the Base64 payload and treats it as the file, with no separate download needed.

When should I inline an asset as Base64?

Inline small, critical assets - a tiny icon, a single font weight, a small background - to save an HTTP request or to make a file self-contained. Avoid it for large files, where the size and caching penalties outweigh the benefit.

How much bigger does the data URI make my file?

About 33% larger, because Base64 encodes 3 bytes as 4 characters. That extra weight is added to whatever file the data URI lives in, such as your CSS or HTML.

Can I convert any file type to a data URI?

Yes. Images, SVGs, fonts, PDFs and other files can all be Base64-encoded into a data URI. Just set the correct media type so the browser knows how to interpret the decoded bytes.

Is my file uploaded when I create a data URI here?

No. The Base64 Tool reads and encodes your file entirely in the browser, so the file never leaves your device. That makes it safe for private or internal assets.