All Tools VerseA data URI packs a whole file into a single text string, so a small image or snippet of text can be embedded directly in HTML or CSS instead of loading from a separate URL. It starts with data: followed by the type and the content, usually base64 encoded. This guide explains how data URIs work, when they help or hurt, and free tools to make and read them.
In this guide
What a data URI is
A data URI is a self-contained link that holds the file’s content inside the URL itself, rather than pointing to a file on a server. A browser reading data:text/plain,Hello shows the text Hello with no network request. For binary content such as images, the data is base64 encoded so it survives as text, which connects to the encoding ideas in our base encoding guide.
The parts of a data URI
A data URI has three parts after data: the media type such as text/plain or image/png, an optional base64 marker, and the content. So data:image/png;base64, is followed by the base64 of a PNG. The media type tells the browser how to interpret the bytes, and the base64 marker tells it the content is encoded rather than plain text.
Make a data URI
To embed text, you wrap it in the data: prefix with the right type. The text to data URI converter builds one from any string, and the UTF-8 to data URI converter handles international text correctly. To read one back, the data URI to text converter extracts the original content.
When they help and hurt
Data URIs remove a network request, which can speed up a page for small assets such as an icon or a tiny font. The cost is size: base64 makes the content about a third larger, and the inlined data cannot be cached separately, so it reloads with the page every time. The rule of thumb is to inline only small, rarely changing assets, and link larger ones normally.
Common uses
You will see data URIs for small icons in CSS, for embedding a logo in a single-file HTML page, for previewing an uploaded image before it is sent, and in emails where external images are blocked. They are a handy tool for keeping something self-contained, as long as you respect the size trade-off and do not inline large files.
Free converters used in this guide
Frequently asked questions
What is a data URI?
A link that holds a file’s content inside the URL itself, starting with data:, so a browser can show it with no separate network request.
Why is image data in a data URI base64 encoded?
Because base64 turns binary into text, which lets the bytes live safely inside a text URL without being corrupted.
Are data URIs good for performance?
For small assets they save a request, but they add about a third to the size and cannot be cached separately, so large files are better linked.
What are the parts of a data URI?
The media type such as image/png, an optional base64 marker, and the content, all after the data: prefix.
How do I read a data URI back?
Use a data URI to text converter, which strips the prefix and decodes the content to its original form.