I am trying to create a single file HTML5 document that can be emailed to people that would contain all markup, js, css and images needed to run it.

I am aware of articles describing the offline process such as .html, however would like to know the best method to embed its resources such as large images and js files.

Would I be using base64 encoding for these or is there a better approach?

App will be running on fairly new browsers.

I am trying to create a single file HTML5 document that can be emailed to people that would contain all markup, js, css and images needed to run it.

I am aware of articles describing the offline process such as http://diveintohtml5.info/offline.html, however would like to know the best method to embed its resources such as large images and js files.

Would I be using base64 encoding for these or is there a better approach?

App will be running on fairly new browsers.

• javascript
• html
• base64
• offline

• I honestly don't think it's possible to create a "single file" web page. HTML, JS, CSS, images, etc are all different files in different formats and need to be stored as such. You can zip everything up in order to distribute it... but it will still need to be unzipped in it's final destination. – Charlie74 Commented Sep 28, 2013 at 15:04
• @Charlie74 Data URIs. – Pointy Commented Sep 28, 2013 at 15:06
• @Jeffman, yes as per other ment it needs to be instantly viewable – Gga Commented Sep 28, 2013 at 15:06
• @Pointy interesting... actually would have never thought of doing something like that... – Charlie74 Commented Sep 28, 2013 at 15:08

2 Answers 2

Yes, base64 encode the images. What I do is save them as png and to the correct size before converting to base64 (there are free online sites that do it for you). This saves a lot of space.

For saving data to localfile, use HTML5 local storage, here is a guide: http://www.html5rocks./en/features/storage.

For the JS/CSS files, just paste them in the head, no biggie!

I've had to do this rather aggressively for some work.

To reduce the file size significantly, if the graphic is line art rather than a photo, I prefer to convert it to a scalable vector graphic file instead (.svg). These are text files understood by most browsers today on their own, and easily embedded into an HTML file directly. You have a few options here depending on how you want to do it, ranging from directly using the tag with the mands to drive it, or embedding it as a stylesheet ponent to use wherever you need it within the body of the document by using a data URI (e.g. .my_image{background:url(data:image/svg+xml;charset=UTF-8,[SVG file without newlines]);}, find more detailed information available here: https://css-tricks./using-svg/ ). Ensure you test on all the browsers you want this to work with... I've been able to do this successfully on IE, Chrome, Firefox, and Edge, although I had to use charset=US-ASCII and apply some filtering of the SVG text to make it work.

For fonts, I use Font Squirrel to generate a webkit from a font file I uploaded (use the advanced options, and set the stylesheet.css to have the font embedded within it, so you can copy the resulting text into your own page).

External stylesheets and JavaScript can simply be copied directly into your HTML, as already mentioned.