You want to give the user an idea of how an image, movie or page looks like, but doesn't want to display the full-scale image, movie or page because of download time and screen space.


Display a smaller version of the movie, image or page.

A series of thumbnails from

Use when

You want to allow fast browsing through multiple images. The visitor must get an impression of the image, movie or page, so the visitor can decide if he/she wants to see the original sized page, movie or image. It saves download time and screen space. Thumbnails are for example used in an Image Browser.


A thumbnail is a miniature display of an image, movie or page. Clicking on the thumbnail will allow the user to view the image, movie or page at full scale. It could be useful to write a description of the image, movie or page next to, or below the thumbnail. The description could for example exist of what could be seen, the file size and the size in pixels.


By using thumbnails you can add more images, movies or pages on less space, and the user can easily select the one he/she wants to see. Further it saves bandwidth because the image, movie or page doesn't have to be downloaded completely. The main advantage is that users can see a preview of the picture, so the user knows better what to expect when clicking on the thumbnail.

More Examples

Thumbnail of a webpage displayed by the windows explorer.

plml logo


0 comments have been added to this pattern

Add a comment
Do you have something to add or say about this pattern? Perhaps some more examples of how this pattern is used in the wild? Add a comment to this pattern and I'll update the pattern when necessary. Please abstain from misuse. I reserve the right to delete or modify inappropriate postings.

Your Name


Enter the verification code you see in the image below