How to Make Website Thumbnails for a Design Studio Portfolio on Framer

To make website thumbnails for a design studio portfolio on Framer, add an image field to the project CMS collection, upload an image for each project, and bind each portfolio card’s image layer to that field. Choose a consistent crop or preserve each image’s original proportions, then preview several CMS items at desktop and mobile sizes. Set a separate CMS-driven social preview image in the page settings if shared project links need a different image.

In Framer, “thumbnail” can mean two different things: the image displayed inside a portfolio card, or the social preview image shown when someone shares a project URL. They can use the same source image, but they serve different placements and can be configured independently.

1. Add an image field to the project collection

Open the CMS collection that holds your portfolio projects.
Add an Image field, for example, Cover image.
Upload or select an appropriate image for every project item.
Check that each item has the intended image before building the card layout.

A CMS image field gives each project its own image value. It also lets you select a project image as a social preview later. Framer’s workflow for CMS social previews uses an Image field populated on each item. See Framer’s instructions for page titles, descriptions, and social images.

2. Bind the portfolio card image to the CMS field

Open the page with your portfolio Collection List.
Select the image layer inside the collection item or card component.
Use the image control’s CMS connection to bind it to Cover image (or the field you created).
Preview more than one project item and confirm that the image changes with the CMS record.

If an image is placed statically on a CMS template without connecting it to a field, it can repeat across project pages. The binding is what makes the card image vary per item. Framer documents the image connection workflow in its CMS collection guidance.

3. Choose a crop or preserve each image’s proportions

There is no universal portfolio-card size or ideal aspect ratio. Choose based on the images and layout, then check the result at the actual card dimensions.

Approach	Works well when	Check before publishing
Fixed aspect ratio in a frame	You want a tidy grid where every card has the same image shape.	Important subjects and interface details remain visible after cropping.
Preserve original dimensions	Images have varied compositions and showing the full image matters more than uniform card heights.	The resulting cards still fit the surrounding layout cleanly.

Framer identifies portfolio galleries as a suitable use for fixed-ratio images. If preserving original dimensions is important, use a custom image component that keeps the original proportions and connect it to the CMS image field. For either approach, prepare images with a consistent visual treatment and keep the main subject inside the visible crop.

A card thumbnail appears in your page layout. A social preview is page metadata used by services such as X, LinkedIn, Slack, and messaging apps. A project may use its cover image for both, or use a different image for sharing.

Open the CMS page’s Page Settings.
Find Page images → Social preview.
Choose CMS Variables, then select the image field to use.
Repeat or verify the setting for the CMS pages where the preview should apply.
Use Framer’s Link Preview tool to inspect the result.

Framer recommends a social-preview format of 1200 × 630 pixels and keeping important content centered so it remains visible when services crop the image. That guidance is for sharing previews; it does not establish a required size for portfolio cards. See Framer’s social image guidance.

5. Choose image delivery quality and resolution

Start with Framer’s Auto resolution for most images. Framer says Auto creates multiple sizes so the browser can choose an appropriate one. Fixed width choices are available if you have a specific need:

Option	Width	When to consider it
Small	512 px	A specific smaller delivery size is needed.
Medium	1024 px	A specific mid-sized image is needed.
Large	2048 px	A larger fixed image is needed.
Auto (Lossless)	Automatic	Visible compression artifacts, noise reduction, or banding are a problem and larger files are acceptable.

Framer says Auto (Lossless) files may be 5–10× larger. Use it selectively after inspecting the images; larger files can take longer to download. Framer says fixed sizes are rarely needed for most images. Details are in Framer’s image optimization documentation.

6. Preview the portfolio and shared links

Before publishing, check a representative set of projects rather than only the first CMS item:

Confirm each card pulls the intended project image.
Check the crop and focal point at the actual card size.
Review spacing and card heights across images with different compositions.
Check the portfolio at mobile and desktop widths.
Use Framer’s Link Preview tool to inspect the social image for a project URL.

