Revision 1087519 of Data URIs

<p>{{HTTPSidebar}}</p>

<p><strong>Data URIs</strong>, URLs prefixed with the <code>data:</code> scheme, allow content creators to embed small files inline in documents.</p>

<h2 id="Syntax" name="Syntax">Syntax</h2>

<p>Data URIs are composed of four parts: a prefix (<code>data:</code>), a MIME type indicating the type of data, an optional <code>base64</code> token if non-textual, and the data itself:</p>

<pre class="eval">
data:[&lt;mediatype&gt;][;base64],&lt;data&gt;
</pre>

<p>The <code>mediatype</code> is a MIME type string, such as <code>'image/jpeg'</code> for a JPEG image file. If omitted, defaults to <code>text/plain;charset=US-ASCII</code></p>

<p>If the data is textual, you can simply embed the text (using the appropriate entities or escapes based on the enclosing document's type). Otherwise, you can specify <code>base64</code> to embed base64-encoded binary data.</p>

<p>A few examples:</p>

<dl>
 <dt><code>data:,Hello%2C%20World!</code></dt>
 <dd>Simple text/plain data</dd>
 <dt><code>data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D</code></dt>
 <dd>base64-encoded version of the above</dd>
 <dt><code>data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E</code></dt>
 <dd>An HTML document with <code>&lt;h1&gt;Hello, World!&lt;/h1&gt;</code></dd>
 <dt><code>data:text/html,&lt;script&gt;alert('hi');&lt;/script&gt;</code></dt>
 <dd>An HTML document that executes a JavaScript alert. Note that the closing script tag is required.</dd>
</dl>

<h2 id="Encoding_data_into_base64_format" name="Encoding_data_into_base64_format">Encoding data into base64 format</h2>

<p>This can be done easily using the command-line <code>uuencode</code> utility on Linux and Mac OS X systems:</p>

<pre class="eval">
uuencode -m <code>infile</code> <code>remotename</code>
</pre>

<p>The <code>infile</code> parameter is the name of the file you wish to encode into base64 format, and <code>remotename</code> is the remote name for the file, which isn't actually used in <code>data</code> URLs.</p>

<p>The output will look something like this:</p>

<pre class="eval">
begin-base64 664 test
YSBzbGlnaHRseSBsb25nZXIgdGVzdCBmb3IgdGV2ZXIK
====
</pre>

<p>The data URI will use the encoded data after the initial header line.</p>

<h3 id="In_a_Web_page_using_JavaScript">In a Web page, using JavaScript</h3>

<p>The Web APIs has primitives to encode or decode to base64:&nbsp; <a href="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding" title="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding">Base64 encoding and decoding</a>.</p>

<h2 id="Common_problems" name="Common_problems">Common problems</h2>

<p>This section describes problems that commonly occur when creating and using <code>data</code> URIs.</p>

<dl>
 <dt>Syntax</dt>
 <dd>The format for <code>data</code> URIs is very simple, but it's easy to forget to put a comma before the "data" segment, or to incorrectly encode the data into base64 format.</dd>
 <dt>Formatting in HTML</dt>
 <dd>A <code>data</code> URI provides a file within a file, which can potentially be very wide relative to the width of the enclosing document. As a URL, the <code>data</code> should be formatable with whitespace (linefeed, tab, or spaces), but there are practical issues that arise <a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=73026#c12">when using base64 encoding</a>.</dd>
 <dt>Length limitations</dt>
 <dd>Although Firefox supports <code>data</code> URIs of essentially unlimited length, browsers are not required to support any particular maximum length of data. For example, the Opera 11 browser limited <code>data</code> URIs to around 65000 characters.</dd>
 <dt>Lack of error handling</dt>
 <dd>Invalid parameters in media, or typos when specifying <code>'base64'</code>, are ignored, but no error is provided.</dd>
 <dt>No support for query strings, etc.</dt>
 <dd>
 <p>The data portion of a data URI is opaque, so an attempt to use a query string (page-specific parameters, with the syntax <code><em style="font-style:italic">&lt;url&gt;</em>?parameter-data</code>) with a data URI will just include the query string in the data the URI represents. For example:</p>

 <pre class="eval">
data:text/html,lots of text...&lt;p&gt;&lt;a name%3D"bottom"&gt;bottom&lt;/a&gt;?arg=val
</pre>

 <p>This represents an HTML resource whose contents are:</p>

 <pre class="eval">
lots of text...&lt;p&gt;&lt;a name="bottom"&gt;bottom&lt;/a&gt;?arg=val
</pre>
 </dd>
</dl>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Title</th>
  </tr>
  <tr>
   <td>{{RFC("2397")}}</td>
   <td>The "data" URL scheme"</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>&nbsp;</p>

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding" title="/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li>
 <li>{{domxref("WindowBase64.atob","atob()")}}</li>
 <li>{{domxref("WindowBase64.btoa","btoa()")}}</li>
 <li><a href="/en-US/docs/Web/CSS/uri" title="/en-US/docs/Web/CSS/uri">CSS <code>url()</code></a></li>
 <li><a href="/en-US/docs/URI" title="/en-US/docs/URI">URI</a></li>
</ul>