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:
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 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.
100–450 pixels wide, usually saved as .png.
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.