When using Stream Templates, you have the option to upload your own custom banner image. This is a great customization feature that allows you to personalize any Stream. To best utilize this feature, there are some guidelines you will want to follow.
In this article, we’ll discuss some best practices for optimizing your banner images for Stream Templates.
Image Requirements:
- Images should be no larger than 1.5MB
- Images should be a minimum height of 500px and width of 1500px
Cropping Your Image
When you upload your image, you have the option to crop it to meet your requirements. This allows you to upload a large or awkwardly sized image and adjust it to better fit the banner area.
Optimizing Your Image For Varying Screens
Choosing the right size and aspect ratio for your images can be tricky when you consider how many different devices and screen sizes exist across your audience. It’s important to understand how we handle your images so you can optimize them for your Streams.
Background-size: Cover
This is the CSS class that is applied to all banner images by default. Don’t speak CSS? Don’t worry. This simply means that your image will always cover the entire container, even if it needs to be stretched or trimmed on either the sides or top and bottom.
Tall and thin images will be stretched to fit the full width of the screen and the top and bottom will be trimmed.
Short and wide images will be stretched to fit the full height and trimmed on the sides.
Regardless of how your images are trimmed to fit the banner size, they will always be centered.
Best Practices
Make sure your banner images play nicely with your Stream design by following these simple guidelines:
- Try to keep your images at a ratio of roughly 3:1
- If you incorporate logos or key graphics in your image, make sure they are centered and no more than 50% of the image's height and 30% of the image's width.
- When using logos in your banner, we suggest leveraging the template’s logo feature and applying a more abstract background image.
About the Author
More Content by Amanda Sherry