Whether we decide to buy a product or put it back on the shelf often depends on the image on the packaging, which has an effect on us – even if “only” on our sub­con­scious. It is the first im­pres­sion of the product we get from the product preview that in­flu­ences our decision to buy or not. Just like a packaging image that en­cour­ages people to buy, a thumbnail on the internet is also re­spon­si­ble for the first im­pres­sion of web content such as pictures and videos. A well-made thumbnail image attracts interest and gains clicks. But that's not all a thumbnail can do.

What is a thumbnail?

A thumbnail (“thumb” for short) is a com­pressed preview image of the original that is used as a place­hold­er. Depending on the platform, a thumbnail image should have a certain size, although there is no real de­f­i­n­i­tion of a thumb­nails’ size:

  • Google’s image search: If you create a desktop version thumbnail for Google’s image search, a size of 177 pixels is rec­om­mend­ed. Smaller thumb­nails can also be used.
  • Amazon: Amazon uses different thumbnail sizes for different ap­pli­ca­tions. Thumb­nails with a height of 200 pixels and dynamic width are used on the start page. Preview images on category pages are 150 pixels high.
  • YouTube: Desktop thumbnail images on YouTube have a size of 210 x 118 pixels on the start page. This cor­re­sponds to the common 16:9 image format. For video sug­ges­tions to the right of an already running video, thumb­nails with a size of 168 x 94 pixels are used.
  • Pinterest: Pinterest’s image width is fixed at 236 pixels. The wider the screen of the viewer, the more images are displayed next to each other.
De­f­i­n­i­tion

A thumbnail is an image with a reduced file size that is used as a place­hold­er for full sized mul­ti­me­dia content.

Why use thumb­nails?

The biggest advantage of thumbnail images is their reduced file size compared to the original image. A website will have sig­nif­i­cant­ly faster loading times if its range of image and video content is initially displayed in the form of thumb­nails. Internet users decide for them­selves which content they want to see, and load the actual, original image or content by clicking on the thumbnail.

The small file size of thumb­nails makes it possible for website designers to offer visitors a lot of content im­me­di­ate­ly without in­creas­ing the loading time of the page. Clicking on the thumbnail takes you to the media content in original size, which can be opened in a new tab or window. Further ad­van­tages include:

  • Space savers: Preview images allow internet users to present an overview of different media content in a small space
  • User-friend­li­ness: Images have the great advantage that they can be captured very quickly; thumbs struc­tures a website so that users can quickly find their way around it
  • In­ter­ac­tiv­i­ty: Thumb­nails engage the user with the website – usually by clicking on a thumbnail

Thumb­nails are usually generated au­to­mat­i­cal­ly by search engines, image editing programs, as well as image man­age­ment programs. The smaller file size of thumb­nails is es­pe­cial­ly useful for mobile browsing.

When are thumb­nails used?

Thumbnail images can be found every­where on the internet – e.g. on YouTube, or in Google’s image search. Online shops also use thumb­nails to display lots of products si­mul­ta­ne­ous­ly on shop pages. If you click on a product, the original image is usually displayed in a new window, along with the product details.

YouTube thumb­nails

The thumb­nails used on YouTube must attract the attention of the viewer in a few seconds and encourage them to click on the video. Views count on YouTube, and so thumb­nails play an important role. For a YouTuber, a suc­cess­ful preview image is the best way to gain clicks, views, and possibly new sub­scribers.

Image: Thumbnails of the YouTube channel Hart Beat Productions
Hart Beat Pro­duc­tions’ YouTube channel uses the channel logo in every preview image, in­creas­ing their brand image. / Source: https://www.youtube.com/user/Hart­Beat­Pro­duc­tions.

While thumbs serve primarily as place­hold­ers for images, YouTubers can use them for other purposes too. A video thumbnail is used on YouTube like a kind of cinema poster to advertise videos and appeal to viewers. The aim is to stand out from the crowd. This turns the thumbnail into ad­ver­tis­ing space in the YouTube search.

Thumb­nails in Google image search

Google uses thumb­nails instead of full size images in its image search. This means that users are presented with a large number of different images at the same time. By clicking on one of the thumbnail images, further in­for­ma­tion can be requested, and if required, the user is forwarded directly to the source website.

Image: A selection of images in Google’s image search
Thumb­nails on a search results page of Google’s image search. / Source: https://www.google.com/search.

Thumb­nails for GIFs

Compared to video thumb­nails, thumbnail images for GIF an­i­ma­tions are much simpler. Since GIFs are only short video loops, text and other design elements are usually omitted. In principle, these images work just like mo­tion­less thumb­nails: they refer to the original files and provide quick ori­en­ta­tion.

Image: GIF images as thumbnails on giphy.com
There are also thumb­nails on GIF pages like giphy.com. This is usually a sta­tion­ary image of the GIF. / Source: https://giphy.com/cat­e­gories/memes

Thumb­nails in online shops

In online shops, thumb­nails are used to display several products on one page without slowing down the loading speed. The category overview is also often displayed in the form of thumbnail images. This takes users to product pages, which in turn contain product thumb­nails. By clicking on the product thumb­nails again, the original image is opened and further in­for­ma­tion about the product can be seen. Here, too, they fa­cil­i­tate ori­en­ta­tion on the re­spec­tive page.

Image: Thumbnails of the ASOS online shop
The category overview of an online shop. A click on a preview image takes the user to the re­spec­tive category page. / Source: http://www.asos.com/women/

5 tips on how to design a thumbnail

How often a video or an image is clicked on often depends on the design of the thumbs. Depending on how you build your web presence, there are different things you should pay attention to when creating a thumbnail. The dif­fer­ence between preview images and video thumb­nails is small. Thumb­nails for videos are usually more complex, however, which is partly due to the fact that videos transport more content. The thumbnail should match the content and encourage the viewer to click.

These 5 tips should help you to find the right design for your thumb­nails:

  1. Use mean­ing­ful colors
  2. A face is an easy way to connect with the viewer
  3. Use action shots to attract attention
  4. Add text if it is not obvious what the video is about
  5. Increase the recog­ni­tion value with a logo etc. (branding)

Here is an example of well-designed thumb­nails:

Image: Thumbnail example from the YouTube channel of SciShow
The YouTube channel thumb­nails of SciShow always follow the same structure. The preview images are clear and simple and give the viewer in­for­ma­tion about the video. / Source: https://www.youtube.com/user/scishow

There are many points that make up a good thumbnail image. The creators:

  • Use the thumbnail like a movie poster for the video
  • Show a detailed picture that fits the topic well
  • Add a title or keywords to the image
  • Increase the recog­ni­tion value with a logo in the upper left corner

Thumbnail legality

The copyright law applies to thumb­nails as well as to the original pictures. To avoid possible copyright problems, you should therefore, as with other image material that you have not created yourself, indicate the author of the image in a suitable place. In addition, it is important to observe the rules of image rights in the internet. If an image you wish to use is not available under a free license, you must obtain the author’s per­mis­sion.

Go to Main Menu