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