Is it possible to have a html code and all images in one file?

Question

I want to have a html file with javascript. Then I want to have some images in this file. I want to send this html file to my friends (per e-mail). I want them to see my html file with images but I do not want to send them all files with all images. It would be nice to send them just one file.

I also do not want to have images on a web-server.

I also do not want to send them an archive with all the files (since they then need to open this archive).

Do I want to much or it's possible to do what I want?

ADDED

I do not want my friends to see the html file in a mail-client. I want to send a file as an attachment. So, they can save it and then open with a browser.

Answer 1

Depending on whether the mail client supports it, you could in theory use the data URI scheme, like so:

<img src="data:image/png;base64,
    iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP
    C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA
    AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J
    REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq
    ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0
    vr4MkhoXe0rZigAAAABJRU5ErkJggg==" alt="Red dot" />

Again, the support is mail client dependent. Some might not support it at all. Some might truncate after a X amount of bytes. Etcetera. As far as I know there aren't many of them. Further I don't see another ways to inline images in HTML like that. Until the support is widespread, your best bet is really to send the images along as an attachment.

---

Update as per the OP's update: well, most of the modern webbrowsers supports it. The aforementioned Wikipedia link even mentions them in detail.

Data URIs are currently supported by the following web browsers:

• Gecko-based, such as Firefox, XeroBank, Camino, Fennec and K-Meleon
• Konqueror, via KDE's KIO slaves input/output system
• Opera (including devices such as the Nintendo DSi or Wii)
• WebKit-based, such as Safari (including on iPhones), Android's browser, Epiphany and Midori (WebKit is a derivative of Konqueror's KHTML engine, but Mac OS X does not share the KIO architecture so the implementations are different), as well as Webkit/Chromium-based, such as Chrome and Iron
• Internet Explorer 8: Microsoft has limited its support to certain "non-navigable" content 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 32 KiB.

Note that IE8 truncates the string after 32KB. So, as long as the images aren't that large, you could use the data URI scheme for IE8 users. It's not supported on IE7 and lower.

Answer 2

I am not aware of a way to accomplish what you're after with 100% certainty it will work.

Is there a way to forgo the images? Perhaps an ascii representation instead? (something like this http://www.text-image.com/)

The archive would be the only "single file" option that I'm aware of.

Answer 3

Yes, it is possible:

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

# CSS
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA.................)

File source is encoded using Base64 algorithm that allows easily represent binary data as normal text.

Find out more on wikipedia: Data URI scheme.

Answer 4

You cant execute javascript from a mail client. You can inline the images, but you will need a library because doing it by hand is non-trivial.

You should just send them a link.

Answer 5

You should never, under any circumstances, send email whose body is HTML. Send plain text mail with the images as MIME attachments, or better yet, put the images on a website (I hear Flickr is quite good ;-) and send them URLs.

I'm going to say it again, because it needs to be said more often: email must be plain text.

Answer 6

Why don't you just link the images with relative paths, and bundle them in a folder with the html file and send it archived and compressed (zip or tarball, depending on preference)?

Answer 7

If you just want to send one file, just zip it using your favorite compression program.