Data URI scheme

The Data - URL is a URI scheme which enables data as in ( HTML ) source code to embed as if they were external resources. It tends to be easier than other embedding methods, such as MIME with cid or mid URIs. Data URLs are often referred to as Uniform Resource Locators, although they reference no external content. In reality they are Uniform Resource Identifier. The Data URL is defined in RFC 2397 of the Internet Engineering Task Force ( IETF).

Although the IETF the Data URL specification published in 1998, this was never formally charged as standard. But the specification of HTML 4.01 refers to the definition of the Data URL, and most current web browsers support Data URLs.

Web browser support

Latest Data URLs are supported by the following web browsers:

  • Gecko -based browsers, such as Mozilla Firefox
  • Opera
  • KDE KDE through the input / output system. This allows the KDE browser, Konqueror, support Data URLs.
  • Safari; although Safari HTML rendering engine, WebKit, based on KHTML, Mac OS X does not share the KDE-Input/Output-Architektur and implementation.
  • Safari for the iPhone
  • Google Chrome
  • Internet Explorer 8; Microsoft limits the support for security to not navigable content, as in tags and CSS rules, so that is executable in Data URLs embedded JavaScript scripts are not in spite of filters, such as those used in webmail clients. Data URLs must be less than 32 kilobytes. The restriction was removed in IE9.

Benefits

  • Embedded data do not require a HTTP request and save traffic and bandwidth if the overhead of encoding is smaller than the HTTP overhead. For example, a 600 -byte image Base64 - encoded 800 bytes in size (if it is transmitted uncompressed, HTML and CSS are transmitted mostly compressed). Now, if the HTTP overhead is more than 200 bytes, the data location is more efficient.
  • For the transport of many small files, the Data URL can be in the transport faster. TCP connections tend to slow start. When any file needs a new TCP connection, the conveying speed is limited more by the running time as the available bandwidth. The use of HTTP keepalive improves the situation, but eliminates the bottleneck not completely.
  • If the Web page is accessed through HTTPS, expect most web browsers that all elements of the website will also be recharged via a secure connection, otherwise the user is notified that the security is reduced by the mixture of secure and insecure elements. HTTPS has a significantly higher overhead than normal HTTP, thus the embedding of website elements in Data URLs increases the speed in this case and prevents security alerts are issued.
  • Web browsers are usually configured so that only a certain maximum number of HTTP connections are established to the same web server, thus saving embedded data in favor of other content HTTP compounds.
  • Environments with limited or restricted access to external resources can embed content if it is not allowed or impractical, then can be referenced externally. For example, an enhanced HTML editor field could accept an inserted image and convert it to a Data URL to hide the complexity of the external referencing from the user.
  • It is possible to manage a multimedia page as a single file.
  • Although it happens rarely, it can happen that the file integrity is violated when they are uploaded. The Data URLs can only happen if the integrity of the entire page is injured.

Disadvantages

  • Data URLs can not ( for example, HTML or CSS files ) are cached separately from the documents containing them, so the data will be downloaded again when reloading (depending on Einbettungsort ) either the document or the CSS file to other has changed location.
  • The Data URL must be encoded and embedded again when a change has been made.
  • When still frequently used Internet Explorer to version 7 support for data URLs missing.
  • The Internet Explorer version 8, the limited length of the data URLs to 32 kilobytes.
  • The data will be used as a simple data stream, and many run-time environments such as Web browsers do not support container formats (such as multipart / alternative or message/rfc822 ) to store data of greater complexity such as metadata, compressed data or content negotiation.
  • Base64 -encoded data is one third larger than their binary equivalent. This disadvantage is relative if the server compresses the response with the Content-Encoding HTTP header.
  • Data URLs make it difficult security software, content filtering.

Format

Data: [ ] [; charset = " " ] [; base64 ], The coding is, in base64. If present, it means that the following data is Base64-encoded. Otherwise, in the absence of base64 parameter, the data is encoded by URL encoding. Charset = US-ASCII adopted, even if the description of the MIME type is missing, the MIME type text / plain. In case of different character set can be omitted as an abbreviation of the MIME type for plain text, but the character set parameters are used.

Examples

HTML

An HTML fragment, which integrates the image of a small red dot:

< img src = "data: image / png; base64, iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs 9 AAAABGdBTUEAALGP C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV IA AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq ch9 / / q1uH4TLzw4d6 ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0 vr4MkhoXe0rZigAAAABJRU5ErkJggg == " alt =" Red Dot "/> As shown above, the Data URL Whitespace may contain for readability.

CSS

A CSS rule which integrates a background image:

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

A JavaScript example which opens a new, embedded windows, for example, 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% 3E % 3Ctitle 3Chead % % % 3EEmbedded 20Window % 3C % 2F '    ' 3E % 3C % title% % 3E % 2Fhead 0D% 0A % 3E % 3Cbody % 3E42 % 3C % 3Ch1 % 3E % 3C % 2Fh1 % 2Fbody % 3E % 0 '    ' A% 3C % 3E % 2Fhtml % 0A% 0D% 0A ', ' _blank ', ' height = 300, width = 400 '); This example does not work in Internet Explorer 8 His security settings prohibit navigable file types in Data URLs.

Paste the HTML or CSS with PHP

Because Base64 encoded data urls are not human-readable, a website creator coded data could insert preferably with a scripting language like PHP. This has the advantage that when you change the included file and the HTML source must not be changed, and binary data are separated from the text. The disadvantage is a higher load on the server CPU when no server- side cache is used.

  < img src = "? < php echo data_uri ( ' elephant.png ', ' image / png' );? > " alt = " An elephant " /> The function shown above can also be applied to the CSS data:

  div.menu {    background-image: url ( ' '); } Client - or server-side 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

  • Clipboard Observer is a free Java tool for easy converting PNG files to a data URL.
KIO Bandwidth (signal processing) Transmission delay Uploading and downloading Whitespace character Cache (computing) Internet Society
219670
de