Data URI Generator - Encode Text for HTML and CSS

Data URI Generator

The Data URI Generator turns text into a data: URI that carries its content in the string. You can use suitable data URIs in an HTML src attribute or a CSS url() value.

Choose the Content Type and Encoding

A data URI includes a MIME type, an optional encoding marker such as base64, and the encoded content. Select the type that matches your text rather than assuming the generator can identify arbitrary file bytes.

Worked Example

• Input: Hello
• Data URI: data:text/plain;base64,SGVsbG8=

Here text/plain is the MIME type and base64 identifies the encoding. The value SGVsbG8= represents Hello. An image data URI might instead use image/png, but its payload must contain the actual encoded image bytes, not just an image filename.

How to Generate a Data URI

1. Choose a MIME Type from the list.
2. Set Use Base64 encoding as needed and enter your content in Input Text.
3. Review Data URI Output and use Copy.

The interface accepts text and does not show a file upload. For a CSS background, use an appropriate URI in background: url(...). Check that the destination accepts embedded data.

Check Size and Destination Support

The Base64 form follows data:[mimetype];base64,[data]. Use it in a suitable src or url() context, with the quoting and escaping that context requires.

Base64 increases the encoded size by roughly a third. Inlined data is part of its containing document rather than a separately cached asset. That can suit small assets or self-contained prototypes, but it does not guarantee faster pages. Check your browser, email client, and site policy before relying on an embedded asset.

Related Tools

For byte notation, see the ASCII to Hex Converter. For a separate encryption workflow, see AES Encryption. A data URI or Base64 encoding does not encrypt its content.