How to Create Social Media Preview Images from Web Pages with Screenshot.rocks

To make a social media preview image from a webpage with Screenshot.rocks, capture the page, place it in a browser or phone frame, set a canvas to the dimensions for the destination, then export. For an Open Graph link preview, Screenshot.rocks recommends a 1200 × 630 px canvas. Its online URL capture shows only the first screen of a public page; use a browser capture for a logged-in page, local or staging site, or full-page image.

This guide covers the Screenshot.rocks workflow, image sizes, formats, privacy, browser-capture alternatives, and common fixes. For automated captures in code or AI-agent workflows, see ScreenshotNeo.

1. Choose the image shape for its destination

Pick the destination before capturing. The canvas shape determines what survives platform resizing or cropping. Screenshot.rocks’ guide, updated 24 September 2026, recommends these sizes. Treat them as the guide’s recommendations; platform display rules can change, so check the platform’s current help if a crop looks unexpected.

Destination	Recommended canvas	Shape	Practical note
Open Graph / link preview	1200 × 630 px	1.91:1	Useful for previews in services such as Slack, iMessage, LinkedIn, and Facebook.
X post	1600 × 900 px	16:9	The guide also lists 1200 × 675 px as an option.
LinkedIn landscape post	1200 × 627 px	1.91:1	Close to the Open Graph shape, but set the exact canvas for the intended use.
LinkedIn or Instagram portrait post	1080 × 1350 px	4:5	Portrait uses more vertical feed space.
LinkedIn or Instagram square post	1080 × 1080 px	1:1	A flexible square option.
Stories and Reels	1080 × 1920 px	9:16	Keep important content away from the top and bottom where controls may appear.
Product Hunt gallery	1270 × 760 px	About 5:3	The guide recommends keeping each gallery image under 3 MB.

These are not interchangeable sizes. A 16:9 image placed in a 1.91:1 preview may be trimmed at the top and bottom; a tall image may be cropped in a landscape feed. If you need several placements, export one canvas per shape rather than relying on a platform to crop a single master image.

2. Capture the webpage with Screenshot.rocks

1. Open the Screenshot.rocks website screenshot tool.
2. Enter the public page URL. The tool says you can omit https://.
3. Choose desktop for a desktop layout, or select Mobile for a phone layout.
4. Capture the page. The result is the first screen, the area a visitor sees before scrolling.
5. In the editor, choose a frame and background, then set the canvas dimensions for your destination.
6. Adjust the screenshot’s position and scale inside the canvas. The canvas changes the exported dimensions; it does not stretch the screenshot to fit.
7. Export the image and inspect it at the destination size.

The website tool lists desktop capture at a 1440 × 800 layout and 2× density, producing 2880 × 1600 pixels. Its mobile capture uses a 375 × 812 layout at 3× density, producing 1125 × 2436 pixels. These are source captures; set the separate export canvas to the final sharing dimensions.

Choose a frame and composition

A browser frame signals that the image shows a website. A phone frame suits a mobile layout or portrait composition. Keep the web content large enough to recognize at feed scale: the point of the preview is usually to communicate the page, not to show every section. Use the editor’s scale and placement controls to create room around the screenshot or intentionally crop its edges.

If the screenshot already contains browser tabs or toolbars, crop those away before adding a browser frame. Otherwise the image can look like a browser inside another browser. Use a clean, short address in the frame if the domain helps identify the page; hide the address for unreleased work or when it adds clutter.

3. Select an export format

Format	Use it when	Trade-off
PNG	The image contains text, interface details, or sharp edges.	Lossless and crisp, but often larger than JPEG or WebP.
JPEG	A smaller file is useful, especially for photo-heavy artwork or an upload limit.	Does not support transparency; compression can soften text edges.
WebP	You are publishing the image on your own website or documentation.	Often smaller than PNG at similar quality; confirm that your downstream platform accepts it.
SVG	A destination explicitly needs an SVG file.	Screenshot.rocks’ SVG contains the finished image; it does not gain detail when enlarged.

Screenshot.rocks exports at the canvas dimensions you set. Its editor supports PNG, JPEG, WebP, and SVG. For a social upload, verify both the required dimensions and any file-size or format limits at the destination; a format that works on your site may not be accepted by every social composer.

4. Handle pages the online capture cannot reach

The URL capture runs remotely as a first-time visitor. It cannot see behind a login, reach a private local address such as localhost, or reliably capture a site that blocks automated browsers. It also captures only the first screen, not the full scrolling page.

• Logged-in page or a specific interaction state: open the page in your own browser, sign in, and prepare the state you want. Screenshot.rocks’ browser extension captures the visible part of the current tab. The documented Chrome and Edge permission is activeTab; the captured tab is sent to the editor and Screenshot.rocks says it is not stored.
• Local or staging page: capture it from a browser that can reach that address, then import the image into the editor. A remote URL capture service cannot reach a machine-local address.
• Whole scrolling page: use your browser’s built-in full-page screenshot and import the resulting file. Screenshot.rocks documents full-page capture in Chrome, Firefox, Edge, and Safari. On iPhone, its guide says full-page captures save as PDF.
• Mobile layout in your own session: use browser device mode or the extension with the page open in your own browser. Reload after switching device dimensions if the site only chooses its responsive layout at page load.

For a single social card, a full-page capture is often less readable because the page becomes tiny when fitted into the canvas. Capture the page section that communicates the main idea, or use the first screen unless the lower-page content is essential.

5. Check the image before sharing

