Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →For project thumbnails on a Webflow portfolio, create or use a Projects CMS Collection, add an Image field for each project, upload a screenshot or other project image, then connect that field to an image element in your Collection List or Collection Page. The right image size depends on where it will appear: a project card, social-share preview, Made in Webflow showcase, and Certified Partner profile each have different requirements. Webflow’s documented workflow is general; no India-specific thumbnail rule is established here.
First, decide which thumbnail you mean
“Website thumbnail” can mean several different images. Choose the destination before preparing your file, because the same image may not crop or meet the format requirements for every placement.
| # | Preview | Product | Price | |
|---|---|---|---|---|
| 1 |
|
Certificates Case Template Leather Pattern Leather Template for Bag Wallet (Acrylic) | $12.99 | Buy on Amazon |
- Portfolio project card: An image displayed on your own portfolio site. For repeatable project entries, a CMS Image field is usually the simplest way to manage it.
- Social-share preview: The image shown when someone shares a page link. Configure it separately in that page’s Open Graph settings.
- Made in Webflow showcase: A thumbnail shown on Webflow’s showcase surface, with its own specified dimensions and publishing requirement.
- Certified Partner profile highlight: An image shown on a partner profile, also with its own display dimensions.
There is no single universally correct portfolio thumbnail size in the available Webflow guidance. Match the card’s shape and focal content in your design, and use the documented dimensions when submitting to a Webflow property.
Create thumbnails for a Webflow portfolio project grid
1. Prepare a project image
Capture or create an image that makes the project recognizable at the size your portfolio card will actually display. Check that the important content remains visible when the image is cropped to the card’s shape, including at mobile breakpoints. There is no documented universal crop that fits every portfolio layout, so preview your own design rather than assuming one aspect ratio will work everywhere.
#1 Best Overall
- NOTE: NO INSTRUCTION, beginners need experienced people to guide the completion.
- Template material: PAPER (The material is paper, please stay away from fire and water)
- Finished product:Certificates Case
- Finished product size:3.39x5.90x0.78inch(100x150x20mm)
- Leather types:The thickness of the outer skin is about 1.5mm thickness.The endothelium uses about 1.0mm thickness.Vegetable tanned leather or crazy horse
If you use a screenshot, capture the page you want visitors to associate with the project. Review it for visible cookie banners, popups, or chat widgets, and make sure the page has finished loading before saving the image.
2. Add a CMS Image field
- In Webflow’s CMS, create a Projects Collection or open the Collection you already use for portfolio entries.
- Add an Image field with a clear name such as “Thumbnail.” A Webflow CMS Image field upload is limited to 4 MB per image, according to Webflow Help Center guidance from 2025.
- Open each project item and upload its thumbnail to that field. Webflow supports drag-and-drop or file upload for the image.
If project images need meaningful alternative text, add a separate text field for that purpose and connect it to the image’s alt text in the design. Write text appropriate to each image rather than using the same generic description for every project.
3. Connect the image to the design
- Open the Collection List or Collection Page where the thumbnail should appear.
- Select an image element and use its “Get image from” control to choose the Thumbnail field.
- If the image is decorative or part of a visual treatment, you can instead bind the CMS image to a section or div background. For meaningful project imagery, an image element is generally easier to provide with context-appropriate alt text.
4. Publish and check the result
Publish the site to the intended domain, or preview it on Webflow staging first. Check that the relevant Collection item is published, then inspect the card at desktop and mobile widths. Confirm that the image is present, its focal content is not cut off, and the rendered image remains legible at the card’s actual size.
Set a separate image for social-share previews
Open Graph settings control 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 image for the relevant page. Webflow advises making Open Graph settings specific to each page.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
For Collection pages, you can select a CMS Image field as the Open Graph image. Webflow says all Open Graph images in a Collection must have matching dimensions. Its current Open Graph guidance cites Facebook’s recommendation for an image at least 1080 pixels wide; treat that as vendor guidance reported by Webflow, not a universal requirement for every social service.
There is a format compatibility caveat in Webflow’s guidance: its Assets panel documentation warns that AVIF and WebP are not supported for Open Graph images, while its Open Graph article says WebP works on many popular platforms but support can vary. For the dependable asset-picker workflow, use JPG or PNG. If you want to use a URL-based WebP image, validate the preview on each target platform before relying on it; avoid AVIF for social previews based on Webflow’s explicit warning. After publishing, inspect the share preview and use the target platform’s debugger or refresh control if it is showing a cached older image.
Use the right dimensions for Webflow showcase placements
Made in Webflow showcase
Webflow specifies a 540 × 360 pixel thumbnail in JPEG, PNG, or static GIF 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. These requirements apply to that showcase, not to project cards on your own portfolio.
Certified Partner profile highlight
A Certified Partner profile highlight displays at 984 × 625 pixels. Webflow recommends supplying a source image at 2× or 4× those dimensions for retina displays. This guidance is specific to the profile surface; it is not a general requirement for CMS thumbnails.
Free tools Windows power users keep installed
One-click scans. No signup required.
Keep images sharp without making the page unnecessarily heavy
Webflow automatically creates responsive variants for images uploaded directly through the Assets panel or a CMS Image field, so browsers can select an appropriate size. Its responsive-image guidance excludes images added by CSV or API from that automatic variant creation. If you import images that way, do not assume the responsive variants will be created automatically.
Start with an image suited to its displayed use instead of uploading an unnecessarily oversized file. Webflow says oversized images can take longer to upload and download and may slow a page. Webflow’s asset tools can convert images to WebP or AVIF, but conversion replaces the original and cannot be reversed in place. Keep a backup of the original before converting, and republish after conversion. Preserve a suitable JPG or PNG for Open Graph use if needed.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
For a source screenshot, ScreenshotNeo can return a website capture with one GET request. It can accept cookie or consent banners and remove more than 60 known consent platforms, newsletter popups, and chat widgets before capture; those steps can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the page verdict and billing status in headers. Its MCP server provides screenshot tools for AI agents, including Claude, Cursor, and other MCP clients.
Use an image editor or your own workflow to crop the resulting capture for the Webflow card; the request below captures the page and saves the returned image as a WebP file. See the ScreenshotNeo API documentation for usage details.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython:
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)Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);Replace the example URL with the site you want to capture and provide your API key. ScreenshotNeo has 1,000 screenshots per month free with no card; paid plans start at $5 for 3,000. Learn about ScreenshotNeo or sign up for 1,000 free screenshots a month with no card.
Common problems and fixes
- The thumbnail does not appear on a card: Check that the Collection item is published, the image was uploaded to the expected CMS field, and the image element is connected to that field.
- The image looks cropped incorrectly: Adjust the source crop or the card’s image treatment, then inspect it at the actual desktop and mobile breakpoints. A social-preview image or Webflow showcase image is not guaranteed to fit your card crop.
- The social preview shows an old or missing image: Confirm the page’s Open Graph image is set, publish the change, then refresh the target platform’s cached scrape using its preview or debugger.
- An Open Graph image does not appear as expected: Use JPG or PNG for the asset-picker workflow. If using WebP by URL, test on the specific social service because support may vary; avoid AVIF for this use based on Webflow’s warning.
- Imported images lack responsive variants: Webflow’s documented automatic variant creation applies to direct uploads through Assets or CMS Image fields, not CSV or API imports. Use a direct upload where possible or otherwise account for responsive image handling.
- A converted asset cannot be restored: Webflow conversion replaces the original. Restore from your own backup, then re-upload if you need the previous format.
What changes for creators in India?
The Webflow thumbnail guidance above is not India-specific. The available documentation does not establish a local image size, legal requirement, or separate workflow for India-based creators. Use the same placement-specific settings, publish to the domain you intend to share, and check the published result from the devices and social services relevant to your audience.
Quick Recap
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.
