How to Create Website Thumbnails for a Design Agency Portfolio

A strong website thumbnail gives a prospective client a recognizable preview of a project and a reason to open its case study. Treat it as a deliberate crop, not a miniature tour of the entire website: choose a representative page view, frame it for where it will appear, keep one clear focal point, and inspect the exported file at its actual display size.

1. Choose the thumbnail’s destination

Start by checking where the image will appear. A portfolio card, case study header, social preview, and design-file cover can have different aspect ratios, size limits, and accepted formats. Check the chosen platform’s current specifications before making the final canvas; there is no single image dimension that fits every destination.

A 1920 × 1080 canvas is one guide’s starting suggestion for a Figma file thumbnail, not a universal portfolio-image standard. Use the destination’s own requirements when available, and make a separate crop when a different placement needs one.

2. Select the page view that tells the project story

Choose a recognizable hero or another page state that communicates the site’s identity. The best source may be a viewport capture, a particular element, or a full-page capture, depending on what the portfolio card needs to show.

Viewport: useful when the hero or first screen captures the project clearly.
Element: useful when one component, such as a product panel or campaign image, is the strongest representative view.
Full page: useful when the page’s complete structure matters, but it can become too small or busy when reduced to a card.

Do not choose full page by default. At thumbnail scale, details and text may become illegible. Prefer the view that remains recognizable at a glance.

3. Compose around one focal point

Keep enough context to identify the project, but avoid filling the canvas with competing screenshots or decorative elements. Preserve the main visual and any text that is essential to understanding the page. Leave breathing room around the focal point and check that the crop does not cut off a meaningful edge or subject.

If you add a device frame or background, use it to support the preview rather than compete with it. A clean page capture can be more informative than a mockup when the website itself is the work being presented.

4. Build the composition in a suitable tool

Choose the workflow based on the output you need:

Figma: useful for structured, repeatable layouts. Its responsive-design guidance describes using frames for multiple device sizes, breakpoints, auto layout, constraints, libraries, and components to keep layouts consistent. A reusable component can help an agency produce a family of portfolio crops with the same spacing and frame treatment.
Canva: a quick template-driven option for a static composition or device mockup.
Photoshop: suitable when you need detailed layer and pixel-level composition control.
Device Shots: its product page describes importing a screenshot, choosing a device or browser frame, and exporting image formats. The vendor advertises preset canvases, custom dimensions up to 6000 px, and export up to 4×; confirm current capabilities and requirements in the product before relying on them.

These are workflow distinctions, not comparative performance results. If you need a responsive prototype rather than a static portfolio image, plan that as a separate deliverable. A thumbnail is a preview, not an interactive website.

5. Capture and crop for the target placement

Record the destination’s required dimensions, ratio, file types, and any file-size limit.
Open the representative page state and decide whether a viewport, element, or full-page view communicates the project best.
Capture the view and place it into a canvas that matches the destination. Crop for the intended card or header rather than shrinking an unrelated full-page image.
Check the focal point, surrounding context, important text, and edges at the intended crop.
Export in an accepted format and inspect the resulting file itself.

For a one-off capture, a browser screenshot may be enough. For a repeatable agency workflow across many projects, use a consistent capture size and composition template, while choosing each project’s representative view deliberately.

6. Preview and export-check

Preview the thumbnail at the size visitors will actually see. If the subject is hard to recognize, the crop is too busy, or essential text is unreadable, simplify the composition or choose a different source view. Then open the exported image and check its crop, edges, orientation, and legibility. A canvas preview does not guarantee that the exported file looks right.

Does the image identify one project at a glance?
Is the focal point still clear at card size?
Does the crop preserve the content that explains the project?
Is the format accepted by the publishing destination?
Does the exported file match the intended orientation and crop?

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server for developers. One GET request returns a screenshot or PDF; use the screenshot as the source image for your portfolio composition. The API supports viewport and full-page captures, CSS-selector element capture, device presets, and image formats including PNG, JPEG, and WebP. It does not design the final portfolio card for you: compose and crop the result for your destination.

See the ScreenshotNeo API documentation for request options. 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

Python:

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()
with open("shot.webp", "wb") as image:
    image.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}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await Bun.write('shot.webp', new Uint8Array(await res.arrayBuffer()));

In Node.js environments without Bun, write the response bytes with your environment’s file API. Keep the API key private; do not expose it in client-side code or a public page.

Cookie banners, newsletter popups, and chat widgets from 60+ known consent platforms are removed before capture, and each step can be turned off. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed; response headers identify the page verdict and billing status. The MCP server includes tools for AI agents to take screenshots, get page information, and capture PDFs. The free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots.

Troubleshooting

The thumbnail looks cluttered

The source may contain too much page content for the final size. Try a hero viewport or a single element capture, remove decorative elements, and retain one focal point.

The important content is cut off

The crop may not match the destination ratio, or the source view may be poorly framed. Check the destination’s current dimensions and reposition or recapture the page before export.

Text looks unreadable in the portfolio card

Small page text often loses legibility when a full-page screenshot is reduced. Choose a closer representative view or omit text that is not essential to identifying the project.

The design canvas looks right, but the file does not

Inspect the exported image itself. Check crop, orientation, edges, dimensions, and format against the destination’s requirements, then export again if needed.

For a manual workflow, handle the page state before capturing and confirm the result in the saved file. ScreenshotNeo removes known consent platforms, newsletter popups, and chat widgets before capture; its removal steps can be disabled when needed.

Performance, reliability, and cost considerations

For portfolio quality, the main efficiency gain is a repeatable template and a deliberate source view, not capturing every page at full length. A full-page image may include useful context, but it can be harder to read after reduction. Match the capture to the card and avoid unnecessary variants.

For a manual process, keep the source capture and exported composition together so edits can be reproduced. For API captures, request only the page state and output you need. ScreenshotNeo supports a chosen cache TTL, bulk capture of up to 100 URLs per call, and async jobs with signed webhooks. Its billing headers distinguish clean captures from non-billed outcomes; check the response rather than assuming every request produced a usable image.

Current portfolio platform specifications should be checked before publishing. Tool capabilities and vendor limits can change, so verify them in the chosen product. ScreenshotNeo pricing is $0 for 1,000 shots per month, $5 for 3,000, $15 for 15,000, $39 for 60,000, $99 for 250,000, and $249 for 1,000,000; yearly billing gives two months free. Every feature is available on every plan.

FAQ

Should every portfolio thumbnail use the same layout?

A reusable layout helps a portfolio feel consistent, but the crop should still show the most recognizable part of each project.

Should I use a website screenshot or a device mockup?

Use a direct screenshot when the page itself should be the focus. Add a device frame when it helps explain the design, and keep it visually secondary.

Only if each destination accepts the same crop and format and the image remains clear in each placement. Otherwise, create destination-specific exports.

Does a full-page capture make a better thumbnail?

Not necessarily. It can show more of the page but may reduce the focal point and make details too small. Choose the clearest representative view.