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 wide x 350px high
- Homepage Background Image: 1920px wide x 873 px high
- Banner Logo: 300px wide x 100px high
- Favicon: 200px wide x 200px high
- Hub Thumbnail: 1080px wide x 600px high
- Author Images: 120px wide x 120px high
Stream Item Images
These images appear as part of your Hub content.
- Thumbnails (Blog Item & Video Tiles): 500px wide x 272px high
- Thumbnails (Flipbook Item Tiles): 500px wide x 580px high
- The title and description will cover 140px at the bottom of the thumbnail
- CTA Background Image: 250px wide x 330px high
- Blog Image (Header In Article): 840px wide x 400px high
- 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 wide x 640px high
Notes & Best Practices
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).
Tile Thumbnails & CTA Background Images
Similar to Stream banners, Hub Item Tiles are responsive, and resize automatically to fit different screen sizes. By default, standard Tiles are 250 px wide by 330 px high, an aspect ratio of 1.32:1. There are two situations in which Tiles can be a non-standard size:
- Highlighted Tiles: When using the "Highlight first Item" Hubs Lab feature, the first tile will be enlarged to approx. 4x standard size, 520 px wide by 680 px high
- Mobile devices: On mobile devices with an effective screen width of 560 px or less, Tiles are resized to 100% screen width (minus a margin either side, typically 20-30 px by default) by 370 px high
Because thumbnails for both standard and highlighted Tiles are similar aspect ratios (1.32:1 vs 1.31:1), the same image generally works well for both sizes:
However, for mobile devices, the aspect ratio is often different. For example, on an iPhone X with an effective screen width of 375 px, a Tile would be approx. 325 px wide (screen width minus margins) by 370 px high, an aspect ratio of 1.14:1. This means that mobile Tiles are often more square than standard Tiles:
This affects the way that Tile thumbnails and CTA background images are displayed. Because Tiles on mobile devices are often "shorter" relative to Tiles on desktop, the space available to display the image is as well. To avoid distorting the image to fit the new dimensions, the image is dynamically trimmed to fit the available space. To do this, the image is centered and trimmed from the bottom, like this:
CTA Background Image
As a result, we recommend the following for best appearance across devices:
- When designing images to be used as Tile thumbnails or CTA backgrounds, avoid placing important elements (such as text) within the lower 15-20% of the image.
- If you use logos or key graphics in the image, make sure they are centered and in the top 50% of the image.