7

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.

Improve this question
2
  • 1
    Another similar-but-not-quite-HTML option would be MHTML. en.wikipedia.org/wiki/MHTML Commented Jan 18, 2010 at 16:04
  • MHTML less well-supported by browsers, but readable by Microsoft Word... worth thinking about, maybe. Commented Jan 18, 2010 at 21:09

4 Answers 4

Reset to default
8

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Does this mean you favour the javascript:imageData method? or that there's limits to both methods?
See my above edit - javascript:imageData is probably the least usable method, as many browsers are eliminated vectors for cross site scripting attacks.
Thanks, jball - the Tarquin link was helpful.
I tried to pick the most useful one that I've come across. Glad to help!
+1 data URLs in img are as good as you can get at the moment. Still not very good of course.
1

imageData is more flexible, for instance some ie's restricts data uris to 32k.

Improve this answer

Comments

1

The data URI scheme is reasonable well supported except in Internet Explorer before version 8.

JavaScript URIs are, I think, slightly better supported but fail if JS is unavailable.

The best thing you can do is to stick to external image resources.

Improve this answer

2 Comments

Should I supply both options, with a test for JS support?
You can't. img elements don't have fallback support for the src attribute, and object elements are poorly supported (especially in Internet Explorer)
0

Data URI's won't work in < IE8. IE8 supports them up to 32KB.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.