screenshots manifest member

Limited availabilityNot supported in Safari (iOS), Safari (macOS), Firefox (Desktop)W3C

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.

{
  "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.

{
  "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.

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
• icons manifest member
• Richer install UI: enriching the install prompt with description and screenshots
• beforeinstallprompt and custom install prompts
• Web App Manifest - Application Information: screenshots member (w3.org)
• Richer install UI available for desktop (developer.chrome.com)

Specifications

Specification	Status
Web App Manifest: screenshots	W3C

• Legend
• Yes
• Partial
• Flag
• No
• Unknown

Browser / Platform	Support	Versions	Confidence	Source	Notes
Chrome (Android)	Yes	94	medium	source	1
Chrome (Desktop)	Yes	105	medium	source	—
Edge (Desktop)	Yes	105	medium	source	—
Safari (iOS)	No	—	medium	source	2
Safari (macOS)	No	—	medium	source	3
Firefox (Desktop)	No	—	medium	source	4
Samsung Internet	Yes	17.0	medium	source	—

1. Drives the richer install dialog on Android.
2. Parsed but not used in the Add to Home Screen flow.
3. Safari ignores the `screenshots` member; it has no richer install UI that would display them (MDN compatibility table, checked 2026-10-03).
4. Desktop Firefox does not install web apps from the manifest, so `screenshots` has no consumer (MDN compatibility table, checked 2026-10-03).

Ecosystem & commercial policy

Entity	Type	Context	Status	Sponsored	Notes
Google Play (TWA)	store_policy	Google Play TWA	Yes	No	Store listing screenshots are managed in Play Console, separate from the manifest member.

Source data: /compatibility/manifest-screenshots.json · Global usage: 72 % (StatCounter 2026-05)

Source: spec · MDN · Last verified 2026-06-24 · Confidence: medium (computed from sources)