A thumbnail is a miniature version of a larger picture. The thumbnail can illustrate anything graphical: a picture, movie or even a screenshot of a webpage.
The dimensions (width and height) of multiple thumbnails appearing next to each other are the exact same. In order to preserve the same proportions in the thumbnail image as were found in the original image, both resizing and cropping is part of the image manipulation process.
Common thumbnail sizes are:
|. Dimension (width X height) |. Description |
| 48×48 | Very small |
| 64×64 | Small |
| 80×80 | Medium |
| 96×96 | Medium |
| 128×128 | Large |
| 144×144 | Extra large |
| 160×160 | Super Large |
Using thumbnails provides the user with an overview of several images or movies in the space of one web page. Thumbnails further save bandwith as the user does not have to click through all images to find the one he or she is looking for, but can be guided by the teasers provided by the thumbnails.
When searching veer.com, thumbnails are combined with image data and callouts to actions.
At the CSS gallery TagSociety.com, the caption for each thumbnail is close to being bigger than the thumbnail itself, which is bordered with a very bright color.
CSS Mania uses large thumbnails with a bright rounded border to showcase website screenshots.
Notice the reflections underneath each thumbnail