Follow these sizing guidelines to ensure that images display correctly in different parts of your Hub.
About Recommended Image Sizes
There are many different places in your Hub where images are displayed. In this article, we'll look at the optimal image dimensions for all of these different kinds of images, so that you can create and upload them in the correct size.
General Image Guidelines
- Image formats: PNG (recommended), GIF, JPG
- Maximum File Size: 1.5 MB
Hub Appearance Elements
These images are part of the general appearance of your Hub.
- Hero Logo: 550px x 350px
- Homepage Background Image: 1920px x 873 px
- Banner Logo: 300px x 100px
- Favicon: 200px x 200px
- Hub Thumbnail: 1080px x 600px
- Author Images: 120px x 120px
Stream Item Images
These images appear as part of your Hub content.
- Thumbnails (Blog Item & Video Tiles): 500px x 272px
- Thumbnails (Flipbook Item Tiles): 500px x 580px
- The title and description will cover 140px at the bottom of the thumbnail
- CTA Background Image: 330px x 250px
- Blog Image (Header In Article): 840px x 400px
- Height can be whatever you prefer, but the width is set based on the width of the article (ca. 840px)
Stream Banner Images
These images are used as banners at the top of Marketing & Sales Streams when the Banner+Logo option is set (under Stream Settings > Appearance).
- Stream Banner Image: 1920px x 640px
Notes & Best Practices for Stream Banner Images
Stream banners dynamically resize to adjust to different screen sizes and devices, using the background-size: cover CSS property. This means that they will be stretched or trimmed to fit the width of the screen (if needed). Regardless of whether they are stretched or trimmed, they will always be centered:
As a result, the recommended size above is a general starting point, and not all of the image will be visible on all devices. For best appearance across devices, follow these guidelines:
- Keep your stream banner images at a ratio of ca. 3:1.
- If you incorporate logos or key graphics in your banner image, make sure they are centered and no more than 50% of the image's height and 30% of the image's width.
- If you intend to use a logo in your banner, we suggest leveraging the Banner+Logo logo image option, and applying a more abstract background image (such as a pattern).