Is there a way to show bitmap data in html image tag?

Question

Is there a way to show bitmap image data in an HTML element?

For example, you have a regular image that points to a source file like this:

<img src="myImage.png" width="100" height="100" />

Is there something like this:

<img width="100" height="100">
     <data>ABCDEF...</data>
</img>

Where data would be bitmap data or something similar? And if possible if you know if it's recommended or supported in major browsers?

Please don't change an old question to something completely different, especially if it already has answers. Ask a new question instead. — JJJ, Feb 22 '16 at 08:56

score 15 · Accepted Answer · answered Oct 14 '13 at 21:11

15

You could use a data URI:

<img src="data:image/bmp,ABCDEF..." width="100" height="100" />

If you encoded the data in base64, it could look like this:

<img src="data:image/bmp;base64,BASE64DATAGOESHERE..." width="100" height="100" />

answered Oct 14 '13 at 21:11

tckmn

1

Data URIs have there own pitfalls and should be [taken with a grain of salt](http://www.mobify.com/blog/css-sprites-vs-data-uris-which-is-faster-on-mobile/)! – nietonfir Oct 14 '13 at 21:15
1

8 years after posting it, your example here sorted our issue out - thanks. – Artie Leech Mar 16 '21 at 15:35
1

For reference here archive of the link @nietonfir mention in his comment [taken with a grain of salt](https://web.archive.org/web/20160404090840/http://www.mobify.com/blog/css-sprites-vs-data-uris-which-is-faster-on-mobile/)! – Denis Murphy Apr 20 '22 at 15:00

1 Answers1