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.




  • 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.


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.

More example images of the 'Thumbnail' pattern

  • spacer

    When searching, thumbnails are combined with image data and callouts to actions.

  • spacer

    At the CSS gallery, the caption for each thumbnail is close to being bigger than the thumbnail itself, which is bordered with a very bright color.

  • spacer

    CSS Mania uses large thumbnails with a bright rounded border to showcase website screenshots.

  • spacer

    Notice the reflections underneath each thumbnail

View more example screenshots


Post a comment

← You need to write your name or initials! Required. Real name or initials only.
← That doesn't look like a valid email! ← Oops, you forgot to enter your email! Required. Will not be published.
Oops, you forgot to write your comment!
via Ad Packs

Browsing Design patterns

« Alternating Row Colors | Copy Box »
Vote down Vote up
Out of 29 votes, 96.55% like this one.
  • Getting input
    • Forms
      • Forgiving Format
      • Structured Format
      • Fill In The Blanks
      • Input Prompt
      • Good Defaults
      • Captcha
      • Inplace Editor
      • WYSIWYG
      • Live Preview
      • Password Strength Meter
      • Input Feedback
      • Calendar Picker
    • Explaining the process
      • Steps Left
      • Blank Slate
      • Inline Help Box
      • Wizard
      • Tour
    • Community driven
      • Wiki
      • Lazy Registration
      • Vote To Promote
      • Account Registration
      • Rate Content
  • Navigation
    • Tabs
      • Module Tabs
      • Navigation Tabs
    • Jumping in hierarchy
      • Breadcrumbs
      • Shortcut Dropdown
      • Home Link
      • Fat Footer
    • Menus
      • Vertical Dropdown Menu
      • Horizontal Dropdown Menu
      • Accordion Menu
    • Content
      • Thumbnail
      • Carousel
      • Continuous Scrolling
      • Pagination
      • Archive
      • Tag
      • Tag Cloud
      • Article list
      • Event calendar
  • Dealing with data
    • Search
      • Table Filter
      • Live Filter
      • Autocomplete
    • Tables
      • Sort By Column
      • Alternating Row Colors
    • Images
      • Image Zoom
      • Gallery
      • Slideshow
    • Formatting data
      • Copy Box
  • Social
    • Activity stream
    • Ego
      • Completeness meter
      • Collectible Achievements
  • Miscellaneous
    • Adaptable View
    • Shopping
      • Shopping Cart
      • Coupon
      • Pricing table
      • Product page
    • Increasing frequency
      • Tip A Friend

Example images

  • spacer
  • spacer
  • spacer
  • spacer
  • spacer
  • spacer
  • spacer
  • spacer
  • spacer
  • spacer
  • spacer
  • spacer
View all 42 example screenshots

Related links

  • Relevant thumbnails

See it in action

  • .Mac sample Web Gallery

Related articles

  • Carousel
  • Continuous Scrolling
  • Pagination
  • Archive
  • Tag
  • Tag Cloud
  • Article list
  • Event calendar is neither affiliated with the authors of this page nor responsible for its contents. This is a safe-cache copy of the original web site.