Generate Screenshots
Last updated
Last updated
By adding app screenshots that showcase your app's features and functionality on its store listing page, you can help your app attract new users on the Apple App Store and Google Play Store. They are a requirement of the publishing process.
To generate app screenshots, the instructions vary depending on whether you are able to create a responsive web app or not.
To generate screenshots using a responsive web app:
Publish your app as a responsive web app. See instructions here: Responsive Web App
Copy the Web App URL link.
Open the link in Google Chrome.
Click the vertical ellipsis in the upper right of your Chrome browser to access Chrome Settings.
Click More Tools.
Click Developer Tools to view the app in developer mode.
In the top left-hand corner of the developer tools, click the icon that looks like a laptop and a phone.
Use the drop-down menu at the top of the screen to select different devices and screen orientations.
Refresh your screen each time you select a new device to ensure the selection is applied to your responsive web app.
If the device you need isn't listed, click Edit... at the bottom of the selection list and add additional devices as necessary.
Alternatively, if you know the device dimensions, select Responsive from the device menu and enter the dimensions manually.
To generate the screenshot, click the vertical ellipsis to the left of the developer's tools console.
Click Capture screenshot.
Repeat for required devices.
We recommend that you create a folder on your computer to save and organize all of the assets you will require for publishing your app.
Publish your app as a mobile web app.
Capture a screenshot of your mobile web app. You don't need to worry about the grey border.
Use a design tool such as AppMockUp to create all the required screenshots.
Here is a list of screenshot sizes you need to publish to the App Store.
To get all of the screenshot sizes you need, create screenshots using the following device settings. Each device name will be followed by its corresponding screen size in the screenshot doc linked above.
iPhone X (5.8 inch screenshots)
iPhone 6/7/8 Plus (5.5 inch screenshots)
iPad Pro (12.9 inch screenshots - suitable for iPad Pro 3rd gen and iPad Pro 2nd gen screenshots described in doc)
5.8 inch screenshots are used as an alternative to 6.5 inch screenshots. There are two ways to upload these iPhone X screenshots to your App Store listing:
Upload 5.8 inch screenshots in Media Manager
When you look at your screenshot upload window, you will see the text ‘View All Sizes in Media Manager’. Click here. In the iOS tab, you will see a segment that says ‘6.5-inch display’. At the bottom of this segment you will see the text ‘5.8-inch display’. Next to this, you will see a checkbox with the text ‘Use 6.5-inch Display’. Uncheck this box and expand the ‘5.8-inch Display’ segment. Click on ‘Choose File’, and upload your 5.8-inch screenshots.
Resize 5.8 inch screenshots to 6.5 inch screenshots
Use an image editor of your choice to resize your iPhone X screenshots from 1125 x 2436 pixels (5.8-inch Display) to 1242 x 2688 pixels (6.5-inch Display). Upload your new 6.5-inch screenshots to the App Store.
