How to Create Website Thumbnails for a Portfolio on Webflow in India

For a portfolio project grid in Webflow, create a Projects CMS Collection, add an Image field for each project thumbnail, upload an image to every item, and connect that field to an image element in a Collection List or Collection Page. Publish and inspect the result at desktop and mobile sizes. A social sharing preview, a Made in Webflow showcase thumbnail, and a Certified Partner profile highlight are separate placements with separate settings and dimensions.

The workflow below applies to a creator in India using Webflow’s general CMS and publishing features; the available documentation does not identify India-specific thumbnail requirements. First decide where each image will appear, because one source image may not suit every crop or format.

1. Choose what “thumbnail” means

Before preparing images, identify the destination:

• Your portfolio project card: an image in your site’s Collection List, usually connected to a CMS Image field.
• A shared-link preview: the Open Graph image configured in page settings. Social platforms may show this when someone shares a page.
• Made in Webflow: the thumbnail for a site submitted to Webflow’s showcase. Its documented dimensions are 540 × 360 pixels.
• Certified Partner profile: a profile highlight displayed at 984 × 625 pixels. Webflow recommends source images at 2× or 4× those dimensions for retina displays.

These are not interchangeable requirements. Use the card’s actual shape and crop for your portfolio grid, and follow the destination’s own guidance for showcase and profile images.

2. Create project thumbnails with the CMS

1. Create or open a Projects Collection. In Webflow CMS, create a Collection for portfolio projects, or use your existing one. Collection items share a schema and use a common Collection Page template.
2. Add an Image field. Name it something clear, such as “Thumbnail.” Webflow’s Image field supports direct upload and has a 4 MB per-image limit.
3. Upload an image to each project item. Use drag-and-drop or the file picker. Keep the important subject inside the portion likely to remain visible when the card crops the image.
4. Connect the image in the design. In the Designer, select the image element inside a Collection List or Collection Page and use “Get image from” to bind it to the Thumbnail field. A CMS image can also be used as a section or div background.
5. Set meaningful alt text where appropriate. For informative project imagery, an image element makes it straightforward to provide context-appropriate alt text. If useful, add a separate plain-text alt field to the Collection and bind it to the image’s alt-text setting. A purely decorative background generally does not need to repeat information in alt text.
6. Check card layout at actual breakpoints. Use a consistent aspect ratio and focal treatment across the grid. Preview at the desktop and mobile breakpoints so the subject remains recognizable at the rendered size. There is no single documented crop that suits every portfolio layout.
7. Publish and review. Publish to the intended domain, and confirm the relevant CMS items are published. If using Webflow staging, review there first, then publish to the selected domain. Inspect a live project card and its mobile rendering.

Image element or background image?

Bind an image element when the image communicates what the project is; it is easier to give that image descriptive alt text. Use a background image when it is decorative or part of a visual treatment. For either option, check the crop in the actual card dimensions rather than assuming the original file will be shown uncropped.

3. Set a separate social sharing image

For a shared-link thumbnail, configure Open Graph metadata in Pages panel → Page settings → Open Graph settings. Set a title, description, and image that suit each page. On a Collection Page, the Open Graph image can come from a CMS Image field. Webflow says all Open Graph images in a Collection must have matching dimensions.

1. Open the page’s settings and locate its Open Graph fields.
2. Choose a page-specific image, or bind a Collection Page’s Open Graph image to a CMS Image field.
3. Keep Collection Open Graph images at consistent dimensions.
4. Publish the page, then inspect it with the target platform’s sharing preview or debugger. If the platform still shows an old preview, refresh its cached scrape using that platform’s available tool.

Format compatibility: JPG or PNG is the dependable choice for the Open Graph image picker workflow. Webflow’s documentation is not fully consistent: its Assets guidance warns that WebP and AVIF are not supported for Open Graph images, while its newer Open Graph guidance says many popular platforms support WebP but support varies. If you provide WebP by URL, validate it on every platform where the preview matters. Avoid relying on AVIF for social previews given Webflow’s explicit compatibility warning. Webflow’s Open Graph guidance reports a Facebook recommendation of at least 1080 pixels wide; verify current platform guidance before treating that as a requirement.

4. Prepare images for Webflow’s own showcase surfaces

Destination	Documented image guidance	Additional condition
Made in Webflow showcase	540 × 360 pixels; JPEG, PNG, or static GIF	The site must be published to its webflow.io subdomain to be showcased. Animated GIFs are not supported.
Certified Partner profile highlight	Displayed at 984 × 625 pixels; Webflow recommends source images at 2× or 4× for retina displays	This is a partner-profile placement, not the required size for ordinary project cards.

A Made in Webflow thumbnail belongs to the showcase listing, not automatically to the project cards on your portfolio site. Likewise, a Certified Partner profile highlight is a separate profile placement.

5. Optimize images without breaking previews

