PWA Screenshots Generator & Editor

This screenshot creation tool is one of the many utilities available in Progressier, our all-in-one PWA toolkit. We made it available on this page for free, because we weren't satisfied with the existing alternatives. There are similar tools, but they tend to have features behind paywalls and/or add watermarks to your screenshots. With this tool, your screenshots are rendered without watermarks. And you get access to all our PWA screenshot creation features. As long as all you need is screenshots, it's completely free.

You can add screenshots to your app manifest to showcase your app in action. Screenshots are displayed during the installation process as part of the install prompt (see example). Screenshots are optional but a PWA that has screenshots tends to look more native and get more installs.

In your manifest, screenshots are an array of objects, each representing a single screenshot. You can see the parameters of the screenshot object here. You can use this tool to create, design and export screenshots. Host each of the screenshots on your server and link to their URL in your screenshot object array.

If you're using Progressier, your PWA screenshots are automatically hosted and added to your app manifest for you for free. Else, there are plenty of options for free hosting, e.g. Github.

PWA screenshots must be image files in either .PNG or .JPG format. JPG is generally a better format to use for PWA screenshots as they're smaller in size and will be fetched faster.

The tool includes mockups of an iPhone 13, iPad Pro, Google Pixel 6, Samsung Galaxy S22 as well generic unbranded phones.

By default, screenshots created with our tool are 1080x1920 pixels in .jpg format. The official specs don't require a specific size. The width and height of your screenshots must be at least 370px and at most 3840px. The maximum dimension can't be more than 2.3 times as long as the minimum dimension. So screenshots can be landscape, square or portrait. However, every screenshot in a set must have the same aspect ratio. Only JPG and PNG image formats are supported.

There isn't an actual limit per se. But displaying more than 6 or 7 is generally not recommended. Keep in mind that more screenshots means more image files for the browser to download and more images for you to manage.

The screenshots property of the app manifest does not directly allow you to configure different sets of screenshots for different languages. However, with Progressier, you can create multiple sets of screenshots to display when a specific language, a specific OS, or a combination of both, are in use.

In each screenshot in your app manifest, you can set the platform parameter to display different screenshots on different platforms. You can set the platform parameter to wide (for desktop and tablets) or narrow (for smartphones and wearables). It can also be set to more specific values, such as android, chromeos, ios, kaios, macos, windows and xbox for the screenshots to display on specific operating systems or to chrome_web_store, play, itunes, microsoft-inbox and microsoft-store for the screenshots to display on specific application distribution platforms.

Sure! After you've created the screenshots and exported them, you can upload the raw file of the project on this page again to pick up where you left off.

Not yet. Currently, screenshots are only displayed on Android. Although Google is currently testing more native-looking install prompts on desktop as well. You can enable the feature in Chrome Canary 105 by launching the browser with --enable-features=DesktopPWAsDetailedInstallDialog as a command line flag. If you're using the Progressier Install Page, your screenshots are displayed on both mobile and desktop.

Not necessarily, but they must all have the same aspect ratio. If they're in different aspect ratios, only screenshots that are in same aspect ratio as the first will be displayed.

This screenshot generator tool was created by Kevin Basset and Last updated 10 days ago.