Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →There is no universal pixel size for a designer-directory thumbnail. Choose the listing card’s aspect ratio and actual desktop and mobile widths first, then create consistent crops and responsive image sizes that preserve each project’s recognizable focal point. Use work the designer is authorized to show, reserve space for images before they load, and defer below-the-fold images.
Choose portfolio images that represent the designer’s work
Start with a representative project image or screenshot supplied by the designer, and confirm they have permission to display it in the directory. Choose a frame whose subject, layout, or interface remains identifiable when reduced to card size. Do not use generic stock imagery in a way that suggests it is the designer’s own work.
Before settling on an image, consider whether it shows the kind of work the listing is meant to communicate: for example, a recognizable website interface for a web designer or a finished visual for a brand designer. The useful image is the one that accurately represents the project and reads clearly at the size visitors will actually see.
Set the card crop before making thumbnails
Define the card’s shape in the directory design, then use that same aspect ratio across the listing. There is no evidence-based standard ratio or pixel dimension for all directories; the right crop follows your own card layout and breakpoints.
#1 Best Overall
Keep the important subject or interface content inside the crop. A consistent frame makes neighboring cards easier to scan, but consistency should not cut off the feature that makes a particular project recognizable. Compare alternatives at the size they will appear in the directory, not only in a full-size editor preview.
Choose image sizes for the actual layout
Measure the rendered card widths at your desktop and mobile breakpoints, and account for device pixel density when preparing image candidates. Use responsive image markup so the browser can select a suitable file for the available display size. Google web.dev explains the role of srcset and sizes in serving responsive images: responsive images.
For example, if a card is about 300 CSS pixels wide, you might provide a candidate near that width and a larger candidate for high-density displays. Treat those as candidates derived from your layout, not universal export requirements. File dimensions and bytes should suit the rendered image; the exact targets depend on your hosting, design, and traffic.
A basic pattern looks like this:
<img
src="/images/portfolio-example-600.webp"
srcset="/images/portfolio-example-300.webp 300w,
/images/portfolio-example-600.webp 600w,
/images/portfolio-example-900.webp 900w"
sizes="(max-width: 600px) 90vw, (max-width: 1000px) 45vw, 300px"
width="600"
height="400"
alt="Designer portfolio project: responsive restaurant website"
loading="eager"
>Replace the example candidates, dimensions, and sizes values with measurements from your own card layout. The width and height attributes should describe the image file’s intrinsic dimensions; CSS can then apply the card crop, for example with a fixed aspect ratio and object-fit: cover. Write alt text that communicates the image’s useful content rather than repeating generic phrases such as “thumbnail.”
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Keep loading stable and efficient
Declare intrinsic width and height attributes or reserve the intended space with a matching CSS aspect ratio. This lets the browser account for the image before it has loaded and helps reduce layout movement. Lazy-load cards that are below the fold; do not lazy-load a prominent image that is visible immediately on page load. See web.dev’s guidance on image dimensions and layout shifts.
When deciding how many variants to prepare, use the directory’s actual card widths and expected display density rather than generating arbitrary sizes. Responsive candidates avoid sending a desktop-sized asset to a small display when a smaller file will do.
Using Unsplash images and API results
If you use the Unsplash API, follow its image-display requirements: hotlink the image URL returned by the API, credit Unsplash and the photographer, and link the photographer’s profile. See the Unsplash API hotlinking guidance and attribution guidance.
Unsplash’s API supports transformations such as width, height, crop, format, quality, fit, and device pixel ratio. Its thumb and small variants are documented as 200-pixel and 400-pixel examples, respectively; they are service options, not recommended universal dimensions for a directory. Unsplash also says its full variant can load slowly and does not recommend it for performance. See the image URL documentation.
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 problemsThe five-megapixel minimum in Unsplash’s contributor guideline is for images submitted to Unsplash, not a requirement for website thumbnails. See Unsplash’s minimum-resolution guideline.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Review a batch before publishing
- Check every crop at the actual desktop and mobile card sizes.
- Make sure the key project subject or interface remains visible and the image represents the designer’s work honestly.
- Confirm adjacent cards use a consistent crop, while allowing focal-point adjustments where needed.
- Check that image dimensions or aspect ratio reserve space and that only below-the-fold images are lazy-loaded.
- Confirm image rights; if using the Unsplash API, check hotlinking and attribution for each displayed image.
Or skip the browser setup
If you need a clean screenshot of a portfolio page as a thumbnail source, ScreenshotNeo returns a screenshot or PDF from one GET request. For a WebP screenshot of a page you have permission to capture:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpReplace the example URL with the designer’s portfolio page. See the ScreenshotNeo API documentation for options. Cookie banners, newsletter popups, and chat widgets are removed before capture; bot checks, blank pages, and failed loads are not billed. An MCP server lets AI agents take screenshots, and 1,000 screenshots per month are free with no card; paid plans start at $5 for 3,000.
Sign up for 1,000 free screenshots a month, with no card required.
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.
