What are Data URLs

• Introduction
• How does a Data URL look
• Browser support
• Security

Introduction

A Data URL is a URI scheme that provides a way to inline data in an HTML document.

Say you want to embed a small image. You could go the usual way, upload it to a folder and use the img tag to make the browser reference it from the network:

<img src="image.png" />

or you can encode it in a special format, called Data URL, which makes it possible to embed the image directly in the HTML document, so the browser does not have to make a separate request to get it.

Data URLs might save some time for small files, but for bigger files there are downsides in the increased HTML file size, and they are especially a problem if the image reloads on all your pages, as you can’t take advantage of the browser caching capabilities.

Also, an image encoded as Data URL is generally a bit bigger than the same image in binary format.

They aren’t much practical if your images are frequently edited, since every time the image is changed, it must be encoded again.

That said, they have their place on the Web Platform.

How does a Data URL look

A Data URL is a string that starts with data: followed by the MIME type format. For example a PNG image has mime type image/png.

This is followed by a comma and then by the actual data.

Text is usually transferred in plain text, while binary data is usually base64 encoded.

Here is an example of how such Data URL will look like:

<img src="data:image/png,%89PNG%0D%0A..." />

And here is a small version of the banner image of this article encoded in a link

Here is how a base64 encoded Data URL looks like. Notice it starts with data:image/png;base64:

<img src="data:image/png;base64,iVBORw0KGgoAA..." />

And here is a small version of the banner image of this article base64 encoded in a link.

This site has a very nice Data URL generator which you can use to transform any image sitting in your desktop to a Data URL.

If you just need to Base64 encode or decode a string, I built a free encode/decode tool for that.

Data URLs still work as subresources. You can put one in an img src, or in CSS:

.main {
    background-image: url('data:image/png;base64,iVBORw0KGgoAA...');
}

They no longer work as normal top-level links. Clicking <a href="data:..."> does nothing in current browsers. I marked the two demos above as download links so they save the image instead. You can also force a download with a regular file URL.

Browser support

They are supported in all modern browsers.

Security

Data URLs can encode any kind of information, not just images, and so they come with their set of security implications.

From Wikipedia:

The data URI can be utilized to construct attack pages that attempt to obtain usernames and passwords from unsuspecting web users. It can also be used to get around cross-site scripting (XSS) restrictions, embedding the attack payload fully inside the address bar, and hosted via URL shortening services rather than needing a full website that is controlled by a third party.

Browsers also block content-initiated top-level navigation to data: URLs. Chrome has done this since Chrome 60 (the deprecation started in Chrome 58). Firefox has done this since Firefox 59, which is what that Mozilla post is about. Typing or pasting a data URL into the address bar still works. Downloads still work. <img src="data:..."> and CSS backgrounds still work.

Data URLs are defined in RFC 2397.

Want me to talk about your product? You can sponsor this site.