There are many different places in your Hub where images are displayed. This article outlines the dimensions of the various types of images.
Using images that meet or exceed these size guidelines will ensure your Hub looks continually clean and professional.
Important
- These suggestions apply to unmodified Hubs only. Hubs using custom code to modify image elements may need to adjust image sizes based on your custom configuration.
General image requirements
In general, images you upload to a Hub must meet these requirements.
- Supported image formats: PNG (recommended), GIF, JPG
- Maximum file size: 1.5 MB
Hub appearance elements
These images are general design elements that are part of the appearance of your Hub.
|
550px wide x 350px high |
|
|
1920px wide x 873 px high |
|
|
300px wide x 100px high |
|
|
200px wide x 200px high Note: The favicon is also sometimes used in Stream banners. See Stream banner and share embeds section. |
|
|
120px wide x 120px high |
Stream Item images
Images in this category are displayed as part of Item Tiles shown on Stream pages, or in blog headers.
|
Blog Item & Video Tile thumbnails: 500px wide x 272px high |
|
|
Flipbook Item tile thumbnails: 500px wide x 580px high Note: 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 Note: Height can be whatever you prefer, but the width is set based on the width of the article (approx. 840px) |
|
Stream banner and share embeds
These images are used as banners at the top of Marketing & Sales Streams when the Banner+Logo option is set (under Stream Settings > Appearance), and in Stream Share embeds.
|
Stream Banner Image: Front end V2 Hubs: 1920px wide x 250px high Front end V1 Hubs: 1920px wide x 200px high |
|
|
200px wide x 200px high Serving double-duty as your logo icon for Banner+Logo Stream banners created in Uberflip |
|
|
Hub thumbnail: 1080px wide x 600px high Used in Streams embeds created using an Uberflip app [Ex. Sales Assist] |
Notes & best practices
Stream banner images
Stream banners dynamically resize to adjust to different screen sizes and devices. As a result, the recommended size above is a general starting point, and not all of the image will be visible on all devices.
Banners are always displayed as 200 px high, and are adjusted horizontally to fit the width of the screen as needed. Assuming the banner image is 200 px high, this works as follows:
- If the screen is narrower than the width of the banner image, the image will be cropped equally from the left and right sides to the width of the screen, while remaining centered:
- If the screen is wider than the width of the banner image, the image will be stretched to the width of the screen. To avoid distortion, the image will maintain the same aspect ratio, so it will look slightly "zoomed in" in these cases.
Stream banner best practices:
- Size your stream banner images so that they are 200 px tall, and wider than most screens (approx. 1920px) on which they will be displayed.
- If you incorporate logos or key graphics in your banner image, make sure they are centered and no more than 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: Mobile devices are handled differently depending on if your Hub uses Front end V1 or V2 (see how to know which Front End your Hub uses?)
Front End V1- 560px wide screens and under:
- Tiles maintain a fixed height of 370px, but adjust their width to that of the container
- The thumbnail image and title/description panel also maintain fixed heights as the width of the tile changes
- This means that the aspect ratio of the thumbnail image changes depending on viewport width, with the title/description panel of the tile cropping the thumbnail image from the bottom edge
- Because of this, images can be displayed as wide as 518.39x282 at a viewport width of 560px, but with only around 50% visible (effectively 518.39x152.06) due to the lower half being hidden by the title/description panel
- 561px screens and above: 250x136 image thumbnails
Front End V2- 420px wide screens and under: 250x136 image thumbnails
- 421px to 560px wide screens: 350x190.39 image thumbnails
- 561px wide screens and above: 250x136 tile images tiles, displayed in multiple columns depending on screen size
Tile Thumbnail and CTA background best practices:
- Because thumbnails for both standard and highlighted Tiles have similar aspect ratios (1.32:1 vs 1.31:1), the same image generally works well for both sizes.
- 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.