What size images work best?

Images are the rocket fuel for quizzes – the right pictures can turn an average quiz into an awesomely engaging one.

Riddle’s quiz maker gives you a range of image options, including Google, Pexels, Giphy, and plus uploading your own.

You can make quizzes in three orientations – wide, tall, or square. Each uses different image dimensions.

  • Widescreen: 960 x 540
  • Square: 720×720
  • Tall: 720×960
  • File size: 250KB is a good target.
  • Format: .jpg or .png

Set quiz orientation in the title screen

  • Your orientation will apply to main images quiz-wide.
  • You can’t mix/match different ratios in a quiz.
  • All quiz answer images must be wide (16:9) ratio.

Please note: once you select a format, all of the main answer images will be in that ratio… for example, you can’t mix/match wide with tall images.

This is on purpose – we didn’t want your quiz resizing every question to accommodate different image layouts.

Example images and dimensions – by orientation

Let’s take a look at an example question and the right image sizes.

Wide:

Here’s our default ‘wide’ option – 16:9 main image and 16:9 answer images.

Square:

Next up? Our ‘square’ option – with 1:1 ratio images in the main question and title images, plus 16:9 for answer images.

Tall:

And here’s our ‘tall’ option – best for portrait-style pictures, with 9:16 ratio main question images, and 16:9 pictures in answers.

Our ‘Epic’ layout – a special case

Our Epic layout is a little different – we move each question’s main image to be the background. (Answer images are still 16:9, however.)

This means your quiz height might vary every question – based on how many answers options or how much text you have.

However – you can use our wide ratio as a good starting point.

Need to edit your image size?

We include a ‘crop’ tool – just click on ‘edit’ on any image.

Don’t worry if your file is bigger than that. We automatically compress all images by 80% – which works for most folks.

However, smaller images load faster for your quiz takers.

If you have some very large files, you might want to speed up your quiz loading times by reducing the overall pixel dimensions and file size.

For example, in our example, a 400KB file uploaded becomes a 50KB file – but a 10MB file would still be 2MB… which can result in slow load times for your quiz takers, especially on smartphones.

Animated GIF file sizes

GIFs are super popular – and great for engagement.

Figuring out the file size for an animated GIF’s file size is a little tricky. Don’t look at the file size in your computer.

Instead, a GIF’s size is the total resolution x the number of frames.

Our image provider has a 100MB limit for your GIF’s total file size.

With animated GIFs, file size really is <resolution> X <# of frames>.

So for example, a GIF of 1,000 pixels high x 800 pixels wide x 200 frames = 800,000 pixels x 200 frames = 160,000,000 bytes (160MB!).

  1. To avoid this issue, you want to make each frame as small as possible in Photoshop or whatever your designer used.
  2. 960×540 for our wide format is ideal.
  3. Second, you can reduce the # of frames per second – something like 5 or 6 per second is fine.
  4. Third, you can use a free tool like https://ezgif.com/optimize to reduce the file size by about 40%.

But they’re big files – and they’re slow to load, especially if you’re using several in a single riddle. (Unless you’re using our new lazy loading option – which also speeds things up.)

The good news?

Now, all animated GIFs you upload (or use from Giphy) will automatically be converted to MP4 videos (max file size: 7MB).

No loss of quality, and a much faster experience, especially for mobile users on slower connections. Huzzah!