How to Upload and Optimize Background Banner Images

When customizing your app’s background banner, it’s important to choose the right image to ensure it looks great on all devices. Below is a step-by-step guide with visuals to help you understand how to upload and optimize your images effectively.

1. Recommended Image Type

We recommend using a small square pattern image (e.g., 100x100 pixels) with repeatable patterns. This ensures consistent display across different screen sizes and keeps the file size under 4MB, which is the upload limit.

Accepted file formats: Only .jpg, .jpeg, .png, or .gif files are supported.

A small square pattern image that repeats seamlessly.

2. How Your Image Will Appear

Depending on the size of your uploaded image, the system will handle it differently:

  • If the image is smaller than the banner: It will automatically repeat (tile) to fill the space.

    Smaller images will repeat to fill the banner area.

  • If the image is larger than the banner: The system will crop it starting from the top-left corner. The visible portion may vary depending on the user’s device screen size.

Larger images will be cropped from the top-left.

3. Tips for Optimizing Larger Images

If you prefer to use a larger image, follow these tips:

  • Resize beforehand: Ensure the height is approximately 58px for optimal fit.

  • Crop important content: Center key elements before uploading to prevent unwanted cropping.

Cropping out important content prevents cropping issues

4. Why Use Pattern Images?

Pattern images are ideal because they:

  • Ensure a uniform appearance across devices.

  • Reduce file size, improving app performance.

Pattern images maintain consistency on all screen sizes.

FAQs

Here are answers to common questions about background banner uploads:

  • What happens if my image is smaller or larger than the banner? Smaller images will repeat (tile), while larger images will be cropped from the top-left corner.

  • Why should I use a pattern image? Pattern images ensure a consistent look across devices and reduce file size for better performance.

  • What if my uploaded image doesn’t look right? Adjust the dimensions, crop the image before re-uploading. Refer to the examples above for guidance.

By following these guidelines and referring to the visual examples, you can create a visually appealing and professional-looking background banner that works seamlessly on all devices!

If you have any related questions, please contact us via Live chat or [email protected] for further assistance.

PreviousWhat’s the difference between Countdown Timer and Schedule Time?NextHow to Setup Conditions for a Banner?

Last updated

Was this helpful?