Thumbnail Design pattern

Problem summary

The user needs to get an overview of multiple pictures without having to download each of the full size images.

Example

Usage

Use when you have a collection of images that you want to present to the user.
Use when downloading full-size versions of all of the images you want to present to the user will both take up much bandwidth but will also take a long time for the user to download.
Use when you want to allow the user to browse quickly through a collection of images.
Use when you want to give the user an impression of an image, movie or page before he or she decides to download the original.

Solution

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 |

Rationale

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.

More example images of the 'Thumbnail' pattern

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

View more example screenshots

4 Comments

1

wOnderer

2 Feb, 2008

80×80pixels, it works in 640×480 and in 2400×1800 the same, oh my
2

Kivi Shapiro

5 Mar, 2008

See also Jakob Nielsen’s post on relevance-enhanced image reduction, at www.useit.com/alertbox/9611.html .
3

Brendan Rice

24 Mar, 2008

I wish I had have come across this a while back when I came across this problem.

I had to display a thumbnail gallery but what was throwing me out was the differing dimensions of the thumbnails as the preserved the image width and height dimensions without cropping. I tried numerous differing approaches but it was very tricky to balance out the gallery.

Any tips on this would be very helpful.

Thanks

Brendan
4

Regis

9 Jul, 2008

I had the same problem. I offered a client a relevance-enhanced image reduction type of solution but she did not want the images to be cropped.. so the solution I came up with was to put all my thumbnails into a fixed-size box. Not perfect but it did the trick. You can see it at www.barbarierothstein.com/gallery.php?galId=4&pageId=1

UI-Patterns.com

Thumbnail Design pattern

Liked this? Then you will also like...

Carousel

Problem summary

Example

Usage

Solution

Rationale

More example images of the 'Thumbnail' pattern

4 Comments

Post a comment

Thank you for your comment.

Browsing Design patterns

Example images

Related links

See it in action

Related articles

About UI-Patterns.com

Write for us

Find us elsewhere

Recently uploaded

Recently on Twitter