- 28 Aug 2024
- 8 minutes to read
Using images and video in Totara
- Updated on 28 Aug 2024
- 8 minutes to read
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. Note that the SVG image file format is not currently supported on the Totara Mobile app, so you must use alternative image file formats for content that needs to be compatible with the app.
- 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 placing important information (e.g. text, logos, or faces) around the outer edges of images, as some images will not be presented at their original ratio, and therefore cropping will occur. We recommend that you leave a 20% safe zone around the outer edge of images.
- 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 page image
Default login page image: 692px x 1000px
Recommended login page image (non-SVG): 1200px x 1200px
JPEG, PNG and SVG file formats are accepted, and PNG files are preferred for illustrative images. We recommend keeping the file size as small as possible (without sacrificing quality), with a minimum DPI of 150. Ensure that any text in the image has sufficient contrast with the background so that the image is accessible.
Legacy login page banner
Default login page banner: 1672px x 430px
Login page banner used in the Community: 1672px x 215px, JPEG file
Resource images
Default resource image: 428px x 228px
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:
Workspace images
Default workspace image: 426px x 477px
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: 373px x 150px
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 (834px x 334px) that has the same proportions as the default course image size of 373px x 150px.
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 16px x 16px (most common) or 32px x 32px.
Other Community/Academy assets
Badge size: 426px x 426px, 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 100px x 100px in some places.
Featured links blocks: We use two dimensions for tiles in Featured links blocks:
- Square-shaped: 500px x 500px
- Landscape: 500px x 375px
Full-width banners: Desktop banners are 1650px x 188px and mobile banners are 600px x 177px.
Community feedback form banner: 1280px x 223px
Academy quiz icons: 115px x 100px, 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 resolution | Size in pixels | Term | Aspect ratio | Notes |
---|---|---|---|---|
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 - (1280px x 720px) - Facebook or LinkedIn videos
- Portrait - 9:16 (720px x 1280px) - e.g. Instagram stories
- Square - 1:1 (minimum of 1080px x 1080px) - 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.
- If the thumbnail image for an embedded video does not display (either in the content or the Totara Engage resource image), check that the proxy server or web filter allows connection to the source of the video, e.g. YouTube.
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 2024 Totara Learning Solutions. All rights reserved.