Want to know what image sizes or image ratios you can use in Riddle?
Images are the rocket fuel for quizzes – the right pictures can turn a merely average quiz into a magnificently engaging one.
Riddle’s quiz maker gives you a range of image options, including Google, Pexels, Giphy, and plus uploading your own images or animated GIF. (You can also use videos like YouTube, Vimeo, or your own MP4 clips – or add MP3 audio files.)
Plus – you can edit/crop any image directly in our quiz creator.
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
Riddle 2.0 – choosing image sizes
- Creating a quiz with Riddle 2.0? Read on.
- Making a riddle with our original quiz maker (Riddle 1.0)? Please click here to jump down the page.
What image sizes can I use in 2.0?
We give you four options in Riddle 2.0:
- Wide (16:9 ratio – recommended)
- Square (1:1 ratio)
- Tall (9:16 ratio)
- Original image ratio
Let’s dive in and learn more about each of these image sizes:
- Wide: this is our recommended image size. Using the 16:9 image ratio, your images will be wider than tall – this ‘landscape’ orientation works best across all screen sizes (especially mobile).
- Square: using a 1:1 ratio, this is designed for images like Instagram photos – where the height and width are equal.
- Tall: this is the opposite of our wide option, with a 9:16 ratio. Your images will be tall – which will give you more space for fashion shots, book covers, and other images with a ‘portrait’ orientation.
- Original: choose this option if you want to use your images’ existing ratio (for example, Q1 might be 12:9 ratio, while Q2 and Q3 are 7:4).
Setting a default image size (Riddle 2.0)
Riddle 2.0 is much more flexible in terms of image sizes than our original online quiz maker.
You can set the default image size for all of your images in the design step.
This setting will automatically apply to any image you use in your riddle – from the cover to questions, answers, and results.
Changing any single image size (Riddle 2.0)
You have complete control over your image sizes at the individual block level.
Want a different ratio for a particular question?
Simply change the orientation to override the default settings for this one block.
Video: image sizes with Riddle 2.0 image
Our co-founder Mike created this quick video walkthrough of the different options:
You’ll see how you can customize the image sizes for your quiz, personality test, orAs poll/survey at the riddle-level, or at the individual question/answer block.
As a bonus, Mike also covers image cropping and how to add a color overlay using our image editor.
(What can we say? He gets excited talking about all things quiz-related.)
Riddle 1.0 – what size images work best?
Using our ‘Epic’ layout?
Every image (except answer choices) do not have a fixed size. Instead, we center the images as the background (title, questions, answer explanations, results) – they resize automatically for each question based on how much text or how many answer options you have.
Want to learn more about adding animated GIFs to your quiz? Click here to skip ahead to that section.
Riddle 1.0: Pick image sizes at the title screen
- Your orientation will apply to every main picture 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, every main answer image 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.
Riddle 1.0: Image dimensions – by orientation
Let’s take a look at an example question and the right image sizes.
Wide – 960×540
Here’s our default ‘wide’ option – 16:9 main image and 16:9 answer images.
Square – 720×720
Next up? Our ‘square’ option – with 1:1 ratio images in the main question and title images, plus 16:9 for answer images.
Tall – 540×960
And here’s our ‘tall’ option – best for portrait-style pictures, with 9:16 ratio main question images, and 16:9 pictures in answers.
Special case: our ‘Epic’ layout
Our Epic layout is a little different – we move each question’s main image to be the background. (Answer pictures 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.
Riddle 1.0: Need to edit your image?
We include a ‘crop’ tool – just click on ‘edit’ on any image.
(We’re also big fans of Canva’s image editor – free for most users, and you can quickly create images around a certain dimension.)
Don’t worry if your file is bigger than that.
We automatically compress all pictures by 80% – which works for most folks.
However, a smaller image will mean your quiz loads faster for your quiz takers.
If you have some very large files, you can 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
Animated GIFs are super popular – and great for engagement.
How big is a typical GIF file? That’s a common question – and figuring out the file size for an animated GIF’ 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!).
Average size of a GIF
We’re often asked – how big should a GIF be? There’s no standard GIF size or the right average size of a GIF – but here are some tips:
- To avoid this issue, you want to make each frame as small as possible in Photoshop or whatever your designer used.
- 960×540 for our wide format is ideal.
- Second, you can reduce the # of frames per second – something like 5 or 6 per second is fine.
- Third, you can use a free tool like https://ezgif.com/optimize to reduce the file size by about 40%.
But your .GIF size can be a big files – and they’re a bit slower slow to load, especially if you’re using several in a single riddle quiz. (Unless you’re using our new lazy loading option – which cleverly loads ‘just in time’ vs. loading all of your quiz images at once.)
Quiz GIFs auto-converted to video – for faster loading
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!
Any questions about image sizes or animated GIFs in quizzes?
Ask away – we’re happy to help answer any questions about image ratios or animated GIFs.
We’re often asked about GIFs in particular – such as the average .GIF size or what’s the best .GIF file size in your quiz.
And we’re fast – use our support chat, and you’ll see our entire team from our CEO Boris on down drop everything to answer you quickly!