Data URI scheme: Difference between revisions

Revision as of 01:05, 17 April 2024

Revision as of 01:08, 17 April 2024

Line 1:

{{Short description|Web page in-line data scheme}}

{{Lowercase title}}The '''data URI scheme''' is a [[Uniform resource identifier|uniform resource identifier (URI)]] scheme that provides a way to include data in-line in [[Web page]]s as if they were external resources. It is a form of file literal or [[here document]]. This technique allows normally separate elements such as images and style sheets to be fetched in a single [[Hypertext Transfer Protocol|Hypertext Transfer Protocol (HTTP)]] request, which may be more efficient than multiple HTTP requests,<ref>{{cite web|url= [[octet (computing)|octets]] represented as charactershttp://blog. The comma is required in a data URI, even when the data part has zero lengthteamtreehouse. The characters permitted within the com/using-data-uris-speed-website|title=Using partData includeURIs ASCIIto upperSpeed andUp lowercaseYour letters,Website|date=27 digits,March and2014|publisher=Treehouse many ASCII punctuationBlog}}</ref> and specialused characters.by Noteseveral thatbrowser thisextensions mayto includepackage characters, suchimages as colon,well semicolon,as andother commamultimedia which are delimiterscontent in thea URIsingle componentsHTML precedingfile thefor data part. Other octets must be [[percent-encoding|percent-encoded]]. If the data is Base64-encoded, then the data part may contain only valid Base64page characterssaving.<ref name="rfc3986">{{cite web|url=httphttps://toolschrome.ietfgoogle.orgcom/webstore/detail/htmlsinglefile/rfc3986mpiodijhokgodhhofbcjdecpffjipkle|title=UniformSingleFile Resource- IdentifiersChrome (URI):Web Generic SyntaxStore|author1-firstwebsite=TimChrome Web Store|author1access-lastdate=Berners-Lee25 August 2018}}</ref><ref>{{cite web|author1-linkurl=Tim Bernershttps://addons.mozilla.org/en-Lee|author2US/firefox/addon/single-first=Royfile/|author2-lasttitle=Fielding|author2-link=RoySingleFile – Fielding|author3Add-first=Larry|author3-last=Masinter|publisher=[[Internet Engineeringons Taskfor Force]]Firefox|datewebsite=JanuaryFirefox 2005Add-ons|access-date=3125 August 20152018}}</ref> Note{{As thatof|2024}}, Base64-encoded <code>data:</code> URIs useare thefully standardsupported Base64by characterall setmajor (with 'browsers.<coderef>+</code>'{{cite and '<code>web|url=http:/</code>'caniuse.com/#feat=datauri|title=Can asI charactersuse...|first=Alexis|last=Deveria|date=July 62 and 63) rather than the so-called "[[Base64#URL_applications2015|URLaccess-safedate=31 Base64]]"August character set.2015}}</ref>

==Syntax==

The syntax of data URIs is defined in [[Request for Comments|Request for Comments (RFC)]] 2397, published in August 1998,<ref>{{cite web|url=http://tools.ietf.org/html/rfc2397|title=RFC 2397 - The "data" URL scheme|author=Masinter, L|publisher=[[Internet Engineering Task Force]]|date=August 1998|access-date=2008-08-12}}</ref> and follows the [[Uniform resource identifier#Generic syntax|URI scheme syntax]]. A data URI consists of:

<pre>data:content/type;base64,</pre>

* The '''scheme''', <code>data</code>. It is followed by a colon (<code>:</code>).

* An optional '''media type'''. The media type part may include one or more parameters, in the format <code>attribute=value</code>, separated by semicolons (<code>;</code>) . A common media type parameter is <code>charset</code>, specifying the character set of the media type, where the value is from the IANA list of [[character set]] names.<ref>{{cite web|url=https://www.iana.org/assignments/character-sets/character-sets.xhtml|title=Character Sets|editor1-first=Ned|editor1-last=Freed|editor2-first=Martin|editor2-last=Dürst|publisher=[[Internet Assigned Numbers Authority]]|date=20 December 2013|access-date=31 August 2015}}</ref> If one is not specified, the [[media type]] of the data URI is assumed to be <code>text/plain;charset=US-ASCII</code>.

* An optional '''base64 extension''' <code>base64</code>, separated from the preceding part by a semicolon. When present, this indicates that the data content of the URI is [[binary data]], encoded in ASCII format using the [[Base64]] scheme for [[binary-to-text encoding]]. The base64 extension is distinguished from any media type parameters by virtue of not having a <code>=value</code> component and by coming after any media type parameters. Since Base64 encoded data is approximately 33% larger than original data, it is recommended to use Base64 data URIs only if the server supports [[HTTP compression]] or embedded files are smaller than 1KB.

* The '''data''', separated from the preceding part by a comma (<code>,</code>). The data is a sequence of zero or more [[octet (computing)|octets]] represented as characters. The comma is required in a data URI, even when the data part has zero length. The characters permitted within the data part include ASCII upper and lowercase letters, digits, and many ASCII punctuation and special characters. Note that this may include characters, such as colon, semicolon, and comma which are delimiters in the URI components preceding the data part. Other octets must be [[percent-encoding|percent-encoded]]. If the data is Base64-encoded, then the data part may contain only valid Base64 characters.<ref name="rfc3986">{{cite web|url=http://tools.ietf.org/html/rfc3986|title=Uniform Resource Identifiers (URI): Generic Syntax|author1-first=Tim|author1-last=Berners-Lee|author1-link=Tim Berners-Lee|author2-first=Roy|author2-last=Fielding|author2-link=Roy Fielding|author3-first=Larry|author3-last=Masinter|publisher=[[Internet Engineering Task Force]]|date=January 2005|access-date=31 August 2015}}</ref> Note that Base64-encoded <code>data:</code> URIs use the standard Base64 character set (with '<code>+</code>' and '<code>/</code>' as characters 62 and 63) rather than the so-called "[[Base64#URL_applications|URL-safe Base64]]" character set.

Examples of data URIs showing most of the features are: