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'.)
What does the data URL look like?
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 media type 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 "logos".
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.
Why might this be used?
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.
A note about security
Scammers and phishers began using the "data" URL maliciously soon after it was added to browsers. This leads 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.
See yourself at the center of global communications by enhancing your Web Development skills. Courses available In-Person, Online, or as Private Team Training!
This piece was originally posted on Sep 11, 2018, and has been refreshed with updated styling.