Twine for Beginners: Adding Images as Base64

Twine 2 lets you do a whole lot with simple text and hyperlinks, and it couldn’t be easier to get started. If you want to take things a step further and add images as well, that’s not hard either! There are actually a few different methods of doing this, each with their own strengths and weaknesses. This guide will lead you through my favourite.

About Base64:

Base64 is a method of encoding binary data as strings of text. Put simply, it takes all the 1s and 0s that make up a file (such as a JPEG, PNG or GIF) and translates them into an ungodly string of letters, numbers and symbols that you can paste directly into Twine.

Why would anybody do this, you ask? Because this allows you to include images as part of your Twine game. If you want to share your game with people, you can send them the finished HTML file (or upload it somewhere such as philome.la), and any pictures you’ve added in this way will be right there inside it. Here’s a run down of why you might (and might not) want to use this option:

Benefits of including images as Base64:

  • Images are stored right inside the game (so only one file to upload/send).
  • Images do not have to be hosted on an external site (which may not always be available)
  • Images will display properly when previewing the game using Twine 2.
  • Images do not require an internet connection.
  • It’s fairly foolproof. A minor point, but including images in this way eliminates the possibility that your player will move files around in a way that prevents the game from finding them when it needs to.

Drawbacks of including images as Base64:

  • Significantly increases size of game file.
  • Adds a vast amount of text to the editor, which may make it run slowly.
  • Images (particularly large images) may take some time to load.
  • Base64 encoded images will be larger than the original files.
  • Harder to edit images included in this way.

For the most part, the benefits significantly outweigh the drawbacks. However, if you’re going to make heavy use of Base64 images then I do recommend downloading and installing Twine 2 rather than using it in your browser. The reason for this is that Twine 2 has only a limited amount of storage available to it in your browser, and images will eat into this significantly. If you download and run it directly on your computer, the only limit is the size of your hard drive (which a few JPEGs are unlikely to fill).

How to do it:

The basic code to include an image as Base64 looks like this:

<img alt=”AN OPTIONAL DESCRIPTION OF THE IMAGE” src=”data:image/TYPE OF FILE;base64,A HUGE STRING OF BASE64 GIBBERISH” />

The portions in bold are things I’ve stuck in just to illustrate what should go there. Here’s a specific example:

This is a 100×100 pixel PNG of some bananas. A JPEG or GIF would be equally suitable. There are loads of services online that will convert images into Base64 strings. I recommend this one. When I upload the image, here’s what it spits out:

The box labelled “Image Source” contains everything you need (but no description of the image, which is helpful to visually impaired players using screen readers, and to you to keep track of what goes where). The box labelled “Base64 String” contains, unsurprisingly, the actual Base64 string representing the image. It’s long. To include these bananas in a Twine game, I would write this:

<img alt=”bananas” src=”data:image/png;base64,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” />

Yeah. I wasn’t kidding when I told you it was long. At 13.5kB, this isn’t even a particularly large image. For comparison, the screenshot of the conversion tool is 305kb: its Base64 string would be 20 times as long!

Because they take up so much space (both in the file and on screen), you’ll most likely want to put any Base64 images in their own Twine passage, then use the (display:) macro to include them in your actual story. It’s the same process described in my tutorial on displaying random text (which can be similarly unwieldy). (display: “banana image”) is a lot easier on the eyes than this whole mess, and it means that the Base64 string itself only ever needs to be included in the game once.

To get a better idea of how this all fits together, you might like to try importing this example game by following the instructions laid out in this tutorial.

As always, if you make anything with the help of this tutorial, please leave a link in the comments below! You don’t need an account or even an email address – just leave your name and message and I’ll approve it as soon as I can.

One comment

  1. Pingback: Twine for Beginners: Adding Local Images | Damon L. Wakes

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.