Most everyone is familiar with the “http” and “https” URLs. Maybe you’ve heard about “ftp” and “file”, too, but few know about the “data” URL. The “data” URL provides a way to include small data items directly into HTML and CSS documents. The idea is that small images, for example, could be included in a document without the browser having to fetch them from the ‘net. (I’m using ‘URL’ here instead of the more technically accurate ‘URI’ because this is not a technical document and most people are used to ‘URL’.)
The general format of a “data” URL is:
That means the word data and the colon are required, the
;base64 are optional and the
data is required. Here is a simple example to give you an idea of how something might be encoded:
The mediatype is image/png (it is a png image) and it is base64 encoded. (Base64 is a way of encoding raw data into printable characters.) The image is this little icon:
The data don’t have to be base64 encoded, although that is a common use. Here is an example of just some plain text:
In this case, the type is text/plain (the default) and the data is plain text, except that some entities such as spaces have to be encoded (%20 is a space). I could have specified a character set so I could include, for example, Greek characters.
This example (patterned after an example in the data URL RFC), specifies a character set called “Latin/Greek”. The %xx sequences are the representations of the Greek characters and need the % symbols to let the browser know they are in hexadecimal (hex). This example refers to the string “λόγος”.
The “data” URL can generally be used where any other URL can be used, except for some restrictions due to security that we will discuss below. Some examples might be:
alt="Green diamond" />orbackground-image: url('data:image/png;base64,iVBORw0…”);
Where the ellipses represent the rest of the green diamond image above.
The “data” URL could be used to avoid having the browser access the web for a very small image. Since each request takes time, very small images can be included in a page or stylesheet with minimal overhead. This might be especially valuable in the Internet of Things or IoT.
Another possible use is when an HTML file isn’t served over the web but viewed locally. A document describing a piece of software or perhaps a help file, for instance. In this case the icons and other small images could be included inline to avoid having to package and distribute multiple files.
Scammers and phishers began using the “data” URL maliciously soon after it was added to browsers. This lead browser writers to block it in some cases. Chrome, Edge, and Firefox now all block some uses of it. That’s a good step toward protecting users.
The “data” URL can be a useful tool for web designers. Hopefully, this brief introduction will prompt designers to use it when it is appropriate.