Optimize video for your website

Videos are a crucial part of your website, providing engagement and a chance to tell your stories in a visual way. Your viewers connect emotionally when seeing the faces of students. Videos can also convey a lot of information in a shorter amount of time. 

It's important, though, to be sure you are optimizing the videos you use on your websites for a variety of reasons. This article will focus on how to optimize video for your website in ways that keep visitors on your site while also increasing engagement. 

In this Article

• Step 1: Define the purpose and actions for the Video
• Step 2: Prepare the video for upload
  • length
  • size
  • file type
  • resolution
• Step 3: Upload file into Resources
• Step 4: Connect your video in a Resources element
• Step 5: Implement best practices

Step 1: Define the purpose and actions for the Video

• Purpose: Define the purpose of the video. The most successful hero videos provide a succinct insight into the school or district’s vision, differentiators, and culture. Remember that not all of your visitors to your site are looking for engagement through videos. For this reason, it's best to have a fast-loading experience to allow them to find what they're looking for. 
• Next steps: What do you want people to do once they’ve watched the video? Where should they click next?

Step 2: Prepare the video for upload

There are specific tasks that need to be done to a video before it is ready for upload. This step will help you to optimize your video in the following areas: 

• length
• size
• file type
• resolution

Length: 

• Homepage hero videos should be no longer than 30 seconds. After 30 seconds, the video can loop, if you choose.
• Include longer narrative-type videos elsewhere on your site. 

Size: 

• Keep the maximum limit for a single video upload to 4GB.
• Aim for smaller files to upload and convert more quickly.
• To reduce network bandwidth, ensure your video is cached on visitors’ browsers. Most browsers have a caching limit around 50MB. Therefore, keep video files under 50MB to ensure they are downloaded once and cached locally.

File Type: 

• Use supported file types: mp4, jpg, mp3, mov, wav, m4a, mpeg, webm, wmv, flv.
• Use preferred file types: 
  • MP4
    • Advantages: Widespread compatibility, good balance of quality and file size, compatible with HTML5 video players, and supports VTT caption files.
  • WebM
    • Advantages: Better compression, often smaller than MP4 while maintaining similar quality, and supports captions.
    • Considerations: Less widespread compatibility, some older Apple iOS Safari versions do not support it. This issue is decreasing as more people upgrade their devices. You can check compatibility here. 
• Convert unsupported file types:
• • • Use free software like Handbrake to convert video files into supported formats.
    • Compress video files with Handbrake to make them smaller and easier to upload within size limits.

Resolution: 

This refers to the number of pixels displayed in each dimension (width and height) on a screen. It determines the clarity and detail of the video image. 

• Resources can handle resolutions from 360p to 4k, but 720 is the optimal resolution for most website videos. This allows for good quality while still considering file size and compression, allowing for faster downloads and a better overall experience on any platform. 
• The most common aspect ratio for webpage videos is 16:9 though this will depend on your specific site settings. 

Step 3: Upload file into Resources

Once you have covered all of these areas in Step 2, you are ready to upload your video into Resources! Whatever file you upload to Resources, it will be optimized for speed.

• If you click on the Download Resource link in your Quick Actions Panel once you have uploaded your video, you will receive the optimized version of the file, which should be considerably smaller than your original file. Use this file for your website video and not your original.
• Whatever video you use, Resources will automatically send the optimal file for the device requesting it. If you do upload a 50MB file, for example, it will be converted to a smaller size for mobile devices. 

Step 4: Connect your video in a Resources element

Now that your video exists in Resources, you can display it in a Resource element on a Composer page. 

Step 5: Implement best practices

• Use short videos on the homepage. Save longer videos for interior pages or showcase areas of your homepage. 
• Use videos sparingly to emphasize points or showcase something special.
• Remove audio tracks to save space. Most browsers will turn off audio by default anyway.
• If you do include audio, a .vtt closed caption file is required and essential for accessibility compliance. For any visual information in your video (charts, texts, actions, subtitles), audio descriptions must be provided to describe what's happening visually for users with impairments.