How to encode image data within an HTML file?

javascript html image data-url
Richard Inglis picture Richard Inglis · Jan 18, 2010 · Viewed 8.2k times · Source

I'd like to be able to output an HTML file which includes an image (within the file itself). By Googling, I've come across a couple of ways to do this:

  • javascript:imageData
  • a data URI such as <IMG SRC="data:image/gif;base64,[...]">
  • <object ... > tag (although this uses a data URI, so may inherit the same limitations)

But I don't know which is better supported by browsers, or if there are other alternatives.

Can anyone with some practical experience of this offer me advice? Thanks.

Answer

jball picture jball · Jan 18, 2010

In regards to browser support, from Wikipedia:

Data URIs are currently supported by the following web browsers:

  • Gecko and its derivatives, such as Mozilla Firefox
  • Opera
  • KDE, through the KIO input/output system. This allows the KDE browser, Konqueror to support data URIs.
  • Safari; although Safari's rendering engine, WebKit, is a derivative of Konqueror's KHTML engine, Mac OS X does not share the KIO slaves architecture so the implementations are not shared.
  • Safari for the iPhone;
  • Google Chrome
  • Internet Explorer 8; Microsoft has limited support to certain "non-navigable" content, such as in tags and CSS rules, for security reasons, including concerns that JavaScript embedded in a data URI may not be interpretable by script filters such as those used by web-based email clients. Data URIs must be smaller than 32k.
  • TheWorld Browser; is an IE shell browser which has a built-in support for Data URI scheme

IE does not handle the <object> tag correctly, see here for more details. Briefly, you can't trust IE to display images from it.

The javascript:imageData is also not well-supported, since it is used in a lot of cross site scripting attacks.

There are many discussions of this on the web, and they all come to the conclusion that there is no good universal way to embed images. If you only need to support a subset of browsers, the data uri may work, or a combination of data uri and javascript.

Related questions

Programmatically change the src of an img tag

How can I change the src attribute of an img tag using javascript? <img src="../template/edit.png" name=edit-save/> at first I have a default src which is "../template/edit.png" and I wanted to change it …

Read More
execute function after complete page load

I am using following code to execute some statements after page load. <script type="text/javascript"> window.onload = function () { newInvite(); document.ag.src="b.jpg"; } </script> But this code does not work properly. The function is …

Read More
Render HTML to an image

Is there a way to render html to image like PNG? I know that it is possible with canvas but I would like to render standard html element like div for example.

Read More