Skip to Main Content

Falcon Online for Faculty

Introduction

If you’re designing with Creator+, you should be using images to elevate your content. Not only will images increase visual appeal, but they’re often fundamental for learning to occur.

To truly get the most out of images in Creator+, we need to understand how images will display in Elements and Practices. So, we’ve collected some best practices and size considerations to help you understand the best way to use images in Creator+.

In this guide, we’ll give a quick overview of image sizes and suggest some dimensions to use in individual Creator+ features.

Image Size

It is a good idea to know the size of an image before you embed it into an Element or Practice. You can do this by right clicking the image on your computer and navigating to “Properties” (PC) or “Get Info” (Mac).

A good image size to aim for is 300 kilobytes (KB). Of course, you can use images larger or smaller at your discretion, but 300 KB should give an optimal resolution and loading time. If your image is approaching a megabyte (MB) it is likely too big and could cause serious loading issues for your page.

If you find that your image is too big, most graphics applications such as Adobe Photoshop, can help to reduce the size. There are also a lot of great tools online to help you reduce image size, such as TinyPNG or Compress JPEG.

Image Dimensions

It is also important to keep image dimensions in mind. For digital images, dimensions are represented in pixels (px).

There are two things to consider regarding image dimensions in Creator+. First, Elements and Practices have maximum widths. For example, an Accordion has a maximum width of 633px, so content cannot extend beyond that width. Instead, any media will be reduced to fit that 633 px maximum. If your image is larger than 633px, it will be shrunken to fit that constraint but will still keep its intrinsic file size. A large image will still display, but it may impact load times.

Second, you should understand the three types of image orientation: square, portrait, and landscape.

Orientation

Some orientations will fit better with certain Elements. For example, Flip Cards work great with portrait orientation but are not as ideal for landscape images. Likewise, a Tabs title is a great place for a square image, but you may find a portrait orientation is too tall in this space.

Creator+ Image Guide

The following guide gives a breakdown of image considerations for each Creator+ Element and Practice. This guide gives you the maximum width of each feature, suggested orientations, and some other general considerations.

Elements

C+ Element

Maximum Width

Suggested Orientation

Other Considerations

Accordion

633 px

Any orientation (square, landscape, portrait)

Images are embedded via an HTML editor and look great beside text. Consider using Layouts to format images and text.

Tabs

883 px for the content section

87 px for Tab titles

Any orientation for the content section (square, landscape, portrait)

Square works best for Tab titles.

Tabs have two spots to place images. You can embed an image in the content section with an HTML editor. Any image will look great in the content section. Consider using Layouts to format images next to text.

Tabs also have a section for adding an image to a Tabs title. This is done with an ‘Insert Image’ button. This space is much smaller (87 px) and work better with square images.

Click and Reveal

585 px

Any orientation (square, landscape, portrait)

Images are embedded via an HTML editor and look great beside text. Consider using Layouts to format images and text.

Callout

649 px

Any orientation (square, landscape, portrait)

Images are embedded via an HTML editor and look great beside text. Consider using Layouts to format images and text.

Timeline

836 px (left-aligned Timelines)

373 px (alternating Timelines)

Any orientation (square, landscape, portrait)

Timelines can be configured in two styles: left-aligned and alternating. Alternating timelines have less width, so keep that in mind if you’re adding images.

Flip Cards

450 px if there is only one Flip Card.

Landscape and square are good options if you only have one Flip Card.

For more than one Flip Card, portrait or square work well.

If you are using only one Flip Card, it will have a maximum width of 450 px. With each Flip Card you add to a row, the width will decrease. Keep this in mind when adding images.

Wider landscape images work great for single Flip Cards but may not display as nicely with rows of two or more.

Carousel

490 px

Any orientation (square, landscape, portrait).

The Carousel Element allows users to add an image to a space that is 490 px wide. Landscape allows for best use of available space.

Hotspot

473 px

Any orientation (square, landscape, portrait)

The Hotspot Element displays images in a 473 px container.

 

Practices

C+ Practice

Maximum Width

Suggested Orientation

Other Considerations

Multiple Choice

931 px (images in question description)

134 px (images in question option)

Any orientation (square, landscape, portrait)

The question description leaves a lot of space for an image and text.

The question option has less space, so avoid overly detailed images.

Multi-Select

931 px (images in question description)

134 px (images in question option)

Any orientation (square, landscape, portrait)

The question description leaves a lot of space for an image and text.

The question option has less space, so avoid overly detailed  images.

Sequencing

205 px

Any orientation (square, landscape, portrait

Sequencing places the image beside the sequence step title and sequencable item title. The question option has less space, so avoid overly detailed images.

Sorting

68 px for category label

40 px for sortable items

 Any orientation (square, landscape, portrait)

Sorting places the image beside the category label and sorting item title. With this limited space, detailed images will be difficult to identify.