What are data URLs?

Data URLs are a special type of URL that, instead of pointing to an external resource available at the specified address, directly include the content of the resource within the URL string. These pseudo URLs support all content types (text, images, audio, etc.) and, like "regular" URLs, they can be linked and navigated to in the web browser.

The data URL scheme

Technically speaking, the term data URL refers to a URI that uses the data URL scheme—i.e. starts with data: and not with http:, file:, or blob:, for example. The data URL scheme is defined by RFC 2397 published in 1998, and according to that specification, a well-formed data URL always looks like this:

data:[<mediatype>][;base64],<data>

where the optional <mediatype> component captures the media type of the embedded content, and the presence of ;base64 indicates that the <data> part is base64-encoded. Note that the media type itself can include one or many parameters separated by semicolons, e.g. text/plain;charset=utf-8.

Examples of data URLs

Here are a few examples of data URLs:

Data URLDerived media typeIs base64-encoded?
data:,The%20quick%20brown%20fox%20jumps%20over%20the%20lazy%20dogtext/plain;charset=US-ASCIINo
data:;charset=utf-8,The%20quick%20brown%20fox%20jumps%20over%20the%20lazy%20dogtext/plain;charset=utf-8No
data:text/plain;charset=utf-8,The%20quick%20brown%20fox%20jumps%20over%20the%20lazy%20dogtext/plain;charset=utf-8No
data:text/plain;charset=utf-8;base64,VGhlIHF1aWNrIGJyb3duIGZveCBqdW1wcyBvdmVyIHRoZSBsYXp5IGRvZw==text/plain;charset=utf-8Yes
data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%22100%22%20width%3D%22100%22%3E%0A%20%20%20%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2220%22%20fill%3D%22yellow%22%20%2F%3E%0A%3C%2Fsvg%3Eimage/svg+xml;charset=utf-8No
data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjEwMCIgd2lkdGg9IjEwMCI+CiAgICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSIyMCIgZmlsbD0ieWVsbG93IiAvPgo8L3N2Zz4=image/svg+xml;charset=utf-8Yes
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAOCAQAAACxtDVnAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQflAR8FJCftbtjOAAAAjklEQVQY023OvQpBcRgH4MdHksni5BpsBrG7BcXiBtS5C/diUZLRYnImYqGzmYxK+dgcgwn/37u8/Z7eevnOyE4gscw0BKmt6LPmUDTQdrLSEGm6mEioSGQ/89Jn/FdnlsocAtCEWwCq5N0D33VgHrg4qjMMQGZPQRqAGFqeP/VGqYCzVNfZzMJDzVrP9Q3n42PrzBM9PgAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMS0wMS0zMVQwNTozNjozOSswMDowMKNgrxoAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjEtMDEtMzFUMDU6MzY6MzkrMDA6MDDSPRemAAAAAElFTkSuQmCCimage/pngYes

Generating data URLs

There are many libraries and built-in tools available for many programming languages for generating RFC 2397-compliant data URLs. If you are looking for an easy way to generate a data URL for a specific file or text string, you can use Data URI Generator.

Related projects

Generate data URLs in the browser.
data URLs

Made by Anton Vasetenkov.

If you want to say hi, you can reach me on LinkedIn or via email. If you like my work, you can support me by buying me a coffee.