It is the hero behind the scenes that cannot be ignored in the short video era!

When we are shopping in the supermarket, if there is a product purchased for the first time, we often choose the one with better packaging among similar products. This is because the first impression obtained from the picture affects our subconscious, which in turn affects our purchase decision. On the Internet, well-made and informative thumbnails are also more likely to arouse everyone’s interest, just like commodity packaging.

For users, the thumbnail can be regarded as a "trailer", which can help users preview the content and find what they want to watch faster and more conveniently. How do you make a thumbnail? Let’s start by understanding thumbnails.

What is a thumbnail?

A thumbnail ("thumb" for short) is an original compressed preview image used as a placeholder, which usually contains a hyperlink to the full-size image. Thumbnails are often used to load web pages with more images more quickly in a web browser. Because of its small size and very fast loading speed, it is used for quick browsing. It is equivalent to the role of preview and directory of picture and video files. Depending on the platform, the thumbnails have corresponding sizes, and the sizes are not uniform:

• Images in Baidu search: The image ratio should best match 121:75 as far as possible, which is good for Baidu's crawling.
• B station video cover: The size of the B station video cover is not less than 1146 x 717 pixels.
• Google’s image search: If you need to create a desktop thumbnail for Google’s image search, the recommended size is 177 pixels. You can also use smaller thumbnails.
• YouTube: The size of the desktop thumbnail on YouTube is 210 x 118 pixels on the start page. Belongs to the common 16:9 image format.

Why use thumbnails?

Compared with the original image, the biggest advantage of thumbnails is the reduced file size. If the images and video content of the website are displayed in the form of thumbnails, the loading time of the website will also be significantly faster. The user can decide which content to view through the thumbnail, and then click the thumbnail to load the actual original image or content. This not only saves traffic, but also enhances the user experience.

The small and exquisite thumbnails allow website designers to immediately provide visitors with a large amount of content without increasing page load time. Other advantages include:

• Save space: In the same area of the web page, thumbnails can present more overviews of different content.
• User-friendliness: The great advantage of images is that they can capture information very intuitively; through thumbnails, users can quickly browse and find what they want.
• Interactivity: Increase user interaction with the website by clicking on the thumbnail.

Web site thumbnails are usually automatically generated by search engines, image editing programs, and image management programs. For the mobile terminal, the role of thumbnails is particularly prominent.

When to use thumbnails?

Thumbnails can be found anywhere on the Internet. For example, video sites, or some image search sites. E-commerce sites also use thumbnails to display a large number of products on the shop page at the same time. If we click on a product, it will jump to a new window and display the original image and product details.

video sites

Thumbnails used on video sites must capture the viewer’s attention and motivate them to click on the video within a few seconds. The number of views on a video site is important, so thumbnails play an important role. For users who watch videos, attractive preview images are the best way to get clicks, views, and increase subscriptions.

Google Image Search

Google uses thumbnails in image searches, not full-size images. This means that users can see a large number of different images at the same time. You can request more information by clicking on one of the thumbnails. If there is a demand, the user will be forwarded directly to the source webpage.

online store

In online stores, thumbnails are used to display multiple products on one page without slowing down the loading speed. The category overview is also often displayed in the form of thumbnails. Click again on the thumbnail of the product of interest to open the original image of the product so that you can view more information about the product.

How to design thumbnails?

The frequency of attracting users to click on a video or image usually depends on the design of the thumbnail. Depending on your website or product, you should pay attention to different situations when creating thumbnails. Compared with pictures, video thumbnails are usually more complicated, partly because the video transmits more content. The thumbnail should match the content and entice the viewer to click. E.g:

• Images and colors that match the content theme and are meaningful should be used
• Human faces are a simple way to connect with the viewer
• Use action lenses to attract attention
• If the content is not obvious, you can add a title or keywords to the image
• Use Logo, etc. to increase the value of content recognition (brand promotion)

Here is an example of a well-designed thumbnail:

Video thumbnails always follow the same structure. The preview image is clear and simple, and provides viewers with information about the video. Image Source:

In addition, the use of thumbnails should be careful to avoid copyright issues. At the same time, in order to prevent others from embezzling, we can also add a watermark in a suitable location to indicate the author of the image, or add a unique Logo.

Take cloud picture processing again

If you don't know how to use drawing software, is there any way to quickly make a unique thumbnail with a watermark? You can try and take the cloud image processing function, support 40+ functions such as shrinking, zooming in, cropping, image watermarking, text watermarking, sharpening, Gaussian blurring, etc. It also supports the creation of thumbnail versions, which can be mixed with drawing parameters.

It also has a simple and convenient way to process and draw pictures in the cloud. It can be processed online through "picture URL + interval identifier + parameter or thumbnail version" and displayed in real time. In addition, as the industry's first manufacturer to support WebP and dynamic WebP, it solves a number of WebP processing problems and saves an average of 70% in image size.

Recommended reading

to try a different image loading method

Best practices for storing time in MySQL