• Confirm the exported file has the intended width, height, and aspect ratio.
• Preview it at roughly the size people will see in a feed or link card. Small text that is legible in the editor may disappear when scaled down.
• Check that the page is not covered by a cookie notice, sticky header, chat bubble, or newsletter prompt.
• Make sure the chosen crop shows the page’s identifying content. A full-page image can be technically complete but too small to read.
• Look for private information, account details, or unreleased data in logged-in captures before posting.
• Upload it to the target platform or page and inspect the rendered preview, since platform layouts and crops can change.

Privacy: what gets sent where?

Privacy depends on how you create the image. Screenshot.rocks says images dropped, pasted, or selected in its editor are processed in the browser and are not uploaded or stored. Its optional URL capture sends the address for remote rendering; its extension sends the current tab capture to the editor. Screenshot.rocks says those captures are not stored. See its editor and privacy details and homepage.

For sensitive pages, consider taking the screenshot locally and importing the file, then review the final image for secrets before sharing. A local editing workflow does not make a public social post private: anyone who can view the post can see the pixels in the exported image.

Common problems and fixes

Problem	Likely cause	Fix
URL capture fails	The address is mistyped, the page is slow, or the site blocks automated browsers.	Check the URL and retry. If it remains inaccessible, capture the page in your own browser and import the image.
Only the top of the page appears	The online URL tool captures the first screen by design.	Use browser-native full-page capture or capture a specific section yourself.
Login page appears instead of the target page	The remote capture is not signed in to your account.	Open the page in your own browser and use the extension or a local screenshot.
Localhost or staging address is unreachable	The remote capture server cannot access your private machine or network.	Capture from a browser with access to the site, then import the screenshot.
Images or lazy-loaded content are missing	The page loads those assets only after scrolling or interaction.	In your browser, scroll through the page to trigger loading, return to the desired view, then capture. If necessary, capture a smaller section.
Cookie banner, chat widget, or sticky header covers the content	The overlay is part of the page state at capture time.	Dismiss it before capturing from your own session. For an inaccessible automated capture, switch to a browser workflow where you can control the page.
The image looks cropped in a feed	The canvas aspect ratio does not match the destination placement.	Export a canvas for that destination, such as 1200 × 630 for an Open Graph preview, and inspect the platform-rendered result.
The page looks stretched or has empty margins	Changing canvas dimensions does not change the screenshot’s proportions.	Reposition or scale the screenshot within the canvas; preserve its proportions and use the background to fill unused space.
Text is blurry	The source capture was too small or the destination resized it.	Start with a sufficiently high-resolution capture and export at the intended display dimensions. Avoid enlarging an SVG export expecting more screenshot detail.
A full-page capture is clipped or fails	Very tall pages can exceed browser image limits.	Capture the relevant section or split the page into smaller captures.
Private information appears in the image	The capture includes account data, tokens, or user-specific content.	Remove or obscure the information in the source before capture, and inspect the flattened export before publishing.

Performance, reliability, and cost considerations

The Screenshot.rocks URL tool is useful for quick public first-screen captures. It avoids setting up a browser automation project for a one-off image, but the workflow depends on the remote browser reaching and rendering the page. Login walls, local networks, anti-automation restrictions, slow pages, and dynamic content can make this route unsuitable. For those cases, a browser session you control gives you access to the needed state, though full-page images can be large and very tall captures may hit browser limits.

For repeatable social assets, standardize the canvas dimensions, frame, background, and capture state, then inspect representative outputs before making a batch. Reusing a consistent composition reduces manual adjustments. Export only the formats you need, and check each target’s current upload limits rather than assuming a single file format or size works everywhere.

Screenshot.rocks describes its editor and website capture as free and says no account is needed for the website tool. For an API workflow, ScreenshotNeo’s pricing is different: its free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots, with larger plans available. Its stated billing rule is that only clean shots are billed; bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server for developers. A GET request can return a PNG, JPEG, WebP, or PDF. Use its documented API parameters for full-page capture, viewport and device settings, waits, CSS selectors, custom CSS or JavaScript, cookies and headers, and other capture behavior. See the ScreenshotNeo API documentation.

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 require('node:fs/promises').writeFile('shot.webp', Buffer.from(await res.arrayBuffer()));

These examples capture the target page directly. To produce a social preview composition with a frame, background, and chosen canvas, place the resulting screenshot in your image editor or generate the composition in your own pipeline.

• Cookie and consent banners, popups, and chat widgets are removed before the shot; each cleanup step can be turned off.
• Bot checks, blank pages, and failed loads are never billed. Responses identify the page verdict and billing status in headers.
• An MCP server lets AI agents, including Claude and Cursor, take screenshots with the take_screenshot, get_page_info, and capture_pdf tools.
• 1,000 screenshots a month are free with no card; paid plans start at $5 for 3,000.

Create a free ScreenshotNeo account to get 1,000 screenshots per month with no card.

FAQ

What is the best size for an Open Graph image?

Screenshot.rocks’ September 2026 guide recommends 1200 × 630 pixels. Check the destination preview because platforms can change how they display and crop images.

Can Screenshot.rocks make a full-page social image from a URL?

The online URL capture shows the first screen. Capture a full page with your browser, then import that image if you need the whole page.

Can I capture a page that is behind a login?

Use your own browser session and capture the visible tab or save a local screenshot. The remote URL capture does not have your login session.

Should I export PNG or JPEG?

PNG is a strong default for interface text and crisp edges. JPEG can reduce file size when the image is photo-heavy or the destination has a strict limit.

Sources

• Screenshot.rocks website capture tool
• Screenshot sizes for X, LinkedIn, Instagram, and more
• Screenshot mockup generator, export formats, and privacy
• Screenshot.rocks browser extension
• Full-page screenshot instructions by browser