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

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 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: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 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.

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.

Related Training:
Web Development

John McDermott

Written by John McDermott

John McDermott, CPLP, started his work in computer security in 1981 when he caught an intruder in a system he was managing. In recent years his consulting has included security consulting for small businesses. He is Security+ and CCP certified. In his 30 years with Learning Tree John has written and taught courses in programming, networking and computer security. He is the co-author of Learning Tree’s course System and Network Security: A Comprehensive Introduction. John is currently a learning and development consultant in northern New Mexico. He lives in a house made of earth with his wife, who is an artist.

Chat With Us