Twine: storing images inside the HTML file

Update: embedded images in Twine 1.4 already use this technology automatically.

One aspect of Twine that I very much like is that the entire game is included in a single HTML file. It provides a great convenience and advantage for maintaining and archiving the game. Some Twine games include images in the text, and in most all cases there are in the form of hyperlinks to external image files, which, being separate from the game file, are vulnerable to being lost or broken.

There is a way to store image files (among other files) inside HTML using Base64 encoding, which converts binary files into streams of ASCII. Simply use an online Base64 encoder to convert your image into a Base64 data URI, and paste that wherever you would paste a URL to an image. This works not only for the HTML img tag, but also for Twine's img markup (although it probably won't be syntax-highlighted correctly in the passage editor).

Here is an example:
[img[data:image/png;base64,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]]

(If you paste the entire data URI between the braces into your browser URL bar, you can see the image.)

Some advantages:
- Stores all the game's resources in one file.
- Images are preloaded when the game starts.

Some disadvantages:
- Base64 encoding increases the size of the images by 33%.
- Can't easily use the same image file for multiple passages - each passage must have a full copy of the file. (You can work around this with some JavaScript preprocessing, if you really need to.)
- Doesn't work with IE versions < 9... go figure.

Comments

avery's picture

beb

i attempted to insert said link into the address bar in chrome and it kept trying to search it

either im doing something wrong or you fucked it up

nice horizontal page stretch btw

The URI should begin with

The URI should begin with "data:" and end with the final C of the base64 code.

Click this