Refer to this article for additional recommended content specifications for images, GIFs, and videos.

One of the greatest powers of the Firstup platform is publish once, reach everywhere - mobile, web, intranets, digital signage, email, and more!

With reach everywhere publishing, a single cover image needs to look good on very different devices. Mobile phones, web browsers, digital signs, email templates, embedded microapps, can have dramatically different sized spaces to display images. We know that the way content appears reflects on you as a communicator. To help you look your best, we leverage smart image cropping for cover images to keep images centered on the focal point - such as a face. 

Original Image

Viewing Article Preview in Web Experience - Smart Cropping Shows Faces

Note, when you open a piece of content, nothing is cropped in the opened view.

Viewing Full Article in Web Experience - No Cropping of Cover Image or Images in Body

However, we know that you sometimes have that one piece of content that needs to look a specific way - maybe it's a picture of your CEO, maybe it's your brand logo, or maybe it's important "just because". In that case, what can you do to control the end result (as much as possible)?

Cover Image - 16:9

If your users are on the web or mobile app experience, then we strongly recommend that a cover image ratio is 16:9, at least 1920 pixels wide and 1080 pixels tall. Keep any key imagery (faces, text) within the central 2/3 of the image.

The cover image defaults to the first image in the canvas of your campaign, but you can choose from any of the images in your campaign or even upload a separate image.

Why 16:9? Our most recent web and mobile experience displays images in 16:9 ratio. If you are on an older version of our software, the displayed ratio ranges from 4:3 to 3:2 to 2:1, depending on exactly where the post appears. In all cases, we recommend 16:9 cover images.

General Recommendations

Within the body of the campaign, i.e., on the canvas - if the image is half the width of the canvas, aim for at least 400 pixels wide.

If the image is the full width of the canvas, aim for at least 800 pixels wide. The height can be anything.

Image Cropping

Another way to optimize the appearance of images in your campaign is with image cropping. When creating/editing a campaign, the image cropping option is located on the Design tab on the right-hand panel menu.

There are 5 image cropping options: No cropping, Landscape (2:1), Portrait (3:4), Square (1:1), and Wide (3:1). The default is 'No cropping', so if you aren't pleased with the appearance of your image, play around with the different cropping options to see if there is one that suits your image better. Note that utilizing the 'No cropping' option means that we will not leverage smart image cropping on the image in the campaign body.

One thing to keep in mind is how your image will appear in each channel. You may like the way a cropped image appears on the Design page, but when previewing your campaign, you may decide you're not pleased with how it renders in one or more channels. For example, this image looks fine cropped as a Square (1:1) on the Design page, but when previewed in the email channel, the bottom of their legs are cut off.

Design page - Square (1:1)

Preview - Square (1:1)

 

For this image, the default 'No cropping' option is the best option since the image renders completely in each channel.

Design page - No cropping

Preview - No cropping
 

Content in Microapps

One possible exception to our 16:9 recommendation is if your content will primarily be consumed through a microapp. For microapps, templates like News use a ratio of 2:1 while Banner uses 5:2. You can check the exact ratio in Creator Studio by inspecting the image in the preview.

If you know that your content will mostly appear in only one endpoint, you can check that endpoint's ratios and use an image with a similar ratio.

However, if your users will consume the content through multiple endpoints including web, mobile, emails, and/or multiple microapp templates, then we recommend choosing templates for emails and microapps that tend towards the 16:9 ratio. Then, you can use an image of 16:9 that works across all end-points.

Test Topic(s)

A golden practice when things need to look just right is to actually publish the content and check it out.

You can create a test topic targeted to just yourself (or a select audience of communicators) and publish content to this topic for a "test run". You can use this to test how things appear in the web or mobile app, in emails, or most microapps (this won't work with microapps that do not display your targeted topic).

1. Create an audience of yourself and any other "testers" that should be able to see this test content.
   1. Open the Audiences page by clicking on People on the main menu to the left.
   2. From the Audiences page, select + Audience in the top right. The new audience has no name and automatically excludes Deactivated users.
   3. Click in the attribute box and select Email. 
   4. On the right, enter or select the emails of the test users (it can be just yourself).
   5. Click into the Untitled Audience field to name your audience. For example, "Angela's Test Audience".
   6. Type a description for the audience. You can use this field to communicate with other Creator Studio users about your audience - what is the audience, why it exists, who created it, etc.
   7. Optional: add tags. Use numbers and letters, and separate multiple tags with a comma. Consider using "testing content" or your name.
   8. After the audience has been named, click Save.
2. Create a test topic.
   1. Switch to the Topics page by clicking on Configure on the main menu to the left, then click on the Topics tile.
   2. To create a new topic, select + Topic in the top right.
   3. Under Target > Audience, start typing the name of the test audience and select your audience from the results list.
   4. We recommend that you DO check "show in Experience". The targeting will assure that only your testers can see this topic, and we do not want the properties of a hidden topic to impact your testing.
   5. Select Save to apply changes.
3. Publish content to your test topic.
4. View the content in the web or mobile experience.
5. Edit an email template or microapp to pull in content from your test topic and see how it looks. With emails, you can even use Send Test Email to see the results in your email client.