Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

Guidelines for thumbnails

Applies to Windows and Windows Phone

These guidelines describe how to use thumbnail images to help users preview files as they browse in your Windows Store app.

Should my app include thumbnails?

If your app allows users to browse files, let your users quickly preview those files by displaying thumbnail images.

Use thumbnails when:

  • Displaying previews for many items (like files and folders). For example, a photo gallery app should use thumbnails to give users a small view of each picture as they browse through their photo files.

  • Displaying a preview for an individual item (like a specific file). For example, the user may want to see more information about a file, including a larger thumbnail for a better preview, before deciding whether to open the file.

Dos and don'ts

  • Specify the thumbnail mode (picturesView, videosView, documentsView, musicView, listView, or singleItem) when you call a method to retrieve thumbnails. This ensures that thumbnail images are optimized for displaying the type of files your user wants to see.
  • Use the singleItem mode to retrieve a thumbnail for a single item, regardless of file type. The other thumbnail modes (picturesView, videosView, documentsView, musicView, and listView) are meant to display previews of multiple files.
  • Display generic placeholder images in place of thumbnails while the thumbnails load. Using placeholders in this way helps your app seem more responsive because users can interact with items before the preview images load.

    A placeholder images should be:

    • Specific to the kind of item that it stands in for. For example, folders, pictures, and videos should all have their own specialized placeholders that use different icons, text, and/or colors.
    • Of the same size and aspect ratio as the thumbnail image it stands in for.
    • Displayed until the thumbnail image is loaded. If a thumbnail can't be retrieved, display a placeholder image instead.
  • Use placeholder images with text labels to represent folders and file groups. This differentiates system constructs like folders and file groups from individual files. A visual distinction between these types of items will help make it easier for users who are browsing with your app. Be sure to include a text label for the placeholder that is either the name of the folder or the criteria used to form the group of files.
  • If you can't retrieve a thumbnail for an item (like a file, folder, or file group), display a placeholder image.
  • Display file info in addition to thumbnail images when providing previews for document and music files. This lets users identify key information about a file that may not be readily available from a thumbnail image alone. For example, you might display the name of the artist for a music file along with a thumbnail showing the album art.
  • Don't display additional file info alongside thumbnails for picture and video files. In most cases, a thumbnail image is sufficient for users browsing through pictures and videos.

Additional usage guidelines

Recommended thumbnail modes and their features

Display previews forThumbnail modesFeatures of the retrieved thumbnail images
Pictures
Videos
picturesView
videosView
Size: Medium, preferably at least 190 (if the image size is 190 x 130)
Aspect ratio: Uniform, wide aspect ratio of about .7 (190 x 130 if the size is 190)
Cropped for previews
Good for aligning images in a grid because of uniform aspect ratio
Documents
Music
documentsView
musicView
listView
Size: Small, preferably at least 40 x 40 pixels
Aspect ratio: Uniform, square aspect ratio
Good for previewing album art because of the square aspect ratio
Documents look the same as they look in a file picker window (it uses the same icons)
Any single item
(regardless of file type)
singleItem
Size: Large, at least 256 pixels on the longest side
Aspect ratio: Variable, uses the original aspect ratio of the file

 

Tip  The features of thumbnail images for different modes might become even more specific in the future. To account for this, we recommend that you specify the thumbnail mode that most closely describes the kinds of files you want to display previews for. For example, if you want to display video files you should use the videosView thumbnail mode (unless you're displaying a single video file, in which case, use the singleItem mode).

Why use recommended thumbnail modes?

Here are examples showing how retrieved thumbnail images differ depending on file type and thumbnail mode.

Item type

When retrieved using:

When retrieved using:

When retrieved using:

Picture

A picture thumbnail image.

The thumbnail is cropped to a square aspect ratio.

A cropped, picture thumbnail image.

The thumbnail image uses the original aspect ratio of the file.

A picture thumbnail image.

Video

The thumbnail has an icon that differentiates it from pictures.

A video thumbnail image with a video adornment.

The thumbnail is cropped to a square aspect ratio.

A cropped, video thumbnail image.

The thumbnail image uses the original aspect ratio of the file.

A video thumbnail image.

Music

The thumbnail is an icon on a background of appropriate size. The background color is determined by the app associated with the file. (If the associated app is a Windows Store app, the app's tile background color is used.)

A screen capture of an icon for a music file that has  the associated app color in the background

If the file has album art, the thumbnail is the album art. Otherwise, the thumbnail is an icon on a background of appropriate size. The background color is determined by the app that is associated with the file. (If the associated app is a Windows Store app, the app's tile background color is used.)

An album art image.

If the file has album art, the thumbnail is the album art and uses the original aspect ratio of the file. Otherwise, the thumbnail is just an icon.

An album art image.

Document

The thumbnail is an icon on a background of appropriate size. The background color is determined by the app that is associated with the file. (If the associated app is a Windows Store app, the app's tile background color is used.)

A screen capture of a document icon that has  the associated app color in the background

The thumbnail is an icon on a background of appropriate size. The background color is determined by the app that is associated with the file. (If the associated app is a Windows Store app, the app's tile background color is used.)

A screen capture of a document icon that has  the associated app color in the background is retrieved

The document thumbnail, if one exists.

A screen capture of the thumbnail of a document.

Otherwise, the thumbnail is an icon.

A screen capture of a document icon

Folder

If there is a picture file in the folder, the picture thumbnail is used.

A picture thumbnail image.

If the folder doesn't contain a picture, no thumbnail is retrieved.

No thumbnail image is retrieved.

The thumbnail is a icon that represents a folder.

An image of the folder glyph

File group

If there is a picture file among the files in the group, the picture thumbnail is used.

A picture thumbnail image.

If the file group doesn't contain a picture, no thumbnail is retrieved.

If there is a file that has album art among the files in the group, the thumbnail is the album art.

An album art image.

If no album art exists in the file group, no thumbnail is retrieved.

If there is a file that has album art among the files in the group, the thumbnail is the album art and uses the original aspect ratio of the file.

An album art image.

Otherwise, the thumbnail is an icon that represents a group of files.

An image of the file group icon.

 

Related topics

ThumbnailMode enumeration
StorageItemThumbnail class
StorageFile.GetThumbnailAsync

 

 

Show:
© 2014 Microsoft