How to Create Website Thumbnails for a Portfolio on Wix

To create website thumbnails for a Wix portfolio, add images to each portfolio project, choose one as its cover, then adjust the portfolio gallery layout and thumbnail settings in the editor. In a Wix Pro Gallery, open Settings > Layout > Customize Layout to change thumbnail size and spacing. Choose Crop for consistent shapes or Fit to show each entire image where the layout supports it. A project page’s cover image has separate sizing behavior controlled by its page layout.

1. Add an image to a Wix Portfolio project and set its cover

In your Wix site dashboard, open Portfolio and edit the project.
Click Manage Media beside Project Media, then choose + Add Media.
Choose a source. Depending on the project and editor, you can upload from your computer, import from the Media Manager or another Wix site, use a social network, or add a URL.
Select the image and choose Set as Cover.
Adjust the focal point if the important subject should sit elsewhere in the crop.
Add a clear title and description. For an image, write concise alt text that describes what it shows.
Click Done, then Save & Close.

Projects connected to integrations such as Instagram, DeviantArt, or Dribbble may need to be updated through the connected app; the Media Manager option may not appear. See Wix’s instructions for adding media to Portfolio projects.

2. Set the portfolio gallery thumbnail size and spacing

Open the relevant page in the Wix Editor and select the portfolio gallery or Pro Gallery.
Click Settings, then open Layout.
Choose a layout. For a uniform portfolio grid, choose a layout designed to use a consistent image ratio.
Click Customize Layout when the chosen layout offers it.
Drag Thumbnail size to change the displayed image size and Spacing to adjust the gaps between images.
Under Thumbnail Resize, select Crop or Fit, then preview the gallery at desktop and mobile widths.

These controls are layout-dependent. Some layouts lock image proportions, and a full-width responsive gallery may change item sizes, positions, or the number of items per row as the available width changes. For a Pro Gallery on mobile, use the Mobile Editor’s settings. See Wix’s guide to customizing gallery thumbnails and its layout options.

3. Choose Crop or Fit for your portfolio images

Setting	Choose it when	Trade-off
Crop	You want a regular grid with consistent thumbnail shapes, such as square or 16:9 cards.	Parts of the source image outside the selected ratio can be cut off.
Fit	Visitors need to see the full screenshot or design without losing edges.	Original image proportions are preserved, so items can have different dimensions or ratios.

For a visually even grid, use a layout with a uniform ratio and Crop, then inspect every image for clipped content. For screenshots where the full design matters, use Fit if that layout makes it available, accepting less uniform card shapes. Wix documents examples of ratios including 16:9, 4:3, 1:1, 3:4, and 9:16; available controls depend on the selected layout.

If a portrait-oriented layout displays landscape work, the layout may crop the sides to fit. Adjust the image focal point when possible, choose a better matching ratio, or use Fit. Some layouts—including Strip, Column, Bricks, Mix, Alternate, and Magic—have locked proportions and automatically crop images. Wix explains this behavior in its Pro Gallery layout guide.

4. Resize a Wix Portfolio project-page cover

The project-page cover does not necessarily follow the portfolio grid’s thumbnail controls. Wix says the selected project-page layout determines the cover’s ratio, proportion, and size; a separate independent resize control is not currently available.

Wix documents this workaround for applying gallery Crop or Fit settings on the project page:

Add the desired cover image twice so it is both the first and second item in the project gallery.
In the editor, open the Widget Elements panel.
Under Project Media, deselect the Cover checkbox.
Set the gallery’s thumbnail resize option to Crop or Fit and preview the project page.

This is a workaround, and Wix’s editor controls can change. Check the current controls and preview the published page before relying on it. Details are in Wix’s project cover image resizing article.

5. Prepare thumbnails that look good across devices

