Using images and video in Totara
  • 21 Sep 2022
  • 6 Minutes to read

Using images and video in Totara


Using images

In this section we have provided some tips for how to use images in Totara, as well as recommended sizes for different images, and some examples of how we've used images on our Totara Community and Academy sites.

General guidance

Here is some general guidance to bear in mind when adding images to your site:

  • Use web-optimised file formats such as SVG or JPG/JPEG. This will help to provide faster loading times and more efficient mobile data usage for users accessing the site on mobile devices.
  • PNG files are usually larger in size, but this format supports transparent backgrounds. The PNG format is therefore recommended when your image has a transparent background.
  • Avoid adding text to images wherever possible. If you do need to use text in an image, try to use no more than three words. Consider how readable the text will be when scaled down and displayed on smaller devices such as smartphones.
  • Avoid overly large files and instead look for the right balance between image quality and file size.
  • Ensure that the colour mode of images is set to RGB (for web use), not CMYK (for print), regardless of the software used (e.g. Photoshop, Canvas, Illustrator, or Gimp).
  • When taking images from elsewhere, you can usually either do a 'save as' or 'export images as' action, then select an appropriate file type, such as JPG or PNG.
  • 72 dpi (or ppi) resolution is enough for website use, whereas 300 dpi is recommended for print use.

Ventura theme assets

Login banners

Default login page banner1672x430 px

Login page banner used in the Community: 1672x215 px, JPEG file

Resource images

Default resource image: 428x228 px

