Overview

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

Table of contents

1. General Recommendations

1.1. Quizzes

1.2. Pop-ups

1.3. Facebook Messenger

2. Image formats

3. Best practices

3.1. Creating a pop-up for desktop and mobile

3.2. Content width

3.3. Loading states in your shop quiz


1. General Recommendations

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

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.

1.1. 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

One background image is currently used for both desktop and mobile quizzes.

Recommended size (px)

At least 2000 wide

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


1.2. 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


1.3. Facebook Messenger

Feature

Recommended size (px)

Image ratio

Main menu

600 x 300

2:1

In-bot products

600 x 300

2:1

Main menu images are uploaded directly in Octane AI, but products displayed in flows such as cart abandonment messages pull their product image from your Shopify store.

If your product images are more suited for a square display rather than a landscape one, contact our support team for help getting this change made.

Back to top.


2. 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.

Back to top.

3. Best practices

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.

3.1. 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.

3.2. Content width

In the shop quiz tool's global settings, you can change the max content width of your quiz under Layout.

By default, this is set at 1084px. If you use the body page embed setting for your shop quiz, you'll want to make the max content width match the content width of your Shopify store's theme to make sure layouts are consistent between the editor and your website.

For example, if your website's max content width is 800px, the setting here should also be 800px. Once that's set, the editor will do the rest of the heavy lifting.

3.3. Loading states in your shop quiz

Animated GIFs can be added to any quiz page as additional content. You can use additional content with questions, opt-ins, results or even in its own section using an explainer page.

By using this technique, you can create "loading states" in between your questions, or before your results - this adds a lot to your quiz's pace and vibe!

Here's a quick guide on how to turn an explainer page into a loading state.

1. Add an explainer page to your quiz.

2. On your new explainer page, set the page to advance after a set amount of time.

3. Under button settings, select the checkbox that will hide the "Continue" button.

4. Expand "Additional Content" and click "Add content". Choose the image option.

5. Upload the animated GIF you'd like to use. Wait until the file finishes uploading, then click "Add".

Max width can be used to make an image smaller. You can leave this blank if you'd like the image to be the maximum size possible.

Making content larger than the max content width isn't possible, so the image will automatically match the max content width in Layout settings if you enter a number too large.

6. Use text and any other additional content you'd like to add to customize the loading page.

Depending on how you'd like your quiz's vibe and pace to feel, you could add multiple loading states between questions, or you might only want a single one before your results.

If your quiz is on the longer side, you could have one introduce a particular set of questions in your quiz as well.

Back to top.


Have any questions? Email [email protected] or use the support icon to chat with our team.

Did this answer your question?