Thumbnail

Problem summary

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

Examples

No items found.

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:

  • 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. Furthermore, thumbnails save bandwidth 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 previews provided by the thumbnails.

Resources

Do you need to use this pattern in your project?

This  and others patterns are available and ready to use in this massive Wireframe Bundle. Suitable for a wide variety of projects: Website and landing pages, Ecommerce, Dashboard, Flowchart and iOS.

Huge Wireframe Library Collection

Ecommerce
iOS
Website
Dashboard
Flowchart
VIEW BUNDLE