The Itch Game Page Image Guide & Templates

This free Itch project helps you create great pages to promote your work on itch.io. It includes a guide to the various image assets Itch supports on its game pages, including an explanation and examples of each image type as it displays on a page.

Downloadable Guide and Templates

The Image Guide is available in a downloadable PDF format for offline viewing for download below! In addition to the guide, there are also three collections of image templates you can download for free below in PSD, PNG, and Affinity formats.

• The PSD templates were designed with Adobe Photoshop, but are also usable with several other graphics editors including GIMP, Paint.NET (requires the PSD Plugin), or Photopea.
• The Affinity formats include support for Affinity Publisher and Affinity Photo,.
• Lastly, for anyone using other graphics software that doesn't support the use of PSDs there is also a set of PNG templates you should be able to use.

Special thanks to Kona who compiled the image guide into PDF format and converted the PSD templates into Affinity compatible files!

You can check out all of my free Guides and Templates here.

Game Page Image Types

Cover Image

• Recommended Dimensions: 630px x 500px
• Maximum Dimensions: 3840px x 2160px
• Maximum File Size: 3 MB

A game's Cover Image is displayed in multiple places throughout itch, and is generally used to represent your game on the itch homepage, in search results, on your profile, etc.

No Cover Image?

If you don't include a Cover Image for your game's page, itch will include a placeholder image of a star on your profile and in search results. The coloration of the star image will vary in search results depending if you are using light or dark mode (gray with a white background or white with a black background.) The mode you use does not change how it displays on your profile page.

In game jam submission lists, however, itch will display a "no image :(" message where your cover image would have displayed in the list of submissions.

Even if you upload other images to your game's page, such as screenshots or a banner image, if you do not have a cover image, the "no image :(" message will display.

The Cover Image Interacts with Screenshots

Uploading Screenshots to your Game Page changes how your Cover Image is displayed.

No Screenshots Uploaded

If you don't have any screenshots uploaded for your game, itch will automatically display the Cover Image where your Screenshots would normally display.

With Screenshots Uploaded

If you upload a Screenshot to your game page, however, the Cover Image will NOT be displayed. The uploaded Screenshots display instead (as is seen on this game page.)

If you want your Cover Image to ALSO display as one of your Screenshots, you need to upload it to BOTH places.

Game Page Banner

• Maximum Display Dimensions: 960px Wide
• Maximum File Size: 3 MB

The Game Page Banner is displayed at the top of your Game Page.

The maximum width that will display on the itch page is 960px, but you can upload a larger or smaller image if you want to. I haven't experimented with finding a maximum height, but I recommend keeping it less than 400px (preferably around 300px) unless you're making a specific design choice and using it for something other than a header. The Banner I've uploaded for this page is 400px high so you can see what that looks like on the page.

IMPORTANT! The Banner REPLACES your game's Title, so it's probably a good idea to include the title of your Game in the Banner somewhere or to include it as part of your Details.

Adding a Page Banner

Unlike the Cover Image and Screenshots, which are part of the game editing process, the Page Banner has to be added as part of the page Theme.

While viewing your game's page click on Edit Theme from the navigation menu. This opens the theme editor panel to the left of your page.

 Find where it says Banner and click on the Upload button.

When the image finishes uploading, click Save.

Clicking Edit Theme a second time will dismiss the theme editor panel.

Screenshots

• Display Size (In Page): 347px wide
• Maximum Display Size (Overlay): Constrained by Browser Window
• Maximum File Size: 3MB

By default, Itch will include a sidebar with Screenshots on the right-hand side of your page. Each uploaded screenshot is scaled to be displayed with a maximum width of 347px within the sidebar.

If you don't upload any Screenshots for your game, by default the Cover Image will display here instead.

Screenshot Overlay

Clicking on a Screenshot will display it as an overlay with navigation that enables the viewer to shuffle between them.  The overlay is responsive and will re-scale your image to fit the browser window, so it is worth uploading a higher-quality.

I have uploaded images of several different sizes as Screenshots so that you can get an idea of how images of different sizes and aspect ratios will display both in the Screenshot sidebar and in the overlay.

