To make a portfolio thumbnail, capture an approved, representative view of the finished website, then crop and resize it to fit the actual portfolio card. Export it in a format your platform accepts, compress it without losing the details that make the design recognizable, add meaningful alt text, and test the published card on desktop and mobile. There is no single required ratio, pixel size, or file-size limit for every portfolio platform.
1. Choose a representative website view
Start with the published site or an image approved for portfolio use. Choose a page and viewport that communicate the project’s visual identity when reduced to card size: for example, its hero section, distinctive navigation, or a clear product view. Avoid a frame dominated by loading states, cookie dialogs, or unrelated browser chrome.
Google Search Central advises using an image relevant to and representative of the page when selecting imagery for og:image or structured data; that is useful guidance for choosing a portfolio image too, though those metadata recommendations are not portfolio-card specifications. Google Search Central’s image guidance also emphasizes meaningful alt text for people who cannot see images.
If the project contains confidential information, private customer data, or assets the client has not approved for display, choose another page or obtain approval before capturing it.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →#1 Best Overall
2. Match the thumbnail to its destination
Before cropping, inspect the portfolio card where the image will appear. Find its aspect ratio, display dimensions, cropping behavior, and whether it serves different image renditions at different screen sizes. A wide screenshot may be cropped to a square or portrait card; the platform’s behavior, not a universal rule, determines the right export.
Keep a higher-resolution source image for a case study or larger view, and create a separate thumbnail when the grid needs a smaller, faster asset. The Guidelines for Indian Government Websites (GIGW) recommends correctly sized imagery and describes linking a thumbnail to a full-size copy. This is useful practice, not a statement that every private agency must follow government guidance. GIGW
Adobe Portfolio illustrates why platform checks matter: it generates multiple image renditions, and the displayed result depends on site and page container settings. Its sizing advice is specific to Adobe Portfolio, not a standard for other platforms. Adobe Portfolio image sizing guidance
Rank #2
3. Capture and crop the image
Capture a clean, useful frame
- Open the approved, published website in a browser and navigate to the page that best represents the project.
- Set the viewport to resemble the card’s intended context, or capture a larger source and crop it afterward. If the portfolio card is narrow, check that important content stays in frame when cropped.
- Capture the page using the browser’s screenshot capability or your operating system’s screenshot tool. For a full-page capture, check that sticky headers, lazy-loaded images, and page sections appear as expected.
- Crop to the destination card’s shape, keeping the project’s identifying visual detail visible. Do not assume that a particular aspect ratio or pixel dimension is mandatory unless the portfolio platform specifies one.
Preserve a larger project view
Use a smaller optimized file for the grid and link the card to a case study or larger image if visitors need to inspect interface details. Fine text that is illegible in a thumbnail should not be the only way to convey important project information; include the project name and relevant details as page text.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →4. Pick an image format and optimize it
Choose a format based on the image and the platform’s support. The Government of India Digital Brand Identity Manual page lists WebP for photographs, continuous tones, and gradients; PNG for lossless transparency; and JPEG/JPG for photographs. GIGW also discusses image formats and optimization. Confirm support in your publishing stack before exporting. Government of India Digital Brand Identity Manual · GIGW
- JPEG: a practical choice for photographic or screenshot imagery with many colors when transparency is not needed.
- PNG: useful where sharp edges or transparency matter, though the resulting file may be larger.
- WebP: consider it where your portfolio platform accepts it and the image remains clear after export.
Resize the export for its actual use and compress it while checking the thumbnail at its real display size. The goal is not the smallest possible file at any cost: preserve enough sharpness and contrast for the site’s character to read. GIGW says reducing image-file size helps reduce page download time.
Rank #3
The Digital Brand Identity Manual page states “Thumbnail images Maximum up to 100KB” and “High-resolution photographs Maximum up to 5MB.” Those are recommendations shown on that manual page, not universal limits for agency portfolios. The original manual was not available for direct review here, so verify the current document and its context before treating either number as authoritative policy. Adobe Portfolio separately recommends thumbnails/small images under 500 KB, standard images 300 KB–1 MB, and full-width images 500 KB–2 MB, and says its largest generated rendition is 3840 pixels wide; these values apply to Adobe Portfolio only, not to other services. Adobe Portfolio’s platform-specific recommendations
5. Add accessible text and keep content readable
Write alt text that identifies the project or explains the relevant visual information when the image conveys information. Avoid using a filename as a substitute for a useful description. If a thumbnail is purely decorative and the platform allows it, use the appropriate empty-alt treatment rather than repeating nearby text.
Keep project titles, service descriptions, and navigation as HTML text wherever possible instead of embedding them in the image. GIGW discourages images of text when ordinary text can convey the information and emphasizes alternate descriptions; Google also identifies alt text as important for users who cannot see images. GIGW · Google Search Central
Rank #4
- 40-Pocket Large Capacity Portfolio Book: Each art binder with 40 bound (non-refillable) top-loading clear sheet protectors, letting you show 80 pages of 9x12" letter size or smaller. Folder measures 12 7/8" (L) x 9 11/16" (W) x 11/16" (G).
- Tailor-Made Spine Title: You can label and identify your watercolors, sketches, scrapbook, art pieces, sheet music, certificates, and other projects by customizing the reversible spine insert.
- High Transparency & Lies Flat When Open: Our presentation book with crystal clear PP sheet protectors offers complete transparency for checking through and organizing. Bound sheet protector lies flat when open, free your hands.
- Archival Quality & Heavy Duty: Made from durable and light weight polypropylene which is archival quality, acid-free, non-stick, and non-glare, and water-proof. Thickened and sturdy cover won’t easy to crack and keeps your clear sleeves from being damaged.
- Multi-Function: Not only suitable for long-term storage but also for displaying your paintings, photos, artwork, drawing, stencils. Great gift for students, teachers, office workers, secretaries, musicians, painters, etc.
6. Confirm permission before publishing client work
Public visibility does not automatically give an agency permission to reuse a client’s site, logo, photographs, or third-party material in a portfolio. Check the agreement and get any needed approval; do not treat a screenshot’s availability online as a reuse license.
Adobe’s screenshot policy concerns screenshots of Adobe products and includes conditions such as restrictions on third-party content and attribution in applicable uses. It does not grant rights to client websites or their assets. Google’s image metadata documentation describes rights-related fields such as a Web Statement of Rights, but metadata does not itself grant permission. Adobe permissions guidance · Google image license metadata documentation
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.7. Publish and check the portfolio card
- Upload the optimized file in a format accepted by your portfolio platform.
- Set the card’s image and link it to the correct case study, project page, or larger image.
- Add or verify the image’s alt text and make sure the project name and essential information also appear as page text.
- Preview the published grid at its actual card size and on a narrow screen. Check crop, sharpness, load behavior, and link destination.
- If the platform generates responsive renditions, inspect the version it actually serves rather than judging only the original upload.
These checks are practical workflow steps; the reviewed sources establish that platform sizing and responsive renditions vary, but do not prescribe a single testing procedure for agency portfolios.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problemsBest Value
Or skip the browser setup
If you want a repeatable capture without manually setting up a browser, ScreenshotNeo is a website screenshot API and MCP server. Its API can return an image or PDF from one GET request. For example, this cURL command requests a WebP capture of the approved public project page; replace the target URL with the one you have permission to capture. See the ScreenshotNeo documentation for request options and setup.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpScreenshotNeo accepts cookie and consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks/CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and responses identify the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents. The free plan includes 1,000 screenshots a month with no card, and paid plans start at $5 for 3,000 screenshots. You still need to check the crop, alt text, client permissions, and final display in your own portfolio.
Sign up free for 1,000 screenshots a month with no card.
Frequently Asked Questions
Is there one correct thumbnail size or aspect ratio for an agency portfolio?
No. Use the destination platform’s card dimensions, crop behavior, and responsive image handling to determine the export.
Can I use the Government of India image-size recommendations as my portfolio’s required limits?
Not automatically. The cited figures are recommendations on the Digital Brand Identity Manual page, whose current source and context should be verified; they are not established universal limits for private portfolios.
Does adding rights metadata make a client screenshot legal to reuse?
No. Metadata can describe rights information, but it does not grant permission. Check the relevant client and third-party rights before publishing.
