How to Create Website Preview Images for a Squarespace Portfolio

To create a website preview image for a Squarespace portfolio, first decide where it needs to appear. Use a project’s featured image for its on-site portfolio representation. If a shared project link needs a different image, add an alternate social sharing image in that project’s settings. In Squarespace 7.1, you can set both; then save and publish the project and check its crop on desktop and mobile.

A social sharing image is intended for a shared page URL, but the service receiving the link decides what it displays. A featured image and a social image are separate settings, and one image may not be the best composition for both contexts. See Squarespace’s guides to Portfolio pages, featured images, and social sharing images.

1. Choose which preview image you need

Where the image appears	Squarespace setting	What to consider
Portfolio grid, collection, or other on-site representation	Featured image	Make the subject recognizable at thumbnail size; keep important details away from edges that may be cropped.
Link card when someone shares the project URL	Social image in the project settings	Choose a composition suited to a shared link. The receiving platform may select from available images and controls its own preview behavior.
Both contexts	Featured image and, if useful, a separate social image	Use one image only if it works at both sizes and crops. Otherwise, prepare a separate version for sharing.

The site’s social sharing logo is a site-wide identity setting; it is not the same thing as an alternate social image for an individual portfolio project.

2. Add a featured image and social image in Squarespace 7.1

1. In the Squarespace web interface, open Pages and select the portfolio page.
2. Add a project or open the existing one. In its project settings, use the General tab to add the project title and featured image.
3. If the link preview should use a different image, open Social image in the project settings and upload that image.
4. Save the project. New projects are drafts by default; publish when the content is ready for visitors.
5. Open the project page and inspect its image. Adjust the focal point if the subject is off-center, and review the mobile presentation as well as desktop.

Squarespace’s current portfolio documentation describes 7.1 projects as pages made from sections. If the site is version 7.0, project-page behavior depends on the template and legacy controls; consult the version 7.0 project page guide rather than expecting the 7.1 steps and settings in the same places.

3. Prepare an image that survives responsive crops

Squarespace creates responsive image versions. Its image-formatting guide lists widths of 100, 300, 500, 750, 1000, 1500, and 2500 pixels, and describes 2500 pixels as ideal for most images. That is a general recommendation, not a required thumbnail width or a guarantee that every layout uses the same crop. The same guide lists JPG, GIF, PNG, and WebP as accepted formats, with a 20 MB file-size limit and a 120-megapixel resolution limit. Squarespace recommends keeping image-block files at 500 KB or less for faster loading and notes that images narrower than 1500 pixels may look blurry. Keep the original image files locally.

• Make the subject legible when small. A detailed image may look good on the project page but become unclear in a compact portfolio tile.
• Leave breathing room around the subject. Avoid putting essential text or a logo close to the edge, where a responsive crop could remove it.
• Match the image shape to the display area. Shape mismatch is a common source of unwanted cropping. When one image must serve multiple shapes, compose with the likely crops in mind.
• Set the focal point. Use Squarespace’s focal-point control to move the visual center toward the important subject. The visible result still depends on the layout and its container.
• Inspect mobile separately. Responsive layouts can position or crop images differently. On Fluid Engine pages, check the mobile layout as well.

For legacy 7.0 project pages, Squarespace says images are not enlarged beyond their original dimensions and recommends at least 2500 pixels wide for full-bleed use. This applies to that legacy use case; it is not a universal minimum for 7.1 portfolio thumbnails. See Using focal points, Add and resize images, and Troubleshooting cropping issues.

4. Review the page and shared-link preview

1. Save the project and publish it when it is ready to be public.
2. View the portfolio page at desktop and mobile widths. Check that the subject remains visible in the tile and that the crop communicates the project clearly.
3. Open the individual project page and confirm the selected image and focal point work in its layout.
4. Share the project URL in the intended social or messaging service and inspect the resulting card. Services may choose among available images and may cache previews; Squarespace’s documentation does not promise identical image selection or a cache refresh interval across services.