Decide what must remain visible. If the thumbnail is a site screenshot, keep key text, navigation, and the focal element inside the crop-safe area. Prefer Fit when losing any of that content would make the image misleading.
Use a consistent source-image approach. Similar framing and orientation make a cropped grid easier to scan. If project images vary widely, choose Fit or adjust focal points individually.
Check the actual layout. A layout’s proportions and responsive behavior determine how a source image appears. Preview the gallery at desktop and mobile widths rather than judging only the editor canvas.
Write useful image text. Add alt text that identifies the work or image rather than repeating a generic label such as “portfolio thumbnail.” Add a meaningful project title and description as well.
Inspect the project detail page separately. Gallery thumbnails and the project cover can follow different rules; confirm both views after changing settings.

6. Troubleshoot common thumbnail problems

Problem	Likely cause	What to do
The thumbnail cuts off the subject or screenshot edges.	Crop is filling a ratio that differs from the source image.	Choose Fit where available, select a more suitable ratio, or adjust the focal point. Check whether the layout locks proportions.
Thumbnails have different shapes.	Fit preserves the original proportions, or the chosen layout does not enforce a uniform ratio.	Choose a uniform-ratio layout and Crop if consistent cards matter more than showing every edge.
The project cover ignores the gallery’s crop or fit choice.	Project-page cover sizing is controlled by the project-page layout.	Adjust the project-page layout, or try Wix’s duplicate-image and deselect-Cover workaround above.
Thumbnail size or placement controls are missing.	Those settings are available only for certain layouts.	Review the selected layout’s Customize Layout options or switch to a layout that provides the control.
Media Manager import is unavailable for a project.	The project may be connected to a media integration.	Update or sync the media from the connected app, as Wix’s integration workflow requires.
Desktop looks right but mobile does not.	The responsive gallery changes item sizing or arrangement, or mobile settings differ.	Preview mobile and adjust its settings in the Mobile Editor where available.
A high-resolution image looks soft at first.	Wix may display a lower-resolution version while the high-resolution image loads.	Allow the page to finish loading before judging the final image; Wix describes this as standard behavior for its sites.

7. Capture source images for portfolio thumbnails

If the portfolio features websites you built, use a consistent browser viewport and capture approach for each project. That makes the cards easier to compare and reduces surprises when Wix crops them. For a repeatable manual capture, use the browser’s screenshot capability, save the image, then upload it to the project through Manage Media. Keep important page content away from the edges if you plan to use Crop.

When comparing image capture methods, ScreenshotNeo is a website screenshot API and MCP server for developers. Its clean shots remove known cookie and consent banners, newsletter popups, and chat widgets before capture, and only clean shots are billed.

Or skip the browser setup

One GET request can capture a website as an image. Read the ScreenshotNeo API documentation for the available formats and 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 image = Buffer.from(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', image));

Cookie banners, popups, and chat widgets are removed before the shot.
Bot checks, blank pages, and failed loads are never billed; response headers report the page verdict and billing status.
An MCP server lets AI agents use take_screenshot, get_page_info, and capture_pdf.
1,000 screenshots a month are free with no card; paid plans start at $5 for 3,000. Every feature is available on every plan.

See ScreenshotNeo and the API docs. Sign up for 1,000 free screenshots a month, with no card required.

Frequently asked questions

How do I change thumbnail size in Wix?

Select the Pro Gallery in the editor, open Settings > Layout > Customize Layout, and adjust the Thumbnail size slider if the selected layout supports it.

How do I make all portfolio thumbnails the same shape?

Choose a layout that supports a uniform image ratio and set Thumbnail Resize to Crop. Review each crop to ensure it keeps the important part of the work visible.

Can I resize the cover image independently from the project page layout?

Wix documents that the project-page layout controls the cover’s ratio, proportion, and size. Its duplicate-image workaround can let the gallery’s Crop or Fit setting control how the image displays.

Why are my thumbnails not identical on mobile?

Responsive gallery layouts can change the number, size, or position of items as the screen width changes. Check the mobile preview and the Mobile Editor settings.