For a project thumbnail in your own Webflow portfolio, add an Image field to a Projects Collection, upload a thumbnail for each project, and connect the field to an image element in your Collection List or Collection Page. A social-share preview, a Made in Webflow showcase thumbnail, and a Certified Partner profile highlight are separate placements with different settings and image requirements.
Webflow’s documented workflow is general; no India-specific thumbnail dimensions or platform rules are established. You can follow these steps from India, but choose dimensions based on where each image will appear.
As an Amazon Associate I earn from qualifying purchases.
Choose which thumbnail you are making
“Thumbnail” can mean several different images. Decide where yours will appear before preparing it; a crop designed for a project card may not suit a social preview or a Webflow showcase.
| Placement | Where to set it | Key requirement |
|---|---|---|
| Project card on your own portfolio | Projects Collection image field, connected to the card design | Fit the image to the card’s crop and layout; there is no single required size for every design. |
| Social link preview | Page settings > Open Graph settings | Set a page-specific image; Collection pages can use a CMS Image field, and images in that Collection must have matching dimensions. |
| Made in Webflow showcase | Showcase submission | 540 × 360 pixels; JPEG, PNG, or static GIF. The site must be published to its webflow.io subdomain. |
| Certified Partner profile highlight | Partner profile | Displays at 984 × 625 pixels; Webflow recommends source images at 2× or 4× those dimensions for retina displays. |
Create thumbnails for project cards
- Create or open a Projects Collection. In the Webflow CMS, use a Collection for repeatable project entries. Add an Image field, for example, “Thumbnail.” Each Collection item can then have its own image.
- Prepare and upload each image. Upload an image directly to the item’s Image field. Webflow’s CMS Image field documentation lists a 4 MB maximum per image. For meaningful project imagery, consider adding a separate alt-text field and connecting it to the image’s alt text.
- Connect the field to the card. In the Designer, select an image element inside the Collection List or Collection Page and set “Get image from” to the Thumbnail field. You can also bind a CMS image to a section or div background.
- Choose image element or background deliberately. An image element is generally easier to give useful alternative text. Use a background when the image is decorative or part of a visual treatment; do not rely on background-only imagery to convey essential project information.
- Check the crop at the actual card size. Keep the important part of the screenshot inside the visible crop, and preview desktop and mobile breakpoints. The right crop depends on your card dimensions and composition; Webflow does not prescribe one universal project-card ratio.
- Publish and inspect. Publish to the domain where the portfolio will be viewed, or preview on staging first. Confirm that the Collection item is published and the image remains clear at the rendered size.
Set a separate image for social previews
Open Graph metadata controls the title, description, and image that services such as Facebook, LinkedIn, and X may show when a page is shared. In Webflow, open Pages panel > Page settings > Open Graph settings and set the metadata for the page. Webflow advises using settings specific to each page.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Use CMS images on Collection pages
For a Collection page, choose a CMS Image field for the Open Graph image. Webflow says all Open Graph images in a Collection must have matching dimensions, so prepare a consistent set rather than mixing arbitrary sizes.
Choose a compatible format
Webflow’s Open Graph guidance describes JPG and PNG in the asset picker and says a WebP image may be supplied by URL, with support varying by platform. Its Assets guidance separately warns that AVIF and WebP are not supported for Open Graph images. For the most dependable picker workflow, use JPG or PNG. Avoid AVIF for social previews; if using WebP by URL, test the result on each target platform before relying on it.
Rank #2
Webflow’s Open Graph article, updated September 7, 2026, cites Facebook’s recommendation for an image at least 1080 pixels wide. This is vendor guidance reporting Facebook’s recommendation, not a universal size requirement for all social services; check the target platform’s current guidance if exact dimensions matter.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Refresh stale previews
After publishing, inspect the page with the preview or sharing debugger for the platform you care about. If it still shows an older image, refresh that platform’s cached scrape using its debugger. Webflow warns that without Open Graph settings, a share may show random content or no content.
Prepare images for Webflow showcase and partner profiles
Made in Webflow showcase
Webflow specifies a 540 × 360-pixel thumbnail in JPEG, PNG, or static GIF format for a Made in Webflow showcase. Animated GIFs are not supported. The site must be published to its webflow.io subdomain to be showcased; unpublishing it removes the showcase. This thumbnail belongs to the showcase surface, not automatically to the project card on your own portfolio.
Certified Partner profile highlight
A Certified Partner profile can use a Made in Webflow site or a manually uploaded highlight image. The image displays at 984 × 625 pixels; Webflow recommends supplying a source at 2× or 4× those dimensions for retina screens. This guidance applies to the partner profile, not every portfolio thumbnail.
Rank #4
Balance image quality, performance, and social sharing
Webflow creates responsive variants for images uploaded directly through the Assets panel or a CMS Image field, allowing browsers to select an appropriate size. Its responsive-image documentation excludes images added by CSV or API from this automatic variant creation.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware match- Start with an image large enough for its intended display, but avoid unnecessarily oversized files: they take longer to upload and download and can slow a page.
- Use direct Assets-panel or CMS-field uploads when you want Webflow’s automatic responsive variants.
- Webflow’s asset tools can convert images to WebP or AVIF for site use. Conversion replaces the original and cannot be reversed in place, so keep a backup before converting and republish after the change.
- Keep a suitable JPG or PNG version for Open Graph use where compatibility is the priority. Do not assume the best format for an on-page image is also the safest format for every social preview.
Or skip the browser setup
If you need screenshot files for your project cards, ScreenshotNeo can return a website screenshot with one GET request. For example, save this cURL response as a WebP file:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo documentation for API setup and options. Cookie banners, newsletter popups, and chat widgets are removed before capture; those cleanup steps can be turned off. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and each response identifies the page verdict and billing status. An MCP server provides screenshot tools 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.
Sign up for 1,000 free screenshots a month with no card.
Quick Recap
Troubleshoot common thumbnail problems
- The image does not appear in a card: confirm that the CMS item is published, the image field contains an upload, and the image element is connected to the intended field with “Get image from.” Then republish and inspect the live page.
- The crop hides the important subject: adjust the image composition or card’s image fitting and focal treatment, then inspect at desktop and mobile sizes. The card’s shape, not a universal Webflow dimension, determines the crop.
- The social preview shows the wrong or no image: check the page’s Open Graph settings, publish the page, and refresh the target platform’s cached preview. For Collection pages, check that the CMS image is selected and that the Collection images share dimensions.
- A converted image is unsuitable for social sharing: Webflow’s asset conversion replaces the original. Restore a backup or upload a JPG/PNG copy for Open Graph; keep the source original separately before future conversions.
- Responsive variants are missing: verify that the image was uploaded directly through Assets or a CMS Image field. Images imported through CSV or API are excluded from the documented automatic variant generation.
- A showcase submission does not appear: verify the 540 × 360 image format and dimensions, ensure the site is published to its webflow.io subdomain, and check that it has not been unpublished.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
