Image guidelines for your Hub

Follow

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.

Hero logo

550px wide x 350px high

Add_a_subheading_1.png

Homepage background image

1920px wide x 873 px high

Add_a_subheading.png

Banner logo

300px wide x 100px high

3.png

Favicon

200px wide x 200px high


Note: The favicon is also sometimes used in Stream banners. See Stream banner and share embeds section.

33.png

Author images

120px wide x 120px high

Master_Personalized_Marketing_With_the_Help_of_Uberflip_and_Bombora.png

 

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

Screen_Shot_2022-03-14_at_2.07.13_PM.png

Flipbook Item tile thumbnails:

500px wide x 580px high

Note: The title and description will cover 140px at the bottom of the thumbnail

Screen_Shot_2022-03-14_at_2.05.31_PM.png

CTA Background Image:

250px wide x 330px high

Screen_Shot_2022-03-14_at_1.17.44_PM.png

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)

Screen_Shot_2022-03-14_at_1.59.24_PM.png

 

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:

1920px wide x 200px high

re.png

Favicon:

200px wide x 200px high

Serving double-duty as your logo icon for Banner+Logo Stream banners created in Uberflip

fdsa.png

Hub thumbnail:

1080px wide x 600px high

Used in Streams embeds created using an Uberflip app [Ex. Sales Assist]

gtres.png

 

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:
    How_to_Optimize_Your_Banner_Images_for_Stream_Templates.png

  • 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.

 

6 out of 6 found this helpful

Comments

0 comments

Please sign in to leave a comment.