Data url

from Wikipedia, the free encyclopedia

A data URL is a URI scheme that enables data to be embedded in ( HTML ) source text as if it were external resources. This means that the data, for example for a graphic, can be accommodated within an HTML document directly in the HTML source text, instead of being requested from a file as is otherwise the case.

This tends to be easier than other embedding methods such as MIME with cid- or mid- URIs (see RFC 2111 ). Data URLs are often referred to as Uniform Resource Locators even though they do not reference any external content. In reality they are Uniform Resource Identifiers . The data URL is defined in RFC 2397 of the Internet Engineering Task Force (IETF).

Although the IETF published the Data URL specification in 1998, it was never formally made a standard. However, the HTML 4.01 (December 1999) specification makes reference to the definition of the Data URL, and most current web browsers support Data URLs.

Web browser support

The following web browsers currently support data URLs:

format

data:[<MIME-Typ>][;charset=<Zeichensatz>][;base64],<Daten>

The coding is indicated by ;base64. If available, this means that the following data is Base64- encoded. Otherwise, if the base64parameter is missing , the data will be encoded using URL encoding . If the MIME type is not specified, the MIME type is assumed. If the character set differs, the MIME type can be omitted as an abbreviation for Plain text , but the character set parameter can be used. text/plain;charset=US-ASCII

advantages

  • Embedded data do not require an HTTP request and save traffic and bandwidth if the coding overhead is smaller than the HTTP overhead. For example, a 600- byte image is Base64- coded 800 bytes in size (if it is transmitted uncompressed; HTML and CSS are mostly transmitted in compressed form). If the HTTP overhead is more than 200 bytes, the data URL is more efficient.
  • The data URL in the transport can be faster for transporting many small files. TCP connections tend to be slow to start. If every file needs a new TCP connection, the transport speed is more limited by the runtime than by the available bandwidth. Using HTTP keepalive improves the situation, but does not completely remove the bottleneck.
  • If the website is accessed via HTTPS , most web browsers expect that all elements of this website will also be reloaded via a secure connection, otherwise the user will be notified that the mixture of secure and unsecure elements will reduce security. HTTPS has a significantly higher overhead than normal HTTP, so embedding website elements in data URLs increases the speed in this case and prevents security warnings from being issued.
  • Web browsers are usually configured in such a way that only a certain maximum number of HTTP connections are established to the same web server, so embedded data save HTTP connections in favor of other content.
  • Environments with restricted or blocked access to external resources can embed content if it is not allowed or impractical to reference it externally. For example, an advanced HTML editor field could accept an inserted image and convert it to a data url to hide the complexity of external referencing from the user.
  • A multimedia page can be managed as a single file.
  • While it rarely happens, there are times when the integrity of the files is breached when they are uploaded . This can only happen to data URLs if the integrity of the entire page is violated.

disadvantage

  • Data URLs cannot be cached separately from the documents they contain (e.g. HTML or CSS files) , so the data will be downloaded again if (depending on the embedding location) either the document is reloaded or the CSS file is transferred to another Position has changed.
  • The data URL must be re-encoded and embedded when a change has been made.
  • The data is integrated as a simple data stream , and many runtime environments such as web browsers do not support container formats (such as multipart/alternativeor message/rfc822) in order to store data of greater complexity such as metadata , compressed data or content negotiation .
  • Base64 encoded data is a third larger than its binary equivalent . This disadvantage is put into perspective if the server compresses the response using the Content-Encoding- HTTP header .
  • Data URLs make it harder for security software to filter content.
  • Web browsers on mobile devices (e.g. smartphones ) usually have a function with which the loading of images can be deactivated in order to save data volume. Embedding it directly in the document prevents the use of such a function.

Examples

HTML

Small red point.png
The red point from the example on the left

An HTML fragment that includes the image of a small red dot: 

<img src="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP
C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA
AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J
REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq
ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0
vr4MkhoXe0rZigAAAABJRU5ErkJggg==" alt="Roter Punkt" />

As shown above, the data URL can include whitespace for readability . The inclined reader can cut out the text standing between the quotes and enter it into the address line of a supporting browser.

CSS

A CSS rule that includes a background image: 

ul.checklist  li.complete { margin-left: 20px; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC') top left no-repeat;}

JavaScript

A JavaScript example that opens a new, embedded window , for example for a footnote : 

window.open('data:text/html;charset=utf-8,%3C%21DOCTYPE%20html%3E%0D%0A%3Cht'+
  'ml%20lang%3D%22en%22%3E%0D%0A%3Chead%3E%3Ctitle%3EEmbedded%20Window%3C%2F'+
  'title%3E%3C%2Fhead%3E%0D%0A%3Cbody%3E%3Ch1%3E42%3C%2Fh1%3E%3C%2Fbody%3E%0'+
  'A%3C%2Fhtml%3E%0A%0D%0A','_blank','height=300,width=400');

This example does not work in Internet Explorer 8 . Its security settings prohibit navigable file types in data URLs.

Paste in HTML or CSS with PHP

Because Base64 encoded data URLs are not human-readable , a website creator could preferably insert encoded data using a scripting language such as PHP . This has the advantage that when the integrated file is changed, the HTML source text does not have to be changed and binary data is separated from the text . The disadvantage is a higher load on the server - CPU , when no server-side cache is used. 

<?php
function data_uri($file, $mime)
{
  $contents = file_get_contents($file);
  $base64   = base64_encode($contents);
  return ('data:' . $mime . ';base64,' . $base64);
}
?>

<img src="<?php echo data_uri('elephant.png','image/png'); ?>" alt="Ein Elefant" />

The function shown above can also be used on CSS data: 

<?php header('Content-type: text/css');?>

div.menu
{
  background-image:url('<?php echo data_uri('menu_background.png','image/png'); ?>');
}

Client or server functions such as conditional comments or user agent queries can be used to offer alternative URLs for older browsers such as Internet Explorer up to version 7.

Conversion tools

  • alles2DataURL is a free online tool for converting any file format (up to a maximum size of approx. 3 MB) into a data URL.
  • DataURL2Text is a free online tool for converting any data URL back into the original data.
  • Clipboard Observer is a free Java tool for easily converting PNG files to a data URL.
  • duri.me is a free web tool for easily converting image files to a data URL.

See also

Web links

Individual evidence

  1. ↑ a b RFC 2397 - The “data” URL scheme
  2. ↑ Proposed Standards . In: Official Internet Protocol Standards . Internet Society . January 4, 2009. Retrieved January 4, 2009.
  3. ↑ Dave Raggett, Arnaud Le Hors, Ian Jacobs: Objects, Images, and Applets: Rules for rendering objects . In: HTML 4.01 Specification . W3C . December 24, 1999. Retrieved March 20, 2008.
  4. ↑ a b data protocol . MSDN . Retrieved January 5, 2009.
  5. ^ IE9 Beta Minor Changes List . Eric Law. Retrieved October 28, 2010.
  6. ↑ RFC 2616 Section 8
  7. ↑ all2DataURL
  8. ↑ DataURL2Text
  9. ↑ Clipboard Observer
  10. ↑ duri.me