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/extensions should be written in lowercase letters. 

Quick Sizing Guide 

• Background images for sections on Desktop should be 640*1920 pixels.  
• Background images for sections on Mobile should be 780*1440 pixels. 
• For Banner background images on Desktop, see the following table of heights: 

Depends on desktop resolutions and amount of content
Height	Padding
		S-10	M-40	L-80
	S	330px	390px	470px
	M	470px	530px	610px
	L	620px	680px	760px

• For banner background images on Mobile, see the following table of Height + Padding. 

Depends on mobile resolutions and amount of content
Height	Padding
		S-10	M-40	L-80
	S	330px	390px	470px
	M	470px	530px	610px
	L	620px	680px	760px

For more details about sizing of specific sections, continue reading below to:  

• Design boards with images 
• Design Background images on Desktop 
• Design Banner Background images on Desktop 
• Design Background images on Mobile 
• Design Banner Background images on Mobile
• Design images in different sections  

_____________________________________________________________________________________

Designing boards with images

When designing your board with images, it’s important to consider that visitors will access it from a variety of devices. To ensure that your board looks its best on any type of device and screen size, Folloze implements fluid design principles on your boards.   

What is fluid design?  

Fluid design ensures that a board or website always looks similar in layout regardless of the device or screen size.

In fluid web design, the width of page elements are defined proportionally according to the width of the screen or browser window. 

Folloze boards are fluid, which means they expand or contract based on the width of the current screen size and device.  By implementing fluid design, your boards can reach a wider audience and deliver a consistent experience across different device types with varying screen sizes. 

It’s important to be aware that the height of the section changes according to the amount of content and/or the screen resolution, and therefore background images change accordingly.

In general, all the images on the board are proportionately enlarged or reduced in relation to the screen resolution, the background images change (are cropped) according to the screen’s height and width. Therefore in some cases, part of the image is clipped or hidden at certain resolutions. See below for more details. 

Our recommendations are based on statistics and best practices, considering that the section height is determined both by the amount of content and by different screen resolutions. 

______________________________________________________________________________

Background images on Desktop 

Before you begin, it is important to understand image cropping behavior for different resolutions.

Desktop refers to devices with screen widths between 1280-1920 pixels.  

What to expect when you use a 1920px wide image?  

The image below is a wide image (1920 pixels) that is intended for wide screens (1920 px). As you can see, the image below has not been cropped, indicated by the 3 pink bars visible on each side. 

 

 The following image is the same wide image displayed on a 1420 screen resolution. Note that the image is cropped on the sides and you cannot see the pink stripes and part of the woman.

 

What to expect when you use a 1440px wide image? 

The image below is a medium image (1440 pixels) intended for medium screens (1370-1440 px). The displayed image has not been cropped, indicated by the 3 pink bars on each side. 
 

 

The following image is the same medium image displayed in a 1920 pixel screen resolution. The image has been cropped on top and bottom, indicated by the 3 pink bars that are no longer visible on top and bottom.   

 

 

Recommendations for a desktop background image

 In general, the most common size for sections (excluding banners) is 640*1920 pixels and therefore the size of the background image should be this exact size.

•  If the background image contains important information at the top or bottom of the image, make sure to use the size indicated above.
• If the information on the sides of the image is important to you, it is best to use a background image of 640*1440 pixels.
• It is important to emphasize again, that the height of the section depends on the amount of content as well as the different resolutions used.  Therefore, the height will vary from section to section and from device to device. 
• It is not recommended to place a large number of background images, because this can affect the board’s loading speed. Best practice is to avoid placing more than 2-3 background images on a board. 
• We highly recommend using an image size between 500kb and 1000kb for optimal loading time. The  file size cannot be more than 25 mb.

________________________________________________________________________________

Tips for controlling the content on top of a background image

Tip 1

It is recommended to use the image positioning grid to keep part of the image static and that it should not be cut or disappear altogether.

 

Widescreen 1680 pixels

 

Narrow screen 785 pixels

