Thumbnails
Stump uses thumbnails to display images of your media throughout the app. By default, Stump will pull the first image from a media file to use as a thumbnail. However, you can customize this behavior per-library by configuring the thumbnail generation settings
Thumbnail Generation
The generation of thumbnails is controlled by the configuration options for a library. These options include:
- Explicitly sizing each thumbnail (height and width in pixels)
- Scaling both dimensions of each thumbnail by a factor (e.g., 0.5)
- The format to encode the thumbnail in (e.g., JPEG, PNG, WebP)
- The quality of the encoding (e.g., 0-1.0)
Thumbnail generation is optional, and you can disable it entirely if you prefer to use the default image as a thumbnail.
Please note that when thumbnail generation is enabled, you may not opt out of placeholder color processing, as the two features are somewhat intertwined.
The advantage of configuring thumbnail generation is that it allows you to minimize the size of thumbnails being sent to the client, which greatly improves performance. Otherwise, the full-size image would be sent to the client, which can be very large and slow to load.
Image Candidacy
When generating thumbnails, Stump will use the very first image it encounters in the media file as the thumbnail.
Supported Formats
Generation
Stump supports generating thumbnails to and from the following formats:
- JPEG
- PNG
- WebP
You should ensure that your browser supports the format you plan to use. You can visit the following links to check:
Display
Stump supports the following formats for displaying thumbnails, in addition to the above:
The reason for this separation is that while Stump supports rendering these on the UI, there is no process to convert them.
Thumbnail Placeholder Colors
The mobile app supports progressive loading of thumbnails by first displaying a placeholder based on the dominant colors of a thumbnail image. This is totally optional if you aren’t opting into generating thumbnails, but can visually improve the look and feel of the app.
If you choose to enable this feature, Stump will compute the dominant colors of each thumbnail image during generation and store them in the database. While the thumbnail is being loaded on the client, a placeholder will be displayed using these colors and presented in one of three supported styles:
- Average Color: A single color placeholder based on the average color of the thumbnail image
- Colorful: A tvOS-like placeholder using multiple dominant colors from the thumbnail image
- Thumbhash: A low-resolution placeholder generated using the Thumbhash algorithm
If you choose to disable this feature, a default gray placeholder will be used instead.
These placeholders are currently only supported by the mobile app. The web app does not yet support them. If you would like to see this feature added to the web app, please let me know and I can try to prioritize it
Management
Thumbnail management can be done in either the settings page associated with a particular entity or in the settings page for the library as a whole. For example:
/books/{bookId}/manage/series/{seriesId}/settings/libraries/{libraryId}/settings
Thumbnail Selection
You have the option to manually select an image as a thumbnail. This is useful when either the automatic selection is incorrect or when you want to use a special image. The selection is done on a media file, so if you are selecting for a:
Library: You will select a particular series, then a particular book, then a particular pageSeries: You will select a particular book, then a particular pageBook: You will select a particular page
You may also upload a custom image to use as a thumbnail.
Regeneration
You have the ability to regenerate thumbnails in a given library’s settings page. The options are:
- Generate only missing thumbnails
- Force regenerate all thumbnails
Deletion
You can delete a thumbnail in a given library’s settings page. This will remove all thumbnails associated with the library and its entities.