Optimizing Video for the Web

How to optimize videos for my website?

Updated over a week ago

Even though Spotlightr optimizes your uploaded files in many ways, you may want to use specialty tools to optimize your video before uploading to Spotlightr. And if you run into any playback issues on your embedded videos then you will definitely want to do so.

Optimizing files means compressing them, and making sure the video has the most recommended codecs, bit rate, frame rate, etc. All of this maximizes it's compatibility across all platforms and browsers and provides for the best user experience.

Unfortunately, to-date there is no one format/video codec/audio codec combination to rule them all. Different types videos play better with different settings. But if you have problems with your video playback, you should try following the instructions below.

And don't underestimate the importance of compressing your video files. Large videos can cause lots of issues in regards to playback and user experience.


They can increase page load times which provide a negative user experience, and they can also negatively impact your site’s SEO as fast page load times are an important factor that Google and other search engines take into consideration.

Large videos also take up more storage in your account and can also cause issues with slow or stuttering playback.


Video Optimization

Just like images, videos should be optimized for the web. First and foremost, to ensure compatibility with most browsers and devices, our best recommendation is to convert videos to MP4 and encode them with the H.264 codec.

Depending on the program used and the export and render settings used, some videos may have streaming issues on playback.  Fortunately, there are plenty of programs that will reformat videos and rearrange file settings for faster playback and smooth streaming.

Our best recommendation is a free software program called Handbrake, an open-source video transcoder. 

Handbrake is extremely easy to use.  These are the settings we recommend in general. Your particular use case may be different.  To optimize a video for the web using Handbrake:

  1. Open the Handbrake and on the first screen "Source Selection", click on Preferences. Under the Output section set "Always use MP4" and your default path for saving files. Click on the Back button and then drag & drop a file for optimization.

  2. Starting in the Summary tab, adjust the Preset field if necessary.  You should not attempt to encode at a resolution higher than the original video.  

    If the resolution of the source video is 1080 and you want to keep it at 1080 then select the "Fast 1080p30" Preset. This will likely be the default anyway.

    Or if you don't mind sacrificing a small degree of quality and want your file as small as possible to save on storage space you can downgrade the resolution to 720 and choose the "Fast 720p30" Preset.


    If the resolution of the video is 720 then you should choose the "Fast 720p30" Preset.
    ​ 

  3. Check the box labeled "Web Optimized"

  4. Make sure MP4 is selected

  1. Moving over to the Video tab, adjust the framerate if you'd like a smaller file size and save on storage space. It's set to 30 because of the Preset and if you wish change it to 24 or 25. Changing this will likely not affect the quality of the video but will save on storage space. If unsure just keep it at 30.

  2. Ensure that the codec says H.264 (x264)

  3. Ensure that Peak Framerate is selected

Once you've finished with the settings, click on Start Encode. The video will be saved according to the path at the bottom. Then the final step is to upload that new file to Spotlightr.

If you have multiple files to optimize you can click on the button Add to Queue, then add another file for optimization.

Additional Handbrake Links:

Here is a link to Handbrake's full documentation:

And if you need to add multiple videos to Handbrake at the same time, you can use their queue feature.


Recommended Export Settings for HD Video

For those of you who just need the settings, regardless of the Handbrake options, here are our basic recommendations on what to use when compressing HD video (where the original is 1920 x 1080) for upload to Spotlightr for web use:

Video

  • MP4 format

  • Codec: H.264 

  • Frame Rate: 24, 25 or 30

  • Frame Size / Resolution: 1920 x 1080 (1080p)

  • Bitrate: 5,000 kbit/s (5 Mbps) for 720p | 8000 kbit/s (8 Mbps) for 1080p

Audio

  • Codec: AAC (or AAC-LC)

  • Bitrate: 320 - 384 kbit/s for Stereo | 512kbit/s for 5.1

  • Sample Rate: 48,000 Hz

Did this answer your question?