If a social platform continues showing an older image after you republish, Framer notes that external caching is a usual cause. First confirm the image Framer serves with Link Preview. The platform may take time to refresh its cached copy.

Or skip the browser setup

If you need a rendered screenshot of a live portfolio page or project URL, ScreenshotNeo can capture it with one API request. It is a website screenshot API and MCP server for developers. This call saves the screenshot response as a WebP file; see the ScreenshotNeo API documentation for 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}`);
const bytes = new Uint8Array(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', bytes));

Replace the example URL with a published project or portfolio URL. Store your API key securely and do not put it in client-side page code. ScreenshotNeo removes cookie and consent banners, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and the response includes X-Page-Verdict and X-Billed headers. Its MCP server provides take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots. All features are on every plan. Learn more at ScreenshotNeo.

Troubleshooting

The same image appears on every project card

Cause: The image layer uses a static image rather than a CMS field connection, or it is bound to the wrong field. Fix: Bind the card image to the project’s Image field and preview multiple CMS items.

A project has no thumbnail

Cause: Its CMS image field is empty or the wrong field is connected. Fix: Populate the image field for that item, then check the binding and preview again.

The crop cuts off the important part

Cause: The fixed-ratio frame and image focal point do not work together. Fix: Adjust the crop or focal point, prepare a better-centered source image, or use a component that preserves the original proportions.

Portfolio cards have inconsistent heights

Cause: Images with different proportions are being shown at their natural dimensions. Fix: Use a consistent frame ratio for the grid, or accept varied card heights as a deliberate layout choice.

The shared link shows the wrong image

Cause: The social preview is not set to the intended CMS variable, or the platform is showing a cached preview. Fix: Check the CMS image field and Page Settings selection, then inspect the result in Framer’s Link Preview tool. If Framer shows the correct image, allow for external cache refresh.

The image looks soft or has visible artifacts

Cause: The delivered resolution or compression is not suitable for the displayed size and image content. Fix: Start with Auto; if visible compression artifacts remain, try Auto (Lossless) and account for its potentially larger file size.

Performance, reliability, and cost considerations

Page loading: Avoid choosing a fixed resolution larger than the layout needs. Auto is Framer’s recommended starting point for most images; lossless delivery can make files 5–10× larger.
Consistency: A fixed ratio simplifies grid alignment, while original proportions retain each image’s full composition. Preview actual cards to decide which serves the portfolio best.
Social previews: Keep important content centered in the recommended 1200 × 630 format and verify the served result with Link Preview. External caches can delay visible changes.
Screenshot capture: A screenshot of a published page records what the page renders at capture time; it does not replace the CMS image binding or social metadata setup. If capturing many URLs, ScreenshotNeo supports bulk capture of up to 100 URLs per call, caching with a chosen TTL, and asynchronous jobs with signed webhooks. Only clean shots are billed.
Cost: Framer image resolution choices affect file size and delivery; the cited documentation does not establish a universal portfolio image cost. For ScreenshotNeo, 1,000 shots per month are free without a card. Paid plans are Starter $5 for 3,000, Growth $15 for 15,000, Pro $39 for 60,000, Scale $99 for 250,000, and Business $249 for 1,000,000; yearly billing gives two months free.

FAQ

How do I set a different thumbnail for each Framer CMS project?

Add an Image field to the project collection, populate it per item, and bind the portfolio card image layer to that field.

They can be the same, but they serve different placements. Use a separate CMS image field or selection when a project needs a distinct image for shared links.

What size should a Framer portfolio thumbnail be?

Framer’s cited guidance does not define one universal card size or ratio. Choose a ratio for the layout and check the crop at the actual card size. For social previews, Framer recommends 1200 × 630 pixels.

Can ScreenshotNeo create the Framer CMS thumbnail automatically?

It can capture a rendered URL as an image, but the CMS field still needs to be populated and connected in Framer. Use it when a screenshot of the live page is the image you want to use.