Use inline base64 image several times

Question

I have several small images in an HTML document that I want to make portable, for example. still works when sending email. I am using the following which works great:

<img src="data:image/png;base64,..."/> 

The problem is that I want to use the same image many times in a document, but I don't want to repeat the entire base64 data string. I saw in letters where the data is encoded at a time, but many are mentioned. Is this possible with HTML?

Answer 1

If you can use CSS, you can place it there instead of a class.

Then just add the class to the elements you need.

Answer 2

Configure your web server to zgip (/ deflate) your content. Deflate should detect a duplicate string and shrink to about the same size as you if you only included it once. This way you won’t lose bandwidth. Does not work for email or for a simple html file in the file system.