Itch Page Image

Guide and Templates

Guide by Star - PDF compila�on by Kona - h�ps://starwest.itch.io/itch-page-image-templates
Cover Image

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

Recommended Dimensions: 630px x 500px

Maximum Dimensions: 3840px x 2160px
Maximum File Size: 3 MB

Set the cover image from the “Edit Game” page

Cover Image
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
automa�cally display the Cover Image where your Screenshots would normally
display.

With no screenshots, the cover image displays where they would go

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.

If you want your Cover Image to ALSO display as one of your Screenshots, you
need to upload it to BOTH places.
Cover Image
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 colora�on
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.

Search results with no cover image set

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.

Game jam listings with no cover image set

Game Page Banner

Game Page Banner

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

Maximum Display Dimensions: 960px Wide

Maximum File Size: 3 MB

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 �tle of your Game in the Banner somewhere or to include it
as part of your Details.
Game Page Banner
Adding a Page Banner
Unlike the Cover Image and Screenshots, which are part of the game edi�ng
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 naviga�on menu.
This opens the theme editor panel to the le� of your page.

Find where it says Banner and click on the Upload bu�on.

When the image finishes uploading, click Save.

Clicking Edit Theme a second �me will dismiss the theme editor panel.
Your Game Page Banner should now be set.
Screenshots

Screenshots
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.

Display Size (In Page): 347px wide

Maximum Display Size (Overlay): Constrained by Browser Window
Maximum File Size: 3MB

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

Screenshot Overlay
Clicking on a Screenshot will display it as an overlay with naviga�on 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 ra�os will display both
in the Screenshot sidebar and in the overlay.

Screenshot open in overlay

Screenshots
Animated GIFs
Itch supports the uploading of animated GIFs as your screenshots. They will be
displayed as sta�c 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.

Mobile display of an itch.io page

In-Line Body Images

In-Line Body Images

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

Maximum Display Size (with Screenshot Sidebar): 560px wide

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

Sizing
Images inserted into the Details field will automa�cally 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 be�er looking display
on a mobile device.

Take this image as an example:

This is Lingonberry; she was the inspira�on for the game The Esteemed Order
of Disgruntled Hedgehogs. [ Note from Kona: this demo doesn’t make as much
sense in the pdf guide, but there’s no way I was going to remove excellent
hedgehog content.]
Very Large Images
A nice, big 1200 x 1200 image of Lingonberry will be shrunken down by itch
to 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.

Very Small Images

Now, if I had a smaller version of this picture of Lingonberry, let's say only
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:
In-Line Body Images
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 naviga�on menu. This opens the theme editor panel to the le�
of your page.

Find the sec�on labeled Layout and the field Screenshots

Select Hidden and then Save your changes.

Clicking Edit Theme a second �me will dismiss the theme editor panel.
In-Line Body Images
Inserting an Image In-Line
To insert an image into the Details or Download & Install Instruc�ons, 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 �tle, alt
text, or turn that image into a link. A Delete bu�on is also available.
Background Image
Background Images
[TBD--I am s�ll working on this sec�on as handling backgrounds with webdesign can
be an absolute pain and requires some extra explana�on; I may even end up pulling
this into its own separate guide to give me more visual space to provide
explana�ons.]

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 naviga�on menu.
This opens the theme editor panel to the le� of your page.

Find the Sec�on labeled Images and look for the Background op�on. Click
Upload, and find the Background Image you want to use.

Once you have your image uploaded you have some op�ons here. We'll discuss
how to effec�vely take advantage of these op�ons 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 direc�on, 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 Le�, your
image will be le�-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 ver�cally on the
page, only horizontally.
Fixed - Unless you're doing something really fancy with very tall
background images or image repe��on, this op�on is going to be your best
friend. This makes your page content scroll over the top of the background
and your background stays sta�c, which will help when addressing the any
concerns about ver�cal repe��on.