<- [[Editing Passages]] --------- [[Finishing Up And Proofing Your Work]]->

======Images======

It is said that the most important tag in early World Wide Web history was <img> - with it, web pages could finally stop looking like structured documents and start looking like anything they wanted to look like. This was the Web's defining advantage over its competitors. In that sense, images and hypertext are intimately intwined, and in Twine their revelance is not diminished.

=====Importing images=====

Images can serve many purposes in a story or game - [[passage]] illustrations, page [[stylesheet|backgrounds]], interstitial GIF animations, a title logo, and so forth. Given their vital importance, Twine enables you to incorporate **image assets** into your project's story file, as separate "passages" alongside your text. Images stored in the story file will be embedded inside a finished story's built HTML - guaranteeing that the images will //always// be visible in the story, even if the HTML file is uploaded to a site or service like [[http://philome.la/|Philomela]].

You can add an image asset to your story by either using the "Import Image" menu items in the Story menu, or by dragging and dropping an image file into the [[Story Map]]:

{{ :drag-n-drop.png |}}

In Twine 1.4.2 or above, the program will ask you, when you close a passage, if it can automatically import the external images used in it - the images referred to by URLs.

Image assets appear in your story as passages with teal titles:

{{ :images.png |}}

If you try to edit an image, you'll be presented with a preview. From there, you may save the image back to a file, copy it, or rename it.

====A note about formats====

Since Twine games run in a web browser, any format that the browser supports can be displayed. However, the Twine development program only supports the following formats as imported image assets: PNG, GIF, JPEG, WebP and SVG. Furthermore, due to limitations in wxPython, WebP and SVG images will //not// display in the Story Map (but will remain usable in the browser).
=====Usage=====

Once you've imported an image, you can refer to it by its name using this syntax:

>[img[//image name//]]

You can make an image that is also a [[link]] to another passage:

>[img[//image name//][//Passage name//]]

If you put the '<' or '>' symbols in front of 'img', it will be floated to the left or right, insetting it in the passage text:

>[<img[//image name//]]
>[>img[//image name//]]

You can add "alt text" (title text) to the image like so:

>[img[//alt text//|//image name//]]

And, you can refer to external image URLs with this syntax, too.

>[img[//%%http://example.com/icon.png%%//]]

This syntax is mostly a shorthand for the HTML <img> tag. If you need to customise the image further (for instance, by adding a class or style attribute) then you can fall back to <img> - but note that you can't refer to imported image assets with it:

><img src="image URL">

=====Usage in stylesheets=====

The preceding section describes how to use images in passages. But, you can also use them in [[stylesheet]]s:

>//selector// { //property//: [img[//image name//]] }

When used in this context, the syntax is converted at runtime into:

>//selector// { //property//: url(//image data...//) }

So, anywhere that a url() attribute can be used, the [img] syntax can be deployed.


=====Story Formats=====

You can get big style firepower out of using different [[story format|Story Formats]]. [[story format|Details about Story Formats appear earlier in this reference sequence.]]

<- [[Editing Passages]] --------- [[Finishing Up And Proofing Your Work]]->