Banner Images: Sizing and Display Settings
Your banner image is the most dynamic element in your reel. It resizes based on the viewer’s browser width, which means it’ll look different on a wide desktop monitor than on a phone. This guide covers how to size your image file and use the display settings to make your banner look great everywhere.
Banner Image File Recommendations
Before uploading, make sure your image file is sized appropriately:
Recommended width: At least 2400px (for full-width display on large desktop monitors)
Minimum recommended width: 1100px (otherwise, your banner may appear narrower than the rest of your reel content on wider screens)
Tip: If your image is narrower than the reel content area, it won't stretch edge-to-edge on larger screens. When in doubt, go wider.
Understanding the Display Settings
Once you’ve uploaded your banner image, you can fine-tune how it displays using these controls.
Image Fit Mode
- Contain (fit inside): The entire image remains visible, but you may see empty space on the sides. Best for logos or graphics where nothing should be cropped. This is the default fit mode.
- Cover (crop to fill): The image fills the entire banner area, cropping as needed to fit. Best for photos and artistic images where some cropping is acceptable.
Image Position: When using Cover mode, this determines which part of your image stays anchored when cropping occurs. For example, if your headshot is on the right side of the image, set the position to “Right” or “Bottom Right” so your face stays visible when the banner crops on narrower screens.
Min Height: Sets a floor for how short the banner can become. Without this, banners can get uncomfortably thin on mobile devices. A value of at least 200–250px generally keeps your banner looking good on small screens.
Max Height: Caps how tall the banner can grow on large screens. Useful if you want to prevent your banner from dominating the top of the reel on wide monitors.
Tips for Common Scenarios
Banners with portrait photos or headshots. Use Cover mode and set Image Position to match where your subject appears in the frame. This keeps faces visible even when the image is cropped on mobile.
Banners with text overlays. Position your text on the same side as your Image Position setting. That way, both your text and the focal point of your image stay anchored together as the banner resizes.
Banners with wide logos or graphics where cropping isn’t acceptable. Use Contain mode to ensure the full image is always visible, or upload an image with extra “bleed” space around the edges so cropping doesn’t cut into anything important when using Cover mode.
Preview and Test
After adjusting your settings, preview your draft and resize your browser window from wide to narrow. Shrink it down to phone width to make sure nothing important gets cropped, and your banner still has visual presence.