Data URIs

Data URIs are a way of embbedding data (such as an image) that would normally be an external file within the original document, avoiding having to make extra requests.

The image below has been embedded in the page as a base64 encoded string, avoiding the need for an external file.


The HTML for the image above looks similar to the example below. As the encoded data can be very long (over 4000 characters for the above image!) it has been deliberately snipped.

<img width="200" height="200" alt="city9" src="data:image/png;base64,iVBORw0KGgoAAAANSUhE ... ludnAAAAAElFTkSuQmCC" />

As well as embedding them directly in an element as above, you can use them in CSS files too, allowing some reuse.

Long URIs

The nature of base64 encoding means that the encoded version is around 33% larger than the unencoded content. This page tests a photograph that, resized to 10% of the original gives a data URI of nearly 93 thousand characters (by comparison, the original version was nearly 2.4 million characters when encoded).

Using such large values probably isn't recommended, it could introduce subtle issues (WebMatrix doesn't syntax highlight this page properly any more), or it could lead to crashes (older versions of WebCopy tried to convert the data URI to a .NET Uri object which "only" supports a maximum of around 60 thousand characters.

St Paul's Cathedral