How to Upload and Optimize Background Banner Images
Last updated
Was this helpful?
Last updated
Was this helpful?
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.
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.
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.
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.
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.
Pattern images are ideal because they:
Ensure a uniform appearance across devices.
Reduce file size, improving app performance.
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 support-sbc-ta@bsscommerce.com for further assistance.
