Images displayed in a banner module, a feature module, or as the background of a video series are presented “full bleed”, meaning that they are stretched from one edge of the screen to the other. Banner images can be very immersive, but they can also be a bit tricky to get right.
Text in banner images
Avoid including text in your banner images, if possible. Including text in your banner images can result in a poor user experience as the text may be cropped or conflict with other elements on the screen.
Cropping
Banner images 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 3:1 or greater**) 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.
👉 You can extend the edges of a tall or square image by using a tool like Photoshop or by using AI.
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.