Treefort supports numerous ways for you to add custom imagery to your app - as content artwork, page banners, brand graphics, etc. This guide will help you understand how images work across the platform so that you can prepare appropriate assets.
Formats
You can upload jpeg or png images. Transparent pngs are allowed.
Resolution
You can upload images up to 5760px by 5760px. We will automatically scale your images down to the optimum size based on where the image is used in your app and the resolution of the device on which the image is displayed.
Optimization
You do not need to optimize images before uploading them. We automatically optimize, compress, and convert your images to the best format(s) for fast delivery to your users.
Text in images
Except for content artwork (e.g. a book cover or a movie poster), avoid including text in your images if possible. Including text in your images can result in a poor user experience as the text size can't be adjusted and the text may be cropped or conflict with other elements on the screen.
Cropping
Depending on where your image is displayed in your app it may be cropped.
Slider modules and collection pages
Images displayed in a slider module or on a collection page are scaled to fill the shape that you choose. This may result in the edges of the image being cropped.
Square: Scaled to fill a square with a 1:1 aspect ratio
Circle: Scaled to fill a circle with a 1:1 aspect
Wide: Scaled to fill a wide rectangle with a 7:4 aspect ratio
Tall: Scaled to fill a tall rectangle with a 7:10 aspect ratio
Banner modules
Images displayed in a banner module may be cropped based on the banner size that you choose and the width of the device on which the banner is displayed.
Small/medium/large
These banner sizes determine the relative height of the banner compared to the overall height of screen. A small banner will take up a narrower stripe of the screen while a large banner will take up much more of the screen. When using these sizes, banner images will be scaled to fill the entire space occupied by the banner. This may result in cropping of the horizontal edges of the images in the banner. On mobile screens this cropping can be quite severe, while on desktop it is usually less pronounced.
For best results across all screen sizes we recommend that you:
Provide as wide an image as possible (aspect ratio 2:1 or 3:1) and keep the area of interest in the center of the image. This will reduce the chances of key elements of the image being cropped on mobile, tablet, or desktop.
Use the device switcher in the App preview to see how your image will look at various screen sizes.
Fit to screen width
This banner size avoids the cropping of images by scaling them down to fit the width of the screen. When using this banner size, the height of the banner will adjust dynamically to the height of the tallest image in the banner.
Content artwork
When practical we display content artwork uncropped in its original aspect ratio. There are a few exceptions to this:
When included in a slider module or collection page a content item’s artwork will be cropped according to the display settings of the module or page (see “Slider modules and collection pages” above).
Video thumbnails on the video series page are cropped to fill a wide rectangle with a 7:4 aspect ratio.
When included in a recommendation slider on a content page, a content item’s artwork may be cropped to fit a square, a tall rectangle with a 7:10 aspect ratio, or wide rectangle with a 7:4 aspect ratio.
👉️ We understand that content artwork cropping is undesirable in almost every situation and are planning to remove these restrictions.