Place the point of interest of the image (e.g. an icon, text, a person's face) in the centre, as this the safe area that will not be cropped. The image will appear cropped on other devices (such as mobile devices) and smaller screens (e.g. laptops), but the central area will be still visible. Here you can see an example of a resource image with text, and how the text and icon are aligned in the safe area.

Resource image with text:

Resource image with safe area overlaid:

In the Totara Community we use this size (428x228 px) for most of our Engage resources. However, we have recently tried using 700x320 px images for our webinars on demand. This size fits nicely in the Weka editor when the resource includes a video and needs an image banner at the top to be set as the resource image preview.

Workspace images

Default workspace image: 426x477 px

As with the resource images, place the main focus of the graphic in the centre, as the safe area of the workspace image is limited to a square in the centre, as shown in the example.

Workspace image:

Workspace image with safe area overlaid:

Workspace image in context:

Workspace image in the Recommended workspaces block:

In this block the workspace is displayed with a black gradient at the top, and with the number of workspace members at the bottom.

Default course and program images

Default program/course image: 373x150 px

Course images will be automatically resized, so if you use a square image it will be cropped vertically or horizontally on different pages. In the Totara Community we use a larger image size (834x334 px) that has the same proportions as the default course image size of 373x150 px.

Course image example:

Course image in the Current learning block:

Course image in the Recommended courses block:

Logos and favicons

Logo: A horizontal logo without margins is preferred. An SVG file is recommended to maintain the best image quality at different sizes.

Favicon: This icon will be displayed next to the site/page name in the browser tab, and in the browser bookmarks. ICO files are recommended, but PNG files are also supported. The optimal size is 16x16 px (most common) or 32x32 px.

Other Community/Academy assets

Badge size: 426x426 px, PNG format (contains transparency)

Avoid placing text on badge images. Badges are usually displayed next to the course or program title. Simplicity is key, so when designing badge images try to reduce the number of elements, colours and shapes to the minimum, as badges can be displayed as small as 100x100 px in some places.

Featured links blocks: We use two dimensions for tiles in Featured links blocks: 

  • Square-shaped: 500x500 px
  • Landscape: 500x375 px

Full-width banners: Desktop banners are 1650x188 px and mobile banners are 600x177 px.

On the Totara Community we use an HTML block for all of our full-width banners.

Community feedback form banner: 1280 x 223 px

Academy quiz icons: 115 x 100 px, PNGs with transparent backgrounds

On the Totara Academy, the question text in quiz activities includes the quiz icon. This icon is left-aligned in the image properties. 

Using video

In this section we've outlined some important information and best-practice guidance for adding video to your Totara site.

General recommendations

Here is some general guidance to bear in mind when adding videos to your site:

  • Most videos are shot in at least 1080p (Full HD) at 24 frames per second (fps). See the table below for more information on common video sizes.
  • The standard aspect ratio for videos is 16:9. The term 'aspect ratio' refers to the width and height of an image in relation to one another, e.g. dividing 1920 by 1080 gives you 16/9.
  • 16:9 aspect ratio is also referred to as 'widescreen' and is currently the most commonly used aspect ratio.
  • Export a video with a shorter duration to test different codecs and compression settings.
  • Check the compression settings dialog boxes when rendering/exporting the video. 
  • For high-quality video, the AVI format is recommended, but note that file sizes are typically significantly larger with this format.
  • MP4 files are recommended for streaming, as it is the most widely supported format (in contrast to MOV or AVI files).
  • H.264 does not support transparency, but is a good option for maximising quality while maintaining a small file size. H.264 is also recommended for online video platforms such as YouTube and Vimeo.
  • Note that QuickTime Player does not export videos as MP4 files.
  • Any graphics or important visuals should not appear in the area where closed captions appear.
  • Avoid using more than two fonts on screen at the same time.

In the table below you can see details about commonly used video resolutions.

Video resolutionSize in pixelsTermAspect ratioNotes

Full HD

1920 wide x 1080 high

1080p

16:9

-

HD

1280 wide x 720 high

720p

16:9

This resolution might be too small and low quality for computer screens, but can be useful for video previews or mobile viewing.

Standard definition

640 wide x 480 high

480p

4:3

-

 When exporting videos for social media, check the aspect ratio used for the social media platform you want to use:

  • Landscape - 16:9 - (1280 x 720 pixels) - Facebook or LinkedIn videos
  • Portrait - 9:16 (720 x 1280 pixels) - e.g. Instagram stories
  • Square - 1:1 (minimum of 1080 x 1080 pixels) - e.g. Instagram posts (square format)

When creating or exporting a video you need to consider how your video will be viewed. If your video is intended to be viewed in 9:16 (portrait) you’ll want to export it in that aspect ratio with the minimum video resolution for your intended platform.

The video resolution for each platform varies, so we recommend checking the social media platform guidelines before making your video.

Best practice for video

  • Any text that appears in videos must meet WCAG contrast standards.
  • Avoid flashing or strobe effects in your videos.
  • Provide closed captions or transcripts for videos with audio or important information included in the visuals.
  • Subtitles and captions allow you to share your videos with a larger audience, including deaf or hard-of-hearing viewers and viewers who speak another language. Learn how to add subtitles and closed captions to YouTube videos.
  • Videos uploaded to YouTube with copyrighted music used without permission will be blocked by YouTube. There are a number of sites where you can find copyright-free music to use in your videos.

Additional resources and useful tools

For video editing we recommend using Adobe Premier Pro or Adobe After Effects. However, here are a selection of free tools that you may find useful when adding media to your Totara site:

  • Adobe Express: Free video software (with an Adobe account). Allows you to crop video to any aspect ratio or custom size for free. You can also trim your video to the right length or mute the audio, among other features.
  • Audacity: Audacity is a free and open-source digital audio editor and recording application.
  • Colour and contrast accessibility checker: Ensure your selected colours meet accessibility requirements and will be easily read by users with visual impairments.
  • Image compressor: Optimise JPEG, PNG, SVG, GIF and WEBP files.

See W3C's guidance on making audio and video media accessible for more information.

© Copyright 2022 Totara Learning Solutions. All rights reserved.


Was this article helpful?

First name must have atleast 2 characters. Numbers and special characters are not allowed.
Last name must have atleast 1 characters. Numbers and special characters are not allowed.
Enter a valid email
Enter a valid password
Your profile has been successfully updated.