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.
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:
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.
Here are a few examples of data URLs:
| Data URL | Derived media type | Is base64-encoded? |
|---|---|---|
| data:,The%20quick%20brown%20fox%20jumps%20over%20the%20lazy%20dog | text/plain;charset=US-ASCII | No |
| data:;charset=utf-8,The%20quick%20brown%20fox%20jumps%20over%20the%20lazy%20dog | text/plain;charset=utf-8 | No |
| data:text/plain;charset=utf-8,The%20quick%20brown%20fox%20jumps%20over%20the%20lazy%20dog | text/plain;charset=utf-8 | No |
| data:text/plain;charset=utf-8;base64,VGhlIHF1aWNrIGJyb3duIGZveCBqdW1wcyBvdmVyIHRoZSBsYXp5IGRvZw== | text/plain;charset=utf-8 | Yes |
| 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%3E | image/svg+xml;charset=utf-8 | No |
| data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjEwMCIgd2lkdGg9IjEwMCI+CiAgICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSIyMCIgZmlsbD0ieWVsbG93IiAvPgo8L3N2Zz4= | image/svg+xml;charset=utf-8 | Yes |
| data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAOCAQAAACxtDVnAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQflAR8FJCftbtjOAAAAjklEQVQY023OvQpBcRgH4MdHksni5BpsBrG7BcXiBtS5C/diUZLRYnImYqGzmYxK+dgcgwn/37u8/Z7eevnOyE4gscw0BKmt6LPmUDTQdrLSEGm6mEioSGQ/89Jn/FdnlsocAtCEWwCq5N0D33VgHrg4qjMMQGZPQRqAGFqeP/VGqYCzVNfZzMJDzVrP9Q3n42PrzBM9PgAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMS0wMS0zMVQwNTozNjozOSswMDowMKNgrxoAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjEtMDEtMzFUMDU6MzY6MzkrMDA6MDDSPRemAAAAAElFTkSuQmCC | image/png | Yes |
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.
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.