All Collections
Graphics and Game Design Guides
General Recommendations for Image Sizes
General Recommendations for Image Sizes

For all campaign types: backgrounds, logos, and other images

Mads Lyse Nielsen avatar
Written by Mads Lyse Nielsen
Updated over a week ago

Accepted File Types and Sizes

All images and graphics should be uploaded to a folder in your media library. Here are the file size limits for the each file type.

max. 700 KB:

max. 1 MB:

max. 3 MB:

max. 5 MB:

  • PNG

  • JPEG / JPG

  • TXT

  • DOC

  • ICO

  • GIF

  • TTF

  • WOFF

  • WOFF2

  • EOT

  • MP3

  • SVG

  • PDF

  • XLSX / XLS

We suggest that you save all images at 72ppi resolution to reduce file sizes. If your files are still too large, we recommend TinyPNG.com as a way to compress the files.

For all images, there is a maximum width and height of 2560px.

Note: Playable does not host .mp4, .mov or other video files, but you can link to a video that is hosted on YouTube, Vimeo, or in your own Content Management System.


Dimensions for Background Images

Your background images will display differently based on how much content you have on your landing page and what size screen your participants are using. There is not one, perfect size for a background picture, if it should be full-screen.

That said, we have some basic guidelines:

Desktop background for entire landing page

  • MAX: 2560 x 1440px (save as .svg for higher resolution)

  • MIN: 1600 x 900px

Desktop background for game flow section only

  • MAX: 2560 x 960px

  • MIN: 1600 x 600px


For mobile devices the display will have a high pixel density, meaning that the logical pixels are not the same resolution as the physical pixels.
This means that the rendering scale will effect the quality that the screen can contain. You might have heard the word Retina which is a simple way of explaining this.

Below you will find the resolutions we recommend opting for, when making a background image for mobile while optimizing for Retina.

Mobile background for entire landing page

You can follow the aspect ratios as well for guidance:

  • MAX: 856 x 1852px (19.5:9)

  • MID: 800 x 1600px (18:9)

  • MIN: 750 x 1334px (16:9)


As a general rule, the majority of more recent mobile devices will have an aspect ratio of 19.5:9. But we believe that 18:9 is the ideal ratio if you're trying to find a good compromise between the more traditional 16:9 devices.

You can also check your Google Analytics account to see what screen sizes are most common among your users.


Dimensions for Other Images

The below are just general guidelines. If in doubt, create larger graphics, since they can be cropped or downscaled. Too-small graphics will become grainy if scaled up.

Logo

100–450 pixels wide, usually saved as .png.

Game graphics

Usually between 200x200 – 600x600 pixels, depending on the game type. See our game-specific guides for more information.

Other landing page images

Usually between 200x200 – 400x400 pixels (wider for full-width banner images). These images might be be added to game flow pages or landing page sections above or below the game flow.

Facebook share image (meta image)

Recommended: 1200x630 pixels

Minimum: 600x315 pixels

Preloader (displays while the landing page loads)

Recommended maximum 200x200 pixels for the fastest possible load time, usually saved as .png.

Did this answer your question?