# Screenshots

Progressive Web App screenshots enable richer installation UI. As shown below, by default only the application name and short name are visible.

<figure><img src="https://3862332541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpSZFHgui9yHpPUCsIOQh%2Fuploads%2Fgit-blob-c526a7502d343cd3c367c656cd8be65bd877c008%2FCapture%20d&#x27;%C3%A9cran%202024-01-31%20193350.png?alt=media" alt=""><figcaption><p>GitHub installation UI</p></figcaption></figure>

However, by including screenshots in the web app manifest, the installation experience can be significantly improved. These screenshots give users a visual preview of the app, enhancing their understanding and increasing the likelihood of installation.

Screenshots should showcase the most important functionalities of your application and be of high quality to attract users.

In the example below, a selection of screenshots are visible and the user can navigate to show them all. On mobile devices, the interface is different, but shows the same information.

<figure><img src="https://3862332541-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpSZFHgui9yHpPUCsIOQh%2Fuploads%2Fgit-blob-c6ba8c48a747192cefc6da8a69dbae0ceaf340d5%2FCapture%20d&#x27;%C3%A9cran%202024-02-01%20101647.png?alt=media" alt=""><figcaption></figcaption></figure>

## Generating Screenshots

The recommended way to manage screenshots is using the `#[Screenshot]` PHP attribute on your controller methods. This approach automatically generates screenshots and integrates them into your manifest.

{% content-ref url="../image-management/screenshots" %}
[screenshots](https://pwa.spomky-labs.com/image-management/screenshots)
{% endcontent-ref %}

## Manifest Parameters

When screenshots are added to the manifest (either automatically via attributes or manually), the following parameters are available:

### `src` Parameter

See the description [on the `icon` page](https://pwa.spomky-labs.com/icons#src-parameter).

Ensure that the screenshots you provide are of high quality. Crisp and clear images can make a significant difference in how users perceive your app.

### `type` Parameter

This parameter is similar to [the `format` parameter for the icons](https://pwa.spomky-labs.com/icons#type-parameter).

### `label` Parameter

The label parameter provides a way to give a brief description or caption for the screenshot. This helps users to understand what the feature or screen is about before they have installed the app.

### `platform` Parameter

The `platform` parameter specifies which operating system the screenshot is intended for.

Possible values include:

* Device platform identifiers:
  * `"android"`
  * `"chromeos"`
  * `"ipados"`
  * `"ios"`
  * `"kaios"`
  * `"macos"`
  * `"windows"`
  * `"xbox"`
* Distribution platform identifiers:
  * `"chrome_web_store"`
  * `"itunes"`
  * `"microsoft-inbox"`
  * `"microsoft-store"`
  * `"play"`

### `form_factor` Parameter

The `form_factor` parameter defines the intended device form factor for your screenshots.

Possible values:

* `"narrow"`: For narrow screen devices, like phones.
* `"wide"`: For wider screen devices, such as tablets or desktops.

{% hint style="info" %}
When using the `#[Screenshot]` attribute, `form_factor` is automatically calculated based on the screenshot dimensions.
{% endhint %}