How to Make a Website Screenshot Thumbnail at iPhone Dimensions

To make a website screenshot thumbnail at iPhone dimensions, first choose a specific iPhone viewport or enter a custom width and height, then capture the visible browser viewport at that size. Set the pixel ratio if your tool supports it, check the exported image’s pixel dimensions, and crop or resize afterward only if the thumbnail destination requires a different shape. There is no single dimension that represents every iPhone.

For a one-off capture, Chrome DevTools or Safari Responsive Design Mode is enough. For repeatable screenshots, Playwright can emulate a chosen device profile. These previews are useful for thumbnails and design reviews, but they do not prove that a page renders exactly as it would on an iPhone.

1. Choose the iPhone viewport and thumbnail goal

Before capturing, decide what the requested dimensions mean:

A model-specific preview: select the intended iPhone profile in your browser or automation tool. Record the profile name and settings so another person can reproduce it.
A custom viewport: use the requested width and height. If no model was specified, describe the result as a custom mobile viewport rather than “the iPhone size.”
A destination thumbnail: capture the viewport first, then crop or resize to the required thumbnail dimensions. A crop changes the composition; it does not change the original viewport that was captured.

Keep viewport dimensions separate from exported image dimensions. A viewport describes the browser’s layout area. Pixel ratio can affect the output resolution and resolution-dependent page behavior, so set it deliberately where available and inspect the saved file.

2. Capture a viewport screenshot in Chrome

Open the page in Chrome and open DevTools.
Turn on the Device Toolbar.
Select a device preset or enter the required custom width and height.
Set the device scale factor if the toolbar exposes it and sharpness matters.
Wait for the page to finish loading and for any important images or fonts to appear.
Open the DevTools command menu and choose Capture screenshot for the visible viewport.
Choose Capture full size screenshot only if you need the entire page, including content below the viewport.

Chrome’s responsive presets include widths such as 320, 375, and 425 CSS pixels. They are convenient starting points, not universal iPhone dimensions. Device Mode simulates the mobile experience from a desktop browser; it does not run your site on an actual phone. See Chrome’s Device Mode documentation.

3. Preview with Safari Responsive Design Mode

In Safari, enable the Develop menu if it is not already visible.
Choose Develop → Enter Responsive Design Mode.
Select a preset or edit the viewport width and height to match the requested target.
Adjust Pixel Ratio when you need to inspect density-dependent behavior or output sharpness.
Capture the visible viewport using your chosen screenshot workflow, then inspect the exported file.

Safari describes its viewport presets as approximations. When rendering fidelity matters, validate with Simulator or a real iPhone rather than relying on desktop preview alone. Apple’s guide explains Responsive Design Mode and its limits.

4. Automate repeatable captures with Playwright

Playwright lets you configure a browser context with device settings and save a screenshot. Install Playwright and its Chromium browser first:

npm init -y
npm install -D playwright
npx playwright install chromium

Save this as screenshot.mjs, replace the URL and viewport values, then run node screenshot.mjs:

import { chromium, devices } from 'playwright';

const browser = await chromium.launch();
// Use a named profile where appropriate, or define the requested viewport explicitly.
const context = await browser.newContext({
  viewport: { width: 390, height: 844 },
  deviceScaleFactor: 2,
  isMobile: true,
  hasTouch: true,
});
const page = await context.newPage();
await page.goto('https://example.com', { waitUntil: 'networkidle', timeout: 60000 });
await page.screenshot({ path: 'iphone-viewport.png' });
await browser.close();

Use a named device profile when it matches your target and your installed Playwright version provides that profile. Otherwise, state the custom viewport and device scale factor explicitly. The example captures the viewport; use fullPage: true when the deliverable should include the full document:

await page.screenshot({ path: 'full-page.png', fullPage: true });

Playwright’s emulation guide describes the context settings available for device behavior, viewport, screen size, and touch. Emulation still is not a substitute for checking a real iPhone when exact browser behavior matters.

5. Check the result and prepare the thumbnail

