Use a base64 embedded image multiple times

Question

I have a couple small images in an HTML document that I want to make portable, e.g. still works when emailing. I use the following, which works great:

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

Problem is, I want to use the same image many times in the document, but don't want to repeat the entire base64 data string. I have seen in emails where the data is encoded a single time, but referenced many. Is this possible with HTML?

score 9 · Accepted Answer · answered Aug 24 '11 at 13:26

9

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

Then just add the class to the elements you want.

answered Aug 24 '11 at 13:26

alex

479,566
201
878
984

I don't want to use CSS if I can avoid it (simply due to the amount of redesign that would be required). But, that is an option, I found this question that helps: http://stackoverflow.com/questions/1207190/embedding-base64-images – steveo225 Aug 24 '11 at 13:28
You don't need to redesign. You could just use css only for the images. something like .repeatimage { background:url(data:...); display:inline-block; width:10px; height:10px;}, and in html use . Will not work in all email clients, but data urls will work in even less of them. – Gerben Aug 24 '11 at 15:20

score -1 · Answer 2 · answered Aug 24 '11 at 15:17

Configure your webserver to zgip (/deflate) your content. Deflate should detect the repeating string and compress to about the same size as you would have if you only included it once. This way you won't waste bandwidth. Doesn't work for email, or for plain html-file in filesystem.

Use a base64 embedded image multiple times

2 Answers2

Linked