Search notes:

HTML Element: img - data URIs

Data URIs allow to embed (usually binary) data *within a HTML document itself. The data needs to be encoded in Base64.
<!DOCTYPE html>
<html>
<head>
  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
  <title>show circle</title>
</head>
<body>


<img alt="circle" src="data:image/png;base64,
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" />
  
</body>
</html>
Github repository about-html, path: /tags/img/data-uri/show-circle.html

Creating the data URI in the command line

echo "<img alt=\"circle\" src=\"data:image/png;base64,
$(base64 circle.png)\" />" > img.data-uri
Github repository about-html, path: /tags/img/data-uri/create-html-tag.sh

See also

RFC 2379
HTML elements

Index