omeday, Twine 2—currently rocking version 2.0.6—may include the ability to import images just like its forerunner, Twine 1. If that's the case, this guide will suddenly become obsolete! Good riddance I say!
Until then, we can quickly and easily include images into Twine 2 twines using Base64 encoding
. (You better notice the "BASE64" in the above meme—it took me all of five minutes to edit it! Ha, ha, ha! I'm so funny!)
Notice, in the title of this thread I placed "Import" in quotes—that's because there isn't currently a UI
option to do so (i.e., there's no "Import Image" button). So, we can't actually include images in that fashion. However, I wanted to make it clear that this isn't a guide to using basic HTML to display images in the standard fashion, something many people already know how to do. No, we're going to actually put the images inside our twine's HTML so that we don't have to include other files or link to the images elsewhere on the 'Net.
Here's a excerpt from the official Twine 2 Guide
If you'd like to create something that makes heavy use of images, sound, or movies, you may want to stick to Twine 1 for now. But that's not to say that you can't use these things in your story! For now, you'll need to store them elsewhere – whether it's on a web site you control, or a service you use like Dropbox – and put references to them in your story.
The guide's author knows all about Base64, I guarantee, but its use goes beyond the scope of the guide. That's where this tutorial steps up to the plate.
The standard way to include images
in a Twine 2 twine is the same as it is with any Web page; that's because Twine 2, like Twine 1, creates HTML files
and HTML files are Web pages when accessed on the Internet. HTML is the standard markup language used to create web pages.
Shut up, Nicolas Cage meme! This is a beginner's guide! >:-(
Anyway, here's the standard way to show an image in Twine 2:
Of course, one must replace the example URL
with the URL of an actual image, but that code in any passage will display an image. Finding an image on the Internet and image hosting isn't within the scope of this guide—but I'd hope that's general knowledge in this day and age. You heard it here first! There are images on the Interwebz! I wonder if there's porn?!
Unless you're like me and are a godlike AI computer brain that can convert images into Base64 using your vast cosmic intelligence, you'll want a tool to do the work for you. There are several out there that your search engine of choice can find.
. . . If only I knew . . . :-(
Okay! No more interruptions from the meme-o-sphere! Let's get to it!
or this guide, we'll use http://www.base64-image.de/
If you're playing along, open that URL now. In another tab or browser window, open Twine 2 and follow these steps:
1. Using base64-image.de, click on Upload Image
. It's a huge orange button; can't miss it. ;-)
2. Click the "choose file
" button and upload your image from your computer.
3. Click the "encode image
4. A new page will open. Scroll down to the "XHTML Image" field
. It's right above the "XML Image" field, so don't get the two confused.
5. Copy the code.
Using Windows, you can do so by left clicking once anywhere on the line of code to select it, then right click in the same location and click "Copy." Or, after selecting the code, you can just press the Ctrl and 'C' buttons simultaneously on your keyboard. Hello, basic computer use skills!
6. Paste the code
into your Twine 2 passage. Likely, this will be a massive, super-long block of code that looks like utter gibberish (to feeble non-AI brains like yours).
Boom. That's it. Yep. Pretty simple. Even an Earthling can do it!
Pfft. Stupid Earthlings. Your day will come.
Now, get to work putting images in your twines! One less excuse to not use file hosting services such as philome.la
or Adventure Cow
Included is an example HTML file using Harlowe (1.0.1), the default story format for Twine 2, but was tested and confirmed to work in SugarCube (1.0.25) and Snowman (1.0.2).
Disclaimer: This basic beginner tutorial was not meant to address all the various nuances and details of Base64 encoding. My anecdotal tests indicate that Base64-encoded images seem absolutely identical in appearance to my eye with no noticeable degradation at all
from the process. However, as an unexpected bonus, using Base64 greatly decreased page loading times for me when switching from the HTTPS
required for cloud hosting solutions such as Dropbox (Microsoft confirmed this should be the case). Notice that the single-passage, no-text file is "heavy" by some 400 KB, roughly the size of the Base64 image, versus a "blank" twine. While the size of my Base64-encoded image is negligibly larger than the source file (or might even be exactly the same) in my example HTML, a Google search tells me Base64 increases the size by a varied amount (some say as much as 33%). Base64 is unlikely to work
, junk browsers (IE8 and older) so old and outdated that they are unlikely to support a lot more than just Base64, so it's practically inconsequential. In other words, if they are using that old of a browser, Base64 support is the least of your design concerns. Most browsers support gigabytes worth of Base64-encoded images. Again, you'll likely run into other limitations before the size of your images matter. For more information on Base64 encoding, see the Internet