All Collections
Quizzes
Quiz Design
Formatting Image Content for Octane AI
Formatting Image Content for Octane AI

The ideal image sizes with different features across Octane AI

Mark Baek avatar
Written by Mark Baek
Updated over a week ago

This document can be used as guidelines when sizing images for use in Octane AI features.

πŸ’‘ What you'll learn


General recommendations for image sizing

These general recommendations can be used for most image content you upload in Octane AI.

Format / file size

Image size limit

Up to 25MB

Preferred image format

PNG, JPG, GIF

The maximum file size for attachments in Facebook Messenger is 25MB while the maximum resolution is 85 Megapixels.

If you're seeing issues with image load speed in any of your content such as quiz images, double check your image sizes to make sure they're web-friendly.

For image guidelines in specific features, check out the rest of the guide. All image ratios displayed below are in terms of width : height.

Image size recommendations for quizzes

Images are a content type you can add to your Octane AI quizzes. They can be included in any of your questions or results pages under the "Add content" menu.

We recommend optimizing images for display on the web to avoid any impacts on your quiz's loading speed.

πŸ“• Background image

Size / Aspect Ratio

Desktop

At least 2000 wide

Mobile

640 x 960

πŸ“• Side Images

Image ratio

Size / Aspect Ratio

Desktop

Any

At least 1000 wide

Mobile

Square / Circle

1:1

Mobile

Portrait / Landscape

2:3 / 3:2

πŸ“• Answers

Answer ratios are used for image choice sections, which allow you to display images in the answer to a multiple choice question.

Answer image ratio

Recommended size (px)

Aspect Ratio

Square / Circle

At least 500 x 500

1:1

Portrait / Landscape

At least 600 x 400

2:3 / 3:2

πŸ“• Products

Product content and information are pulled in straight from Shopify, including the product image.

Answer image ratio

Recommended size (px)

Image Ratio

Square

At least 500 x 500

1:1

Portrait / Landscape

At least 600 x 400

2:3 / 3:2

Image size recommendations for pop-ups

Images can be added to the welcome, exit intent and add-to-cart pop-ups. Each pop-up lets you use a main image and a background image, but the ratios can change for different layouts and devices.

Left aligned pop-ups include both the main image and the background image, but centered pop-ups will only display the background image.

πŸ“• Desktop

If you don't have a perfectly sized image available, our pop-up tool offers alignment options that let you customize how the image is cropped inside of your pop-up.

Layout

Recommended size (px)

Image Ratio

Left-aligned (main image)

300 x 500

3:5

Left-aligned (background)

500 x 300

5:3

Centered

450 x 1000

9:10

Left aligned:

Centered:

πŸ“• Mobile

Use the mobile icon in the pop-up editor to switch to a mobile preview of your pop-up. Background images are disabled by default for mobile pop-ups.

Use the "Disable image on mobile" checkbox under your background image to disable background images for mobile pop-ups.

We recommend using this option if your background image is optimized for desktop only. You can even try creating a different pop-up for different devices.

Layout

Recommended size (px)

Image Ratio

Left-aligned (main image)

300 x 500

3:5

Left-aligned (background)

500 x 300

5:3

Centered

450 x 1000

9:10

Image formats

Various image formats can be ideal for different purposes. However, a good rule of thumb is the smaller the file size, the more efficiently the image will be able to upload and display.

Here are a few common image types and when you might want to use them. While there are many other image file formats, the following tend to be the best to use for displaying images on the web.

JPG/JPEG

JPG images tend to be size-efficient and are great at compressing without a noticeable loss in color or quality.

If your concern is with file size and/or the image is a photo, JPG files can be the best choice.

PNG

The biggest advantage PNG files offer over JPG files is that they can have transparent backgrounds.

If you have a file with a transparent background, or for images types like logos, PNG can be the best choice.

GIF

Animated GIFs can be used in your shop quiz. You can use them to help your quiz's vibe or use an explainer page to display a loading state.

For details on how to do this, jump ahead here.

Best practices for image sizing

Octane AI offers a lot of customization when designing the visual aspects of your tools. Here are some powerful tricks to keep in mind when choosing how to use images with your bot.

πŸ“• Creating a pop-up for desktop and mobile

You can create multiple pop-ups for each of your pop-up opt-in tools. By using different placement settings for each pop-up, you can display a different pop-up on different devices or even specific pages.

This will make sure your pop-up images and designs never conflict.

Creating a new pop-up is simple - just click on "New pop-up" on the page of the specific widget.

You'll be able to make up to 3 separate pop-ups, each with their own designs, messaging and placement settings.

When customizing a pop-up, you can specify where it will appear in its placement settings.

Creating a separate pop-up for separate devices lets you use the right image ratios for each type, and make sure your pop-ups look great on any screen.

Did this answer your question?