Images and Their Specifications

In this topic, you will learn of the images required for your Brightcove Beacon Experience. Also detailed are the required image sizes, aspect ratios, etc.

Introduction

For you Brightcove Beacon apps there are five video images that can be used. You can find the image information when you click on a video and then from the details page click the Images link. You will see the following, but of course using your images:

all images in studio

There are hundreds of permutations of where the different images can be used. This is because there are:

  • Multiple platforms: Web, mobile, tablet, smart TV
  • Multiple entities: Movies, series, seasons, episode, playlists, etc., each which have images associated with them.
  • Multiple screens: Movie details, VOD player, favorites, recently watched, etc.
  • Multiple layouts for each screen: For example, there are four movie detail layouts
  • Different image ratios needed for different layouts: For example, a featured, wide banner carousel uses a different image ratio than a normal carousel.

All those factors influence the image used, hence leading to the multitude of options where a specific image could be used.

The following provides a small insight on how images are used by showing four examples from a web app.

  1. The Video Cloud Poster (2:3) used in Movie Details Layout I
    details i
  2. A cropped version of the Beacon Poster used in Movie Layout F
    details f
  3. The Video Cloud Poster (16:9) used in a episodes list
    thumbnail
  4. The Beacon Ultrawide used in a featured, wide banner carousel.
    wide banner
    Note that this is the only time the Beacon Ultrawide image is used.
  5. In the details I layout, both portrait and landscape images have a fade effect present on the bottom and left side of the image. The following diagram shows how to avoid getting text hidden or cut under the fade effect.

    Portrait

    poster

    Landscape

    landscape

Video images

Following are details about each of the images, grouped by Video Cloud images then Beacon images:

Video Cloud images

  • Video Cloud Poster
    • Created automatically by Beacon Studio
    • Use JPG or PNG
    • Minimum 640px wide
    • Aspect ratio should match video, generally 16:9 or 4:3
  • Video Cloud Thumbnail:
    • Created automatically by Beacon Studio
    • Use JPG or PNG
    • Minimum 160px wide
    • Aspect ratio should match video, generally 16:9 or 4:3

Beacon images

The following are specifications for the Beacon video images:

Note: Images may be JPG for PNG

Image Requirements
Beacon Landscape Landscape image (16:9):
Minimum Width: 1000px Height: 563px
Maximum Width: 4000px Height: 2250px
Beacon Portrait Poster image (2:3)
Minimum Width: 1000px Height: 1500px
Maximum Width: 2000px Height: 3000px
Beacon Ultrawide Landscape image (21:9):
Minimum Width: 1000px Height: 428px
Maximum Width: 4000px Height: 1714px

Series and season images

When creating a series or season you will see that three images are required:

series season images

These images follow the same specifications as the Beacon video images:

Image Requirements
Landscape Landscape image (16:9):
Minimum Width: 1000px Height: 563px
Maximum Width: 4000px Height: 2250px
Portrait Poster image (2:3)
Minimum Width: 1000px Height: 1500px
Maximum Width: 2000px Height: 3000px
Ultrawide Landscape image (21:9):
Minimum Width: 1000px Height: 428px
Maximum Width: 4000px Height: 1714px

Here is the Landscape image used in a carousel:

series thumbnail

Hero image

If you are using a hero image in your page layout, it must meet these specifications:

Specification Value
Format .jpg
Aspect Ratio 16:9
Maximum Size Width: 4000px x Height: 2250px
Minimum Size Width: 2000px x Height: 1125px

You will need to supply your corporate logo for use in the Brightcove Beacon Experience. Follow these guidelines for the image:

Specification Value
Format .png
Aspect Ratio 1:1
Size 1500px x 1500px

Working in Beacon Classic

When entering information in Beacon Classic, you will be asked for Non-Textual Data. This means images for the assets you are currently creating. These images can be broken down into three groups, those being:

Live Events

For live events a page will appear similar to the following (without the red OPTIONAL text over the Thumbnail and Wide Banner, for which you do not need to supply images):

studio images UI

When you encounter this screen, supply a JPEG image for the Portrait Poster and Landscape Poster matching the requirements below. You DO NOT need to supply images for Thumbnail and Wide banner. If not provided, the Thumbnail image will be generated from the Portrait Poster and the Wide banner from the Landscape Poster.

Image Requirements
Portrait Poster Poster image (2:3)
Minimum Width: 1000px Height: 1500px
Maximum Width: 2000px Height: 3000px
Landscape Poster Landscape image (16:9):
Minimum Width: 1000px Height: 563px
Maximum Width: 4000px Height: 2250px

Channel logos

Channel logo images are composed of a thumbnail background and an image (with or without transparency), both with a 16:9 aspect ratio. The following diagram shows how channel logos are created:

channel logo creation

This is the Non-Textual Data form you will see for when creating a new channel:

channel logo creation

The size requirements are detailed in the table.

Image Requirements
Channel logo images Landscape image (16:9):
Required Size Width: 1000px Height: 563px