Browse Articles

Browse Articles

Storyline 360: Best Practices for High Quality Images and Videos

Article Last Updated

This article applies to:

Storyline 360

For the highest quality media in your Storyline 360 courses:

Use Images and Videos That Don't Need to Be Resized

Start with high-quality images and videos that are already properly sized for your course. Scaling media up or down in your course can cause blurriness, especially if your images and videos have text.

Best Practice: Don't shrink or stretch media in your course.

If images and videos are bigger than your slides, they'll automatically be scaled down to fit, which can result in a loss of quality. Here are some tips for working with large images and videos:

Images

Videos

  • If you're using vector drawings (EMF/SVG/WMF files), they can be scaled up or down without losing quality.

  • For all other image formats, you can use the Zoom Picture formatting feature to let learners click your images to see larger, crisper versions of them. See this user guide for details.

  • Another option is to crop images until they fit the slide. Just right-click each image and select Size and Position. Set the Scale Height and Scale Width to 100% and click Close. The image may now be larger than your slide, but you can crop it to fit.

  • The maximum dimensions for each 360° image you add to Storyline 360 are 8,000 x 4,000. In the published output, 360° images with dimensions greater than 4096 x 2048 get scaled down to this size due to 3D rendering. 

  • The maximum dimensions for all other images are 2,048 x 2,048. The maximum file size is 2 GB each.

  • If your videos are too big to fit in your slides without scaling, consider re-encoding them at a lower resolution before adding them to your course.

  • Depending on your course design, you may be able to give your videos more room to grow by configuring them to open in a separate browser window/tab. See this user guide for details.

  • The maximum file size for videos in Storyline 360 is 2 GB each.

If you make small images and videos larger than their original sizes, they may become fuzzy. Here are some tips for working with small images and videos:

Images

Videos

  • If you're using vector drawings (EMF/SVG/WMF files), they can be scaled up or down without losing quality.

  • For all other image formats, we recommend keeping them at their original sizes in Storyline 360. Stretching them will lower their quality.

  • If you've already stretched an image in your course, you can reset it to its original size by right-clicking it and selecting Size and Position. Then set the Scale Height and Scale Width to 100% and click Close.

  • If your videos are too small for your course, you may be able to re-encode them at a higher resolution before adding them to your course—if you have high-quality source videos.

  • If you can't get videos with the proper resolutions, we recommend keeping them at their original sizes in Storyline 360. Stretching them will lower their quality.

  • If you've already stretched a video in your course, you can reset it to its original size by right-clicking it and selecting Size and Position. Then set the Scale Height and Scale Width to 100% and click Close.

Adjust the Compression Settings in Storyline 360

You can adjust the compression settings Storyline 360 uses for static videos and JPG images when you publish your course. Click the Quality property in the Publish window, choose the Static video quality setting, then drag the Static slider. For JPG images, drag the JPG Quality slider.

Note: Higher quality values result in larger file sizes, which could mean longer download times for learners with slow internet connections. Use the adaptive video quality instead to deliver video content to all learners, regardless of their internet speed.

Publish window

Also, if you're using MP4 videos (created with baseline, main, or high profiles), you can turn off compression altogether for the highest quality. Select each video placeholder in your course, go to the Options tab on the ribbon, and change the Compression to None.

Tip: As of April 2022, we improved how Storyline 360 handles images during import and in the published output, resulting in crisper images.

Lock the Storyline 360 Player at Optimal Size

If you're using the classic player style, you can reduce the potential for blurry images by locking the player at optimal size, which is your slide size plus some additional width and height to accommodate the player frame. Here's how:

  1. Go to the Home tab on the ribbon and click Player.
  2. When the player properties appear, click Other on the ribbon.
  3. Set the Player size to Lock player at optimal size.
  4. Click OK to save your change.

The modern player style doesn't support locking the player at optimal size. However, you can set your course to open in a new window and resize the learner's browser to optimal size. Here's how:

  1. Go to the Home tab on the ribbon and click Player.
  2. When the player properties appear, click Other on the ribbon.
  3. Mark the box to Launch player in new window.
  4. Set the Browser size to Resize browser to optimal size.
  5. When you publish your course, give learners a link for the launcher.html file in your published output (rather than the default story.html file).