How to Optimize Image Appearance in the Firstup Platform

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)?

General Recommendation - Two to One

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

Why 2:1? If you love details, we're happy to explain. Our web and mobile experience will display an original 2:1 cover image in ratios ranging from 4:3 to 3:2 to 2:1, depending on exactly where the post appears. For example, on the web's landing page the Featured section has a really big "highlighted" post displayed in a 4:3 ratio while the smaller, older featured images below that are 3:2. If your user navigates to a topic view, the image is now displayed with a ratio of 2:1. As you cannot control exactly where the image will appear on the landing page (this is determined by how recently it was published and which section of the landing page it belongs in), the main takeaway we want you to remember is that a 2:1 image ratio will have the most consistent appearance across the web and mobile app.

Content in Amplifiers & Emails

One possible exception to our 2:1 recommendation is if your content will primarily be consumed through a Microapp or email. With emails you have control over the template and can, if you choose, control the exact order of the content. With Microapps you have control over the templates.

For example, with email, the Branded Banner template has a ratio for the top image of 9:5 and for the lower images 4:3. However, the Grid template uses 3:2 for all images. You can check the exact ratios of your email template by sending a test email to yourself, then inspect the image.

For Microapps, templates like Standard use a ratio of 2:1 while Mini Cards uses 1:1. You can check the exact ratio in Studio by inspecting the image in the template 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 Microapps, then we recommend choosing templates for emails and Microapps that tend towards the 2:1 or 3:2 ratio. Then, you can use an image of 2:1 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 group 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 in most Microapps (this won't work with Microapps that do not display your targeted topic).

1. Create a group of yourself and any other "testers" that should be able to see this test content.
   1. Open the Groups page by clicking the stack icon in the upper left corner and navigating to Manage → Groups.
   2. From the Groups page, select Create Group in the top right. The new group has no name and automatically includes a filter for 'Not Blocked' users.
   3. Remove the 'Not Blocked' filter.
   4. Select the User > Email criteria on the left. Select this criteria multiple times if you are going to specify multiple users.
   5. On the right, enter the emails of the test users (it can be just yourself).
   6. Click into the Unnamed Group field to name your group. For example, "Angela's Test Group".
   7. Type a description for the group. You can use this field to communicate with other studio users about your group - what is the group, why it exists, who created it, etc.
   8. Optional: add tags. Use numbers and letters, and separate multiple tags with a comma. Consider using "testing content" or your name.
   9. After the group has been named, click Save Group.
2. Create a test topic.
   1. Switch to the Topics page by selecting the menu in the top left of Studio and navigate to Publish > Topics.
   2. To create a new topic, select Create Topic in the top right.
   3. Under Target Topics to a Group(s), start typing the name of the test group and select a group from the results list.
   4. We recommend that you do NOT make this topic Hidden. 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.