Webflow creates responsive variants for images uploaded directly through the Assets panel or CMS Image fields, allowing browsers to choose an appropriate size. According to Webflow’s responsive-image documentation, CSV and API imports do not receive those automatically generated variants.

• Choose a source image that is large enough for its displayed card, but avoid unnecessarily large files that take longer to upload and download.
• Direct uploads through Assets or a CMS Image field receive responsive variants. If importing by CSV or API, account for the documented difference.
• Webflow’s asset tooling can convert images to WebP or AVIF. Conversion replaces the original and cannot be reversed in place, so keep a backup first.
• Keep a suitable JPG or PNG source for social previews when compatibility matters. Webflow’s Assets guidance warns that AVIF and WebP are not supported for Open Graph images.
• After conversion, republish and check both the portfolio rendering and the share preview.

6. Troubleshoot common thumbnail problems

Symptom	Likely cause	What to check
A project card has no image	The CMS item has no image, the element is connected to the wrong field, or the item has not been published.	Open the item, confirm its Thumbnail field, check the image element’s “Get image from” binding, and publish the item and site.
The image looks badly cropped	The source composition does not fit the card’s aspect ratio or focal treatment.	Adjust the source composition or card’s image fitting and focal position, then review at the actual desktop and mobile breakpoints.
The shared link shows the wrong or no image	Open Graph settings are missing, point to the wrong asset, or the sharing service has a cached preview.	Check page-level Open Graph settings, publish, then refresh the target platform’s preview cache.
A Collection’s share images look inconsistent	Collection Open Graph images have different dimensions or compositions.	Use matching dimensions across the Collection and inspect the preview after publishing.
A WebP or AVIF preview fails on a social platform	Format support varies, and Webflow’s documentation contains an explicit compatibility warning for these formats in Open Graph images.	Use JPG or PNG for the picker workflow, or validate a URL-based WebP image on each target platform; avoid AVIF for this use.
A showcase image is rejected or unavailable	The image may have unsupported dimensions or format, or the site may not be published to its webflow.io subdomain.	For Made in Webflow, use 540 × 360 JPEG, PNG, or static GIF and publish to the webflow.io subdomain.
Converted asset looks wrong or the original is missing	Webflow’s asset conversion replaces the original and cannot be reversed in place.	Restore from your own backup, then republish. Keep originals before converting future assets.
Imported images lack responsive variants	The images may have been added through CSV or API import.	Webflow’s documentation excludes those imports from automatic responsive-variant creation; use direct uploads when you need that behavior.
Image upload fails	The CMS Image field limit is 4 MB per image, or the file is not accepted by the upload flow.	Check file size and format, optimize the image, and upload it again.

7. Performance, reliability, and cost

For a portfolio grid, use the CMS Image field and direct upload when it fits your workflow: Webflow documents responsive variants for those uploads, while oversized sources can take longer to upload and download. Check the rendered result after publishing, since the editor preview alone does not establish that the live page or share scraper sees the intended asset.

For social previews, treat image rendering as platform-dependent. Webflow notes that supported formats can vary; a JPG or PNG and a platform-specific preview check reduce format surprises. Keep an original before converting assets because conversion replaces it.

The dossier does not establish an India-specific Webflow price, image-hosting cost, or performance benchmark. No additional hardware or paid service is required by this CMS workflow. Webflow’s general documentation supports the same workflow for a creator in India, but does not describe a distinct regional setup.

8. Or skip the browser setup

If you need source screenshots of live websites for project cards, ScreenshotNeo is a website screenshot API and MCP server from Yorker Media. One GET request can return a PNG, JPEG, WebP, or PDF. Use a browser yourself to decide the exact crop and design; the screenshot API can provide the source capture.

See the ScreenshotNeo API documentation for parameters. This cURL example saves a WebP capture of Stripe:

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

The equivalent Python request:

import requests

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

And Node.js using built-in fetch:

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 the site you have permission to capture and store your API key securely. ScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before the shot; bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 shots. Sign up for 1,000 free screenshots a month with no card.

9. FAQ

Should I use one image for both a project card and social sharing?

You can, but the placements have different crops and format considerations. Check the card at its actual size and the published Open Graph preview separately.

Does being in India change the Webflow thumbnail dimensions?

The researched Webflow guidance does not identify India-specific dimensions or rules. Use the destination-specific Webflow guidance above.

Can a background image have alt text?

A CSS background is generally a visual treatment rather than an image element with a text alternative. If the image conveys project information, use an image element and provide appropriate alt text.

Do showcase dimensions apply to my own portfolio grid?

No. The 540 × 360 guidance is for a Made in Webflow showcase thumbnail. Your project card should match your own design.

Webflow references

• Webflow Help Center: Image field
• Webflow Help Center: Control the look of social shares with Open Graph
• Webflow Help Center: Responsive images
• Webflow Help Center: Assets panel
• Webflow Help Center: Showcase your site on Made in Webflow
• Webflow Certified Partner program