Upload your own button images to your interactive videos

Upload images and gifs to buttons ✨

Take your interactive video game to the next level with your own custom image buttons.

In the settings sidebar, in the section for each choice, you’ll see “Button images” – click to open this and you’ll be able to upload an image which will show as the button for that choice.

You can also upload an image that shows when the viewer clicks the button.

Customised buttons in Stornaway island settings panel - A side panel is open in front of the Stornaway map with options for the creator to chose. The image of a cartoon forest with a smiling man in front of it has been uploaded into the button images section.

Customised buttons on a Stornaway player - A black and white video shows a male in a city with his arms out asking the audience which choice he should make - a coloured button on the left shows a cartoon forest with a cartoon-version of the man smiling.

What type of images can I use?

You can use pretty much anything you want. We support the 3 main types of web image files: png, jpg and gif. Webp files aren’t supported by some of the mobile, VR and game apps you can make with Stornaway, so we don’t allow webp for now.

For buttons with transparent backgrounds, you need to use png or gif.

We recommend using png unless you want an animated button, in which case you should use gif.

You can also use jpg, which are great for making very small optimised files, but can’t have transparent backgrounds – so jpg button images will always have straight rectangular edges.

What size should they be?

We recommend starting with 250px wide by 100px tall.

These will fit neatly into the standard button styles, if you have 2 or 3 choices.

If you have a slightly taller or wider button, you can experiment with increasing this. 300px x 150px will fit nicely.

See below for a guide on the different button sizes to use with different Stornaway button style layouts like Split Screen and Quadrant.

How do I make or edit an image to use?

Use any image editor to create and resize your images – Photo Editor comes free with Windows, Preview comes free with Mac. Adobe Express and Canva are free online editors. Adobe Photoshop is the most widely used professional tool.

If you’re not sure, we recommend using Adobe Express because it’s integrated into Stornaway and available on the web.

To create or edit an image with Express, either make a new image at 250px wide by 150px high, or upload something you already have and resize it to that size using the resize tool.

To make a transparent background, click the background icon above the image, and choose “No Fill”

You can use their “Image background remover” to remove backgrounds from people or objects.

Then download as transparent png.

Creating a button for Stornaway inside Adobe Express (inside Stornaway). An image editor is open on the screen, we see the background settings open with the "no fill" option selected.

FAQs about using button images

How do I hide the button text that appears on the top of my image?

The text displayed in your custom button text fields – or the linked island names – will be displayed on top of your custom button image as default.

If you don’t want this, you can either:

Put a blank space in the custom button text field

Screenshot of the island settings panel - an orange arrow points to the 'custom button text' field.

Or, if you want to keep the text for screen readers, set the text to 0% opacity using the bottom slider in the Text Colour setting

A screenshot of the island settings panel where you can set the text opacity to zero.

PNG? JPG? GIF? What should I use?

We support the 3 main types of web image files: PNG, JPG and GIF.

A JPG – also known as JPEG or Joint Photographic Experts Group – is the most common used file for compressed, digital images. Traditionally, they are the smallest size in terms of data. Because of the type of compression used in a JPG, some ‘unnecessary’ details in the image may be lost.

It’s the perfect file for simple, still images.

The image below – taken from an interactive pub quiz created in Stornaway.io – uses JPG files for the button images.

Screenshot of a quiz game in Stornaway - the buttons are JPEGs

A PNG – Portable Network Graphic – is a file that retains all of its data even when it has been compressed. Which means it has a lot of information included in it.
Whilst this makes for a slightly bigger file, the benefits of this extra detail can be huge. For your button images, key specificities around opacity and transparency are contained within the file.

So if you want to your users to press a button that is an isolated object, a logo, an avatar – this is the file choice for you.

Below, a festive, interactive party invite uses PNG buttons of happy & sad gingerbread men for the viewer to click on to confirm their attendance.

A screenshot of a festive interactive party invite, created in Stornaway.io. The buttons are png gingerbread men.

A GIF (some people call it “jiff”) stands for Graphical Interchangeable Format. It was created in order to show short, moving images online with a small file size.

They are perfect for animated images, logos, and reactive buttons.

Below are two examples of this in use:

First up, a GIF of a button being chosen – the button then depresses like it would if you physically pressed a button.

A gif - a purple button with a play button on it is pressed.

Secondly, in an interactive pub quiz – created in Stornaway – the viewer is presented with two, animated choices. Once the viewer clicks the GIF button, a second GIF is shown, like a loading screen.

A pub quiz in Stornaway.io - two gifs show animated button choices. When a button is selected, the gif changes to show another gif, stating that the player is "getting ready".

What is the secondary button image for?

Once your viewer has clicked a button, you may want to reward them with acknowledgement of that choice or perhaps even praise them for making the right choice. You may simply want to show that they have made a selection.

The secondary image upload option allows you to do that.

Below, in an interactive pub quiz made in Stornaway.io, the button changes to a “getting ready” GIF – almost like a “loading” screen once the viewer has made a choice. Adding anticipation for the quiz that is about to start.

Another example, from the same project, uses the secondary image to alert the viewer that they have answered a question incorrectly.