Image Size Guidelines

Images are a key part of creating boards and can be added in several areas of the board.

Folloze supports the following file formats: png, jpg, jpeg, gif, svg, svg+xml, ico, x-icon, webp 

File types should be written in lower case letters.  

Sizing requirements and recommendations vary for each type of image. To ensure images display properly on your boards, follow the image sizing guidelines for each type of image.    

Note: In general, we recommend using svg image files because they have the best quality and are the most responsive to the screen. In the Image Library, you cannot crop svg files but you can color them in tint.  

Logos

It is recommended you use SVG format for logo images, as SVG files are not optimized in the same way as other image files, so even if the logo you upload is small in size, you will not lose quality.

In most cases, you will not need to crop or edit the logos. If you need to crop the logo image, use a png file. If you are not using a svg file, make sure to edit and crop the logo in the Image Studio. Crop the logo as much as possible to remove any white padding. 

It’s easy to think that because your logo is a tiny feature on the screen, that the image can also be small.

But it’s important to create the file in a much larger size than the screen seems to require. This allows Folloze to shrink or enlarge it as needed on different screen sizes.

Generally, logos will be 300 to 600 pixels in size.

S = 40px   L = 50px height 

Banner & Background 

Folloze has a 25MB limit on file sizes 

A banner image is the large header image that you commonly see at the very top of a board. It fills the whole width of the screen, even on a desktop browser, and also displays a text overlay and an action button. The banner is designed to be the first thing people see when they visit your board, so you want it to be eye-catching and high quality.

For that reason, aim to make a banner image 2500 x 2000 pixels and keep the file size under 1000KB.

Section padding:

S- 10 

M - 40

L - 80

Mobile 

Image width 768px

Image height 1500±px

Columns and carousel 

For icons, we recommend using circles or squares because they look better on screen. Rectangles can cut the image and do not display nicely.   

Rectangle            S = 96*40 px     M =190*110 px     L = 300*200 px

Circle/Square      S = 40*40  px    M =110*110 px     L = 300*300 px

Text and Image 

Image            S = 540*393 px       M =612*445 px     L = 721*523 px

Item Thumbnail 

Recommended image size is a ratio of 1.488 :1 and not smaller than 736*494.6 px. 

Do my images need to have exact dimensions?

Understanding the different image sizes for Folloze is a good idea to help you make better images. But you don’t need to have exact dimensions for many of the images you’ll use.

That’s because the system automatically resizes where needed, depending on the device a person uses. 

So if you get into good practices but they turn out to be a little different in size from these recommendations, don’t worry about it. Let Folloze handle some of the work for you!

Biggest is not always the best

Uploading the biggest resolution for your site guarantees that your site's images are high resolution for your customers. However, keep in mind that large images also have a drastic effect on your page speed. Since high-resolution images are scaled down, users do not normally notice the difference in resolution. It is better to upload images in the size they are intended to be used. For example, if you have a picture that is 300px by 300px on your site, you do not want to upload it as a 4000px by 4000px image.