# screenshots manifest member

> The screenshots member lists wide or narrow images that Chrome 94 on Android and Chrome 105 on desktop show in the richer install dialog; Safari ignores it.

`screenshots` is an array of image resources that show the app in use. Browsers with a richer
install dialog render them as a carousel next to the `description`; app stores that package web
apps copy them into the listing. Without the member the install prompt is the compact one with
icon, name, and origin only.

Chrome 94 on Android and Chrome 105 on desktop (with Edge 105 and Samsung Internet 17.0) read the
member and switch to the richer dialog when at least one screenshot fits the device (BCD
`html.manifest.screenshots`). Safari 27 on iOS and macOS parses the array and uses nothing from
it in the Add to Home Screen or Add to Dock flow, and Firefox 157 on desktop installs no web apps
from the manifest.

## Member

- **Type**: array of image-resource objects. Each has `src` (URL, resolved against the manifest),
  `sizes` (`WIDTHxHEIGHT` in pixels), optional `type` (`image/png`, `image/jpeg`, `image/webp`),
  optional `form_factor` (`"wide"` for desktop and landscape tablets, `"narrow"` for phones), an
  optional `label` read by assistive technology, and an optional `platform` hint for stores.
- **Default**: an empty array; the browser shows its compact install prompt.
- **Example value**: `[{ "src": "/shots/home.png", "sizes": "1080x1920", "type": "image/png",
  "form_factor": "narrow", "label": "Today's tasks" }]`.

Chromium applies limits per form factor. The desktop dialog takes screenshots tagged `wide`, at
most 8; the Android dialog takes screenshots tagged `narrow` or untagged, at most 5; every
screenshot must be between 320 and 3840 pixels on each side and keep the aspect ratio of the first
screenshot with the same `form_factor`, or it is skipped. A `sizes` value that does not match the
decoded image is also skipped. The desktop dialog only appears when a `wide` screenshot exists, so
a manifest with only phone screenshots keeps the compact prompt on Windows and macOS.

Screenshots are fetched when the install dialog opens, not at page load, so their weight does not
touch the page's loading metrics; they do need to be served with the same caching discipline as
icons because Chrome does not re-fetch them until the next manifest update.

:::observed
Chrome 155 on macOS 26 (English UI), DevTools > Application > Manifest, with a manifest whose
only screenshots carry `"form_factor": "narrow"`: the **Screenshots** section lists them and the
**Errors and warnings** section reads `Richer PWA Install UI won't be available on desktop. Please
add at least one screenshot with the form_factor set to wide.` Adding a 1280×800 `wide` entry and
reloading removes the line, and the omnibox install dialog gains the carousel.
:::

## Examples

The first two examples are manifests; the third shows what a page can do with the install prompt
when it wants to echo the same imagery.

### Serving both the desktop and the phone dialog

One `wide` and two `narrow` screenshots satisfy both Chromium dialogs. The `wide` image keeps a
16:10 ratio and the two `narrow` images share 9:19.5, which is the same-ratio rule applied per
form factor.

```json
{
  "screenshots": [
    {
      "src": "/shots/desktop-overview.png",
      "sizes": "1280x800",
      "type": "image/png",
      "form_factor": "wide",
      "label": "Dashboard with the week's totals and a chart of spending by category"
    },
    {
      "src": "/shots/phone-today.png",
      "sizes": "1080x2340",
      "type": "image/png",
      "form_factor": "narrow",
      "label": "Today view listing three open tasks"
    },
    {
      "src": "/shots/phone-add.png",
      "sizes": "1080x2340",
      "type": "image/png",
      "form_factor": "narrow",
      "label": "Add-task sheet with amount and category fields"
    }
  ]
}
```

Order matters within a form factor: the first entry fixes the aspect ratio the others must match,
and it is the one shown before the user scrolls.

### Writing labels that stand in for the image

`label` is the only text a screen reader gets for a screenshot, and stores reuse it as a caption.
Describe what the screen shows, not the fact that it is a screenshot.

```json
{
  "screenshots": [
    {
      "src": "/shots/phone-map.webp",
      "sizes": "1170x2532",
      "type": "image/webp",
      "form_factor": "narrow",
      "label": "Map of the route from Oslo to Bergen with the next stop highlighted"
    }
  ]
}
```

A label such as `"Screenshot 1"` passes validation and tells the user nothing; Chrome reads the
string verbatim.

### Mirroring the screenshots in a custom install button

Nothing at runtime reports whether the browser rendered the richer dialog. What a page can do is
defer the prompt with `beforeinstallprompt` and show its own preview using the same images, then
call `prompt()` so the browser's dialog (richer or compact) follows. Browsers without the event
take the fallback branch and show nothing.

```js
let deferredPrompt = null;

window.addEventListener('beforeinstallprompt', (event) => {
  event.preventDefault();
  deferredPrompt = event;
  document.querySelector('#install').hidden = false; // the button shows the same /shots/ images
});

document.querySelector('#install').addEventListener('click', async () => {
  if (!deferredPrompt) return; // Safari, Firefox: no prompt to show, leave the button hidden
  deferredPrompt.prompt();
  const { outcome } = await deferredPrompt.userChoice;
  deferredPrompt = null;
  console.log(`install ${outcome}`); // "accepted" or "dismissed"
});
```

Reuse the manifest's `/shots/` files in the button's preview rather than a second set, so the
preview and the browser dialog stay in step.

## See also

- [description manifest member](/reference/manifest/description/)
- [icons manifest member](/reference/manifest/icons/)
- [Richer install UI: enriching the install prompt with description and screenshots](/reference/installation/richer-install-ui/)
- [beforeinstallprompt and custom install prompts](/reference/installation/install-prompt/)
- [Web App Manifest - Application Information: screenshots member](https://www.w3.org/TR/manifest-app-info/#screenshots-member) (w3.org)
- [Richer install UI available for desktop](https://developer.chrome.com/blog/richer-install-ui-desktop) (developer.chrome.com)