Squarespace’s built-in image resizer can prepare files using presets and common social aspect ratios before upload. It cannot resize an image that has already been uploaded to the site. For managing portfolio pages and projects, use the web interface: the official portfolio guide says the Squarespace app cannot add portfolio pages or edit projects.

5. Troubleshooting

What you see	Likely cause	What to do
The portfolio tile shows the wrong image or no image	The featured image has not been set, or the project is not saved.	Open the project’s settings, add or replace its featured image, save, and confirm the project is published if visitors need to see it.
The shared link shows a different image from the portfolio tile	The featured image and social image serve different placements; the receiving service may select an available image.	Set the project’s Social image if a separate share composition is needed, then inspect the link in the intended service. Do not assume every service displays the same image.
The main subject is cut off	The image and display container have different shapes, or the focal point is poorly placed.	Adjust the focal point, choose a more suitable composition, or prepare a crop closer to the display shape. Recheck desktop and mobile.
An image looks blurry	The source may be too small for its rendered size.	Use a higher-resolution original. Squarespace says images narrower than 1500 pixels may appear blurry and describes 2500 pixels as ideal for most images, while noting that sizing needs depend on placement.
The new project or image is not visible to visitors	The project may still be a draft.	Publish it when ready, then revisit the public project page.
The social card has not changed after an image update	The receiving platform may be showing a cached or otherwise selected preview. Cache timing is platform-specific.	Verify that the project is published and its Social image is saved. Check the link in the target service and consult that service’s current sharing-preview guidance for refresh controls.
The app does not offer the portfolio editing control	Portfolio project editing is limited in the Squarespace app.	Use Squarespace’s web interface to add portfolio pages or edit projects.

6. Performance and reliability considerations

Use a source image with enough resolution for its display size, but avoid uploading unnecessarily large files. Squarespace generates responsive versions, while its image-block guidance recommends files of 500 KB or less for faster loading. Keep the original locally so you can make a different crop or replace a compressed upload later.

Check both image roles after edits: the featured image controls the on-site representation, while the Social image is for link sharing. Verify the actual public page after publishing, and treat the final appearance inside a social or messaging service as dependent on that service. Do not rely on one preview screenshot as proof that every platform or viewport will show the same crop.

7. Capture consistent preview images with ScreenshotNeo

If you need to create or review website preview images from a URL in a repeatable workflow, ScreenshotNeo is a website screenshot API and MCP server for developers, made by Yorker Media. For a Squarespace portfolio, first publish the page you want to capture and use its public URL. A screenshot can help you inspect how the page renders; it does not replace setting the project’s featured image or social image in Squarespace.

Or skip the browser setup

One GET request can return a website screenshot. See the ScreenshotNeo API documentation for the request options.

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

import requests

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

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://your-site.com/portfolio/project'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await import('node:fs/promises').then(({ writeFile }) =>
  writeFile('shot.webp', new Uint8Array(await res.arrayBuffer()))
);

• Cookie and consent banners are accepted like a visitor; more than 60 known consent platforms, newsletter popups, and chat widgets are removed before the shot. Each of these steps can be turned off.
• Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing. Responses include X-Page-Verdict and X-Billed headers to say what happened and whether the shot was billed.
• An MCP server lets AI agents, including Claude, Cursor, and other MCP clients, use take_screenshot, get_page_info, and capture_pdf.
• The free plan includes 1,000 shots per month with no card. Paid plans start at $5 for 3,000 shots; every feature is on every plan.

Sign up free for 1,000 screenshots a month with no card.

FAQ

Can I use the same image for the portfolio tile and shared link?

Yes. Use one image if its composition works in both placements. Set a separate Social image when the shared-link crop needs a different composition.

Does the social image guarantee what every platform will show?

No. Social and messaging services control how they select and display link previews. Check the target service for its current behavior.

Can I edit portfolio projects in the Squarespace app?

The official portfolio guide says adding portfolio pages and editing projects are not available in the app; use the web interface.

Is 2500 pixels required for every portfolio image?

No. Squarespace calls 2500 pixels ideal for most images, while the legacy 7.0 full-bleed recommendation is specific to that use. Choose a source that suits the image’s placement and rendered size.