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

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:

How_to_Optimize_Your_Banner_Images_for_Stream_Templates.png

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 tall, 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 tall
  • 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 tall

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 tall, 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.
2 out of 2 found this helpful

Comments

0 comments

Please sign in to leave a comment.