Assume I want to have embedded image data in my html like this example from wikipedia:
<img src="data:image/png;base64,iVBORw0KGgoAAA
ANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4
//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU
5ErkJggg==" alt="Red dot" />
(which produces a red dot).
How can I re-use this same image data multiple times in the same HTML file?
<html>
<body>
<img src="data:image/png;base64,iVBORw0KGgoAAA
ANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4
//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU
5ErkJggg==" alt="Red dot" />
<h1>Some Content</h1>
<img src="???" alt="Another red dot"/><br>
<img src="???" alt="And so on..."/><br>
</body>
</html>
The overall goal is to create a self-contained (emailable) HTML file that can be opened and viewed independent of any network connectivity. The images are relatively small thumbnails -- icons representing different divisions in the overall organization. The content of the page is a list of items, each item has an icon. Each specific icon is typically used multiple times in the page.