Image Requirements and Recommendations

Introduction

Images make an important part of any Product Finder, not only beautifying them but helping you to convey the right message to the customers. Which makes it even more important for you to select the right kind of image.  

You can add images to the questions and answers of your Product Finder. 

Product Finder 360 Product Finders are highly adjustable and can be used on both desktop and mobile devices. The images will be resized, subject to the number of images per page and resolution of the device, however, there are some best practices.

1. Supported Image Size and Formats

The images must be of one of the following formats:

  • .jpg

  • .png

  • .svg

  • .gif

While the library supports the files of up to 2MB, it is recommended to use the images of up to 100Kb to make sure that the Product Finder is responsive and smooth.

First of all, you need to know that our default themes come with square or rectangular image areas. Whether you are using the default or custom themes, Product Finder 360 will always resize the image to fit the number of images and screen resolution.

If you're using a theme with square images, it's recommended to stick to square images. It's also recommended not to use rectangular answer images if you are going to have over three images per row.

When resizing, Product Finder 360 considers the initial resolution of your image. So, if it is too short, it will not fully fill the question box, therefore it Is important to make sure that the image space is fully covered.

For answers, in most cases, it's enough to keep the longer size of your image above 500px, and the recommended value is 700px.  

For questions, the recommended value is 1420px.

 Rule of Thumb

Whether you are using the default or custom themes, Product Finder 360 will always resize the image to fit the number of images and screen resolution. Therefore the main part of the image has to be in the center of the image, leaving about 15% padding on the sides where no crucial info is placed (so that it is not lost if the bottom/top or right/left part is cropped, the object is still visible).