Note: the below tutorial is currently outdated. Please reference this tutorial at this off-site link for the time being. This website is safe to access and belongs to an SDSU alumni. http://p.aradi.se/twine101.html
***
Duck Quest needs some pictures of cute ducks, doesn’t it? Before you go to a search engine and find a picture of a duck, consider the following:
You should strive to use your own images in your projects, since images do belong to their creators. Would you want someone you do not know using an image of your dog in their Twine project?
Do not hotlink images. This means going onto a search engine, right-clicking, copying the image’s address, and inserting it into your code. This costs people money (bandwidth) and can get you in legal trouble.
If you do use someone else’s work for educational purposes, make sure you credit them.
So… now what? To add images, you will need:
An image editor to re-size images
A form of webhosting (such as neocities)
Images that belong to you, of course!
Ducks aren’t terribly difficult to find in most areas, but you have full permission to use the following graphic. It is also re-sized. By re-sizing, I mean that I am not uploading a 2123 x 3010 picture straight off of my phone that is literally going to consume the entire screen of my computer. You need to re-size images so 1.) people can see them and 2.) they will load in a decent amount of time. How big or small your image is depends on you. The following image is 400×300 pixels, the unit of measure commonly used in web design.
To add this picture of the duck, or any picture for that matter, you will need the image’s address. Right click on the image and select copy image location. When you select ‘paste’, you will see the following:
http://dhc.sdsu.edu/wp-content/uploads/2018/09/duck.jpg
We need to tell Twine that this is an image, though. To do so, we will use this code:
[img[Image]]
[img[http://dhc.sdsu.edu/wp-content/uploads/2018/09/duck.jpg]]
To center the image, type <center>
If you do not end the center tag with , everything in the passage will be centered.