'Use embedded image data multiple times in a single HTML

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.

htmlimagehtml-encode


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions