Use Handbrake to Quickly Create Web-Friendly Video Thumbnails

This simple tutorial walks you through how to quickly create small video thumbnails using Handbrake.

Download the latest version of Handbrake

When including video thumbnails on a web-page you do not want to include large full size HD videos. These will impact on the page load time with no visible benefit

For example: if the space for a thumbnail is 320x180px and you upload a 1920×1080 video the user will have to download a video that is 10x larger than it needs to be and be they will be forced to use downscale the video in their browser.

STEP BY STEP GUIDE TO CREATING VIDEO THUMBNAILS

1 —** Open Handbrake** in Windows or OSX

// Select Input Output

2 —** Select Your Source Video**. This can be any file format; mp4,mov,mkv etc. Handbrake should convert from any common format.

3 — Click Browse (Under Destination) and select where you want the save the video thumbnail and what you want to call it.

// “Crop” Your Video Thumbnail to the ‘scene’ you want to use.

4 — “**Change Source Selection from Chapters to Seconds. **This allows you to easily select the start/end time code of where you want to start/end your video clip

5 — Set the Start Time Code. i.e. 5 Seconds to crop from the 5 second mark of the source video

6 — Set the End Time Code. i.e. 10 seconds to end the video clip at the 10 second mark of the source video

// Optimise Handbrake Settings for WEb

7 —** Set format to mp4**

8 — Tick** Web Optimized**

9 — Set Video Encode to x264

10 — Set **Frame Rate to 30 **— note you can increase/decrease depending on the content type.

11 — Set Bit-rate to 5Mbps/5000kbps.

Bit-rate will have the largest impact on your file-size out of all the settings you can change.
While a higher bit-rate will result in a higher quality video keep in mind we are decreasing the dimensions of the video — you simply do not need a 8k quality video for a tiny 320px thumbnail.
I would suggest to aim for a fairly low bit-rate of 2000kps-5000kps as the quality beyond this will produce a fairly minor increase in quality but a huge increase in file size.

Rule of thumb Bit rates (Mbps) to use vs Size

SD 2–5Mbps
720p 5–10Mbps
1080p 10–20Mbps
2K 20–30Mbps
4K 30–60Mbps
8K 50–80Mbps

12 —** Disable Anamorphic **under pictures. This will allow you to scale you dimensions correctly.

13 —** Set Pixel Dimensions**. i.e. if you want a width of 320px; enter 320. Height will automatically scale.

14 —** (Optional) Remove the audio track**. This is optional; however having the audio track removed will allow the video to autoplay on iOS and is generally considered good etiquette as your user has not elected to have audio play for thumbnails. (i.e. a user clicking play on a youtube/vimeo assumes it will have audio; a user sitting in a library clicking on your website will assume it will be silent)

15/16 —** Remove subtitles/Chapter Markers**. Neither are required for a small thumbnail.

Step 17 — CLICK START to begin the output process.

—

You now have a small video thumbnail.