Animated GIFs

While I don't have any examples on this page, Itch supports the uploading of animated GIFs as your screenshots. They will be displayed as static images in your Screenshots sidebar, but they will be animated when viewed in the overlay.

Mobile Display

The itch pages are semi-responsive. When your page width decreases to less than 943px the Screenshot sidebar will relocate to the top of the page, just under the Banner.

In-Line Body Images

• Maximum  Display Size (with Screenshot Sidebar): 560px wide
• Maximum Display Size (without Screenshot Sidebar): 920px wide
• Maximum File Size: 3 MB

Itch pages have two fields where you can insert images and videos in-line with text. These are the Details and the Download & Install Instructions fields. Most of your game description (and all of the text on this page) will go into the Details.

Images inserted into the Details field will automatically be resized down to fit the maximum available width of the details field. The width of Details is semi-responsive with a maximum width of either 560px with Screenshots displayed or 920px with Screenshots hidden (See With and Without the Screenshot Sidebar below.)

This means that if you screen width is smaller than either of those dimensions above, the width of your images will shrink, giving you a better looking display on a mobile device.

Take this image as an example:

This is Lingonberry; she was the inspiration for my game The Esteemed Order of Disgruntled Hedgehogs. This picture of Lingonberry is 1200 x 1200px.

That's MUCH wider than the maximum width that it can be displayed here, so itch has shrunk it down display at maximum 560 x 560px when viewed on a wide enough desktop monitor, and it will shrink down even smaller on a mobile device.

Now, if I had a smaller version of this picture of Lingonberry, let's say only 200 x 200px and I inserted it in-line. Well, that's much smaller than the width of the Details screen on most devices, so Itch will just display it in its full size:

With and Without the Screenshot Sidebar

While itch displays the Screenshots Sidebar by default, you don't have to include Screenshots on your page. If you'd rather include all of your images in-line you can do that. Be aware that images place in-line DO NOT display in the overlay when clicked on.

With the Sidebar off, the maximum width your images in-line images will display is 920px.

Turning off the Screenshot Sidebar

To turn off the Screenshot Sidebar, while viewing your game's page click on Edit Theme from the navigation menu. This opens the theme editor panel to the left of your page

Find the section labeled Layout and the field Screenshots

Select Hidden and then Save your changes.

Clicking Edit Theme a second time will dismiss the theme editor panel.

Inserting an Image In-Line

To insert an image into the Details or Download & Install Instructions, simply click on the image icon at the top of the editor.

You can either upload a new image from your computer:

Or pick from an image you've uploaded recently:

If you click on an image you've already inserted in-line, you can add a title, alt text, or turn that image into a link. A Delete button is also available.

Background Images

[TBD--I am still working on this section as handling backgrounds with webdesign can be an absolute pain and requires some extra explanation; I may even end up pulling this into its own separate guide to give me more visual space to provide explanations.]

Backgrounds are always tricky when it comes to web design. Because there are so many different-sized screens out there, it's really hard to predict how your background is going to look on as many screens as possible.

However, there are a few tricks you can learn, which will go a long way.

Adding a Background Image

Background images for your page are managed from the theme editor panel.

While viewing your game's page click on Edit Theme from the navigation menu. This opens the theme editor panel to the left of your page.

Find the Section labeled Images and look for the Background option. Click Upload, and find the Background Image you want to use.

Once you have your image uploaded you have some options here. We'll discuss how to effectively take advantage of these options further below.

• Repeat - Lets you control whether or not your image will be repeated if the width or height of the page is bigger than your image. You can select whether you want it to only repeat in one direction, both, or not at all.
• Align - Determines the placement of your image on the page horizontally across the page. Think like text in a word processor. If you select Left, your image will be left-aligned to the page; Right, it will be right-aligned; and Center will make it center-aligned. It's important to remember that this does not have any control over how your image is placed vertically on the page, only horizontally.
• Fixed - Unless you're doing something really fancy with very tall background images or image repetition, this option is going to be your best friend. This makes your page content scroll over the top of the background and your background stays static, which will help when addressing the any concerns about vertical repetition.