> ## Documentation Index
> Fetch the complete documentation index at: https://docs.livepeer.org/llms.txt
> Use this file to discover all available pages before exploring further.

# Get an asset thumbnail

> Learn how to retrieve thumbnails for a video asset

For video assets we provide a way to retrieve a list of thumbnails for your
video assets. Thumbnails will be generated as part of the asset processing, with
each "segment" (which is roughly every 3 seconds) of video resulting in one
image.

Follow the steps below to find out how to use this.

## Upload an asset

Follow our previous guide on
[uploading an asset](/developers/guides/upload-video-asset) and get the
`playbackId`.

<Info>
  Any assets uploaded after November 21st, 2023 will have thumbnails generated
  for them. If the asset was uploaded before then, it will need to be
  re-imported to create thumbnails.
</Info>

## Fetch playback info

Once the processing has completed for your asset, fetch the playback info using
the [playback info API endpoint](/api-reference/playback/get).

Example response:

```json theme={"theme":{"light":"github-light","dark":"dark-plus"}}
{
  "type": "vod",
  "meta": {
    "playbackPolicy": null,
    "source": [
      {
        "hrn": "HLS (TS)",
        "type": "html5/application/vnd.apple.mpegurl",
        "url": "https://vod-cdn.lp-playback.studio/raw/jxf4iblf6wlsyor6526t4tcmtmqa/catalyst-vod-com/hls/95c9ih1y6tl97xbx/index.m3u8"
      },
      {
        "hrn": "Thumbnails",
        "type": "text/vtt",
        "url": "https://vod-cdn.lp-playback.studio/raw/jxf4iblf6wlsyor6526t4tcmtmqa/catalyst-vod-com/hls/95c9ih1y6tl97xbx/thumbnails/thumbnails.vtt"
      }
    ]
  }
}
```

You should see an entry in the `source` array with the type `text/vtt`. This
file uses the [WebVTT format](https://w3c.github.io/webvtt/) to represent the
thumbnails associated with each time point in the video.

This format was chosen with the use case of thumbnail scrubbing in mind, to
allow a player to overlay thumbnail images as the user is seeking through a
video, but it allows more general usage of selecting a desired time in your
video and fetching a thumbnail for it.

<Info>
  This will always have a `hrn` of `Thumbnails` and `type` of `text/vtt`.
</Info>

## Download the VTT file

Fetch the VTT file from the URL above.

```vtt theme={"theme":{"light":"github-light","dark":"dark-plus"}}
WEBVTT
00:00:00.000 --> 00:00:10.000
keyframes_0.jpg

00:00:10.000 --> 00:00:20.000
keyframes_1.jpg

00:00:20.000 --> 00:00:29.000
keyframes_2.jpg
```

## Show a thumbnail

Use one of the JPG paths to download a thumbnail. As an example if your VTT URL
is:

```
https://vod-cdn.lp-playback.studio/catalyst-vod-com/hls/ac906f1cs0oe9rb1/thumbnails/thumbnails.vtt
```

You can get the first frame of the video from:

```
https://vod-cdn.lp-playback.studio/catalyst-vod-com/hls/ac906f1cs0oe9rb1/thumbnails/keyframes_0.jpg
```

This is a pattern that can be used for any asset to get a preview thumbnail.

<Info>
  Since these coincide with a "segment" (roughly every 3 seconds), the index (in
  the example above, `keyframes_0.jpg`) can be varied depending on your apps
  use-case. These can be used to form reliable preview images for an asset.
</Info>