Inspect the saved file’s actual width and height. Do not assume the CSS viewport dimensions equal the PNG’s pixel dimensions.
Check that the important subject is visible in the viewport. If the thumbnail uses a different aspect ratio, decide what should be cropped before resizing.
Use a crop when composition must change; use a resize when the whole captured image should remain visible at a different output size.
Check text and fine details at the size people will actually see the thumbnail.
Keep the original capture if you expect to revise the crop or output dimensions later.

6. Common problems and fixes

Problem	Likely cause	Fix
The screenshot is the wrong shape.	The capture used full-page mode, a different viewport, or a later crop.	Confirm the width and height before capture. Use viewport capture for what fits on screen, then crop separately if the thumbnail needs another aspect ratio.
The image has fewer or more pixels than expected.	Viewport size and device pixel ratio are different settings.	Set the scale factor or Pixel Ratio intentionally and inspect the exported file dimensions.
The page layout differs from the iPhone.	Desktop emulation approximates a device and may not reproduce Safari or hardware behavior exactly.	Use Safari Responsive Design Mode for a WebKit preview, then validate in Simulator or on hardware if fidelity is important.
Images are missing or the page looks unfinished.	The capture happened before delayed content loaded, or the page depends on scrolling or interaction.	Wait for a specific element or a suitable load condition, increase the timeout when appropriate, and trigger required page interactions before capture.
Playwright reports a navigation timeout.	The site is slow, keeps network connections open, or never reaches the selected load condition.	Use a longer timeout and wait for a page-specific selector or a less strict navigation event instead of assuming network idle is always reached.
The automated capture is blank or blocked.	The site may require authentication, reject automation, or show a bot check.	Check the page manually, supply the permitted authentication state or headers, and verify that the target page is accessible to the capture browser.

7. Performance, reliability, and cost

Manual browser capture has almost no setup cost and is efficient for an occasional image. Automation takes installation and maintenance, but makes repeated captures easier to reproduce and can process a batch through your own workflow. Capture only the viewport when the thumbnail needs only the screen: full-page screenshots can require more scrolling and image loading.

For reliable automation, use a stable target URL, record the viewport and scale factor, wait for a meaningful page condition, and retain enough timeout for slow pages. Dynamic ads, rotating banners, fonts, and personalized content can make two captures differ even when the browser settings are identical. Validate the final image rather than treating a successful screenshot call as proof that the page was complete.

Browser tooling does not require a paid editor just to produce a dimensioned capture. Cost comes from the infrastructure and engineering time needed to run automated browsers at scale. If you need a hosted screenshot API instead, ScreenshotNeo is a website screenshot API and MCP server. Its free plan includes 1,000 shots a month without a card; paid plans start at $5 for 3,000 shots. See ScreenshotNeo for the product details.

Or skip the browser setup

ScreenshotNeo accepts a URL in one API request and returns an image or PDF. This example captures the visible viewport; see the ScreenshotNeo API docs for device, viewport, full-page, output-format, and other options.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await Bun.write('shot.webp', res);

Cookie banners are accepted and removed before the shot, along with known consent platforms, newsletter popups, and chat widgets; each cleanup step can be turned off. Bot checks, blank pages, failed loads, timeouts, and cache hits are never billed, and response headers identify the page verdict and billing status. An MCP server lets AI agents use screenshot tools. The free plan includes 1,000 screenshots each month with no card; paid plans start at $5 for 3,000.

Create a free ScreenshotNeo account to get 1,000 screenshots a month without a card.

Frequently asked questions

Should I use the iPhone’s physical resolution as the browser width?

Use the browser viewport requested for the target, not a device’s physical display pixel count by default. Pixel ratio connects logical layout dimensions with rendered pixels, and the exported file should be checked separately.

Should a thumbnail show the whole webpage?

Only if the thumbnail is meant to summarize the entire page. A viewport screenshot shows the initial screen; a full-page image includes content beyond it and may be too tall to read at thumbnail size.

Can a desktop preview guarantee the result on every iPhone?

No. Browser emulation is a practical preview. Use Simulator or an actual device to check behavior that depends on iOS, Safari, hardware, or device-specific features.

What should I write in a handoff?

Include the selected model or custom viewport, scale factor, whether the capture is viewport or full-page, and any crop or resize applied afterward.