Data URLs
A Data URL is a type of URI used for embedding small documents directly within a web address.
Usage
Data URLs (formerly known as Data URIs) can be used to embed arbitrary types of data inside a URL. They are commonly used to encode small images such as logos and embed them in HTML.
Advantages
By including the data for resources directly in the HTTP request, it means that the client does not have to subsequently request the resource. In particular, with older versions of the HTTP protocol that fetched each resource using a new connection, there was a significant performance increase because it avoided the additional overhead for creating new connections.
Disadvantages
Including Data URLs in the HTML source code increases the overall size of the HTML document when requested through HTTP. With newer versions of the HTTP protocol a potential downside is that the content of the Data URL is not cacheable as a separate HTTP request and the content of the Data URL may be downloaded repeatedly depending on the Caching parameters of the HTML document it is embedded in.
Syntax and encoding
Data URLs are a type of URI that uses the data scheme according to the following format:
data: [ <media_type> ] [ ;base64 ] , <data>
After the data keyword, there is an optional media type parameter. This is a MIME type string, such as image/png, and a full list of registered media types is maintained by IANA. If absent, the type is assumed to be text/plain;charset=US-ASCII.
The optional base64 keyword, which is preceded by a colon : if present, is used to indicate that the data is binary and encoded using base64. If the data is text-based then this is not necessary. Because base64 encoding is on average more than 30% longer, it is only be used if the resource is binary.
The data parameter is replaced by the textual or binary data.
Example
These examples show different embeddings of "Visit example.re" using Data URLs.
data:text/plain,Visit%20example.re
In the example above, the media type is set to plain text with the space character escaped as %20. It is encoded textually.
data:;base64,VmlzaXQgZXhhbXBsZS5haQ==
In the example above, the media type is absent so it defaults to text/plain. The encoding is base64, which takes up six additional characters.
data:text/html,<a%20href=https://www.example.re>Visit%20example.re</a>
In the example above, the Data URL contains an HTML document with an embedded link to the website. It is encoded textually to text/html and the space character is escaped as %20.
Takeaway
A Data URL is a type of URI that has a document embedded directly in the request. The type of media is specified, and it can be encoded textually or using base64.