EckherInsightsContact
Eckher
Your guide to what's next.
Eckher
Home › Eckher Insights › What are data URLs?
Sep 26, 2021

What are data URLs?

The ins and outs of 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:

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 Eckher Data URI Generator.

Cover
See also
Generating data URLs in JavaScript
How to generate data URLs in JavaScript?
Eckher
Your guide to what's next.
Copyright © 2021 Eckher. Various trademarks held by their respective owners.