Recommended image sizes for your Hub

Follow

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. This article lists the optimal image dimensions for all of the various types of images, so that you can create and upload them in the appropriate size to display correctly.

 

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
  • 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 Tile Images

Images in this category are displayed as part of Item Tiles shown on Stream pages.

  • 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 200px 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. 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 (horizontal resolution) 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 centred:

    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.

 For best appearance across devices,  follow these guidelines:

  • Size your stream banner images so that they are 200 px tall, and wider than most screens on which they will be displayed. Currently, the majority of devices used to browse the web have screens that are narrower than 1920 px, including virtually all mobile devices, so we recommend this as a good option.
  • 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: 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:

Demand_Generation_Resources_in_Digital_Marketing___Uberflip.png

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:

Demand_Generation_Resources_in_Digital_Marketing___Uberflip.png

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:

Tile Thumbnail

Three_Ways_to_Use_Content_Experiences_to_Fuel_Your_Demand_Generation_Campaigns___Uberflip.png

CTA Background Image

aHViPTIxOCZjbWQ9Y3RhX2JhY2tncm91bmQmY3RhX2lkPTIzMTY4MiZtb2RpZmllZD0yMDE5LTA2LTEyIDE0OjI3OjQ2JnNpZz01NWNhZDFjYTBhNjUwYjZhYWQ3NTU1YjEzNzk5ZWRlZA_3D_3D___500_660_.png

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.
3 out of 3 found this helpful

Comments

0 comments

Please sign in to leave a comment.