In addition, you can change the position of the image on the section by using the grid layout.

To learn how to change image positioning, watch this short video. 

 

Tip 2:

It is recommended to use the cropping tool to change sizes, and consequently change how the background image displays. To learn how to use the cropping tool, watch this short video.

 

Tip 3: 

If you want to avoid a case in which the text goes over a figure or object like in the following image, 

you can use the Narrow mode for text.

________________________________________________________________________________

Banner background images on Desktop 

The banner is a special type of section because you can define a specific height for it.

Recommendations for a Desktop banner background image  

Our recommendations are according to the table below:

Our recommendations
Variable height + Padding (M)	The location of the important information on the image
		Top & Bottom	Right & Left
	S	1920*390	1440*390
	M (Most common)	1920*530	1440*530
	L	1920*680	1440*680

It is important to reemphasize that the section height depends on the amount of content, as well as the different resolutions used. 

See the table of heights below, take note that the height is a combination of the Height + Padding definitions.

Table of heights 

Depends on desktop resolutions and amount of content
Height	Padding
		S-10	M-40	L-80
	S	330px	390px	470px
	M	470px	530px	610px
	L	620px	680px	760px

It is important to remember that the above measurements represent the minimum height for the section. In case there is a large amount of content, for example a lot of text, a very long form or a narrow resolution, the height will increase beyond the defined height settings. 

 

 

_______________________________________________________________________________

Background images on Mobile  

We strongly recommend optimizing the background image for mobile mode by uploading a dedicated image for this mode.

To learn more about background images on Mobile devices, watch this video. 

Recommendations for a mobile background image

• It is important to be aware that the height of the section changes according to the amount of content and/or the screen resolution, therefore the background images change accordingly.
• In general, all of the images on the board are proportionately enlarged or reduced in relation to the screen resolution, the background images change (are cut) according to the resolution (screen height and width), and therefore in some cases part of the image will not be displayed in certain resolutions. 
• Because the height of the section is determined both by the amount of content and by the different resolutions, our recommendations are based on statistics and best practices. 
• In general, for sections the recommended size is 780*1440. The dimensions are double than the listed in the statistics above to support retina screens that have a high pixel density in order to create sharp images. 
• It is not recommended to place a large number of background images, as this can affect the loading speed of a board. Best practice is between 2-3 background images. 
• The weight of the image should be between 500kb -1000kb

_______________________________________________________________________________

Banner background images on Mobile  

The banner is a special type of section because you can define a specific height for it. 

See the table of heights below, take note that the height is a combination of the Height + Padding definitions. 

Depends on mobile resolutions and amount of content
Height	Padding
		S-10	M-40	L-80
	S	330px	390px	470px
	M	470px	530px	610px
	L	620px	680px	760px

_______________________________________________________________________________

Images in different sections 

Images can be added in several areas of the board. 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. 

Columns

For icons, we recommend using circles or squares. Rectangles can cut the icon image.    

Shape		Ratio	Minimum size
	Rectangle	3:2	750px*500px
	Circle/Square	1:1	750px*750px

*Preferably this exact size

Carousel 

For icons, we recommend using circles or squares. Rectangles can cut the icon image.    

Shape		Ratio	Minimum size
	Rectangle	3:2	750px*500px
	Circle/Square	1:1	750px*750px

*Preferably this exact size

Content sections 

You can edit the Content item thumbnail from the Content tab, not from the board designer.

• Content item thumbnail should be in a ratio of 1:1:5.
• Image size should be no smaller than 720px X 487px (preferably this exact size) and up to 25MB.
  • If image size is significantly larger than the above recommendation, the Folloze app will compress the image and it might look a bit blurry.

Text and Image 

Image width should be no smaller than 750px (preferably this exact width). There is no fixed ratio.

Image section

Image width should be no smaller than 880px (preferably this exact width). There is no fixed ratio.

Logos 

It is recommended to use SVG format for logo images because 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 should be 300 to 600 pixels in size.

S = 40px   L = 50px height