The "data" URL

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'.)

hands typing on laptop with graphical overlay

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 mediatype and ;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:Base64 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:

<img src="data:image/png;base64,iVBORw0..."
alt="Green diamond" />orbackground-image: url('data:image/png;base64,iVBORw0...");
background-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.

Mozilla, for example, blocked the potentially-dangerous use of the "data" URL when the media type is HTML, JavaScript, or SVG (a graphic format that can be manipulated to be dangerous). Those formats are allowed in non-dangerous ways, such as in "img" tags, however.

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.