How to Make Website Thumbnails for an Indian Freelance Designer Directory

To make effective website thumbnails for an Indian freelance designer directory, start with portfolio images each designer is authorized to display, decide the listing card’s aspect ratio and crop, then export image candidates sized for the card widths your desktop and mobile layouts actually render. Use responsive image markup so browsers can choose a suitable file, reserve image space with dimensions or an aspect ratio, and lazy-load cards below the fold. There is no universal thumbnail pixel size: your layout determines it.

This workflow helps each thumbnail represent the designer’s real work, keeps listing cards visually consistent, and avoids sending unnecessarily large images to smaller screens. It applies whether the directory is focused on designers in India or serves a wider audience; location does not change the image-sizing fundamentals.

1. Choose honest, usable portfolio imagery

Use a screenshot, project image, or other portfolio asset that the designer has permission to show in your directory. Confirm the asset’s rights and any required attribution before publishing it. A thumbnail should represent the designer’s work accurately: do not use generic stock imagery in a way that suggests it is a project they created.

Ask each designer to provide a representative image when possible. If you select from a larger project, choose a frame or area that remains identifiable at the small size of a listing card. For interface work, that may mean showing a recognizable screen or visual detail rather than a wide screenshot that becomes unreadable when reduced.

2. Define the card crop before preparing images

Set the directory card’s image ratio in your design first. A landscape, square, or portrait crop can work; the right choice depends on the card design and how the directory is used. The available evidence does not establish one standard ratio or pixel size for designer directories.

Apply the chosen ratio consistently across the listing grid so cards align. Within that shared crop, preserve each project’s focal point. If the same image appears in different desktop and mobile layouts, check the crop at both sizes rather than assuming that a desktop composition will remain clear on a narrow screen.

Choose the card ratio and the intended image treatment, such as a centered crop.
Preview representative portfolio images in the actual card design.
Adjust each crop to keep the important subject or interface content visible.
Check several neighboring cards together for a consistent visual rhythm.

3. Derive image sizes from your layout

Measure the rendered image area at each relevant breakpoint and account for device pixel density when producing image candidates. Use those measurements to choose practical source dimensions; do not start from a supposed platform-wide thumbnail standard. Responsive image markup lets the browser choose among candidates suited to the available display width.

For example, if your card image is 280 CSS pixels wide at one breakpoint and 420 CSS pixels wide at another, those rendered widths are useful inputs to your candidate plan. The actual export dimensions should also account for the device pixel density and image service or build pipeline you use. These example widths illustrate the calculation; they are not recommendations for every directory.

Image services may offer transformations such as width, height, crop, format, quality, fit, and device pixel ratio. Unsplash’s API documents these kinds of transformations and offers named variants such as thumb at 200 pixels and small at 400 pixels. Those are variants provided by Unsplash, not universal directory sizes. Unsplash also cautions that its full variant can load slowly and is not recommended for performance-sensitive display contexts. Unsplash API documentation

If you use the Unsplash API, follow its usage rules: hotlink the image URL returned by the API and provide attribution to Unsplash and the photographer, linking to the photographer’s profile. The five-megapixel minimum in Unsplash’s contributor guidance applies to images submitted to Unsplash; it is not a website thumbnail requirement. Unsplash image and attribution guidance Unsplash contributor image-resolution guidance

4. Add responsive image markup

Use srcset to provide image candidates and sizes to describe the image’s expected layout width. The browser can then select a candidate appropriate to the rendered slot and device. The values below are illustrative; replace the image URLs and sizing rules with candidates and breakpoints that match your directory.

<img
  src="/images/designer-portfolio-640.webp"
  srcset="
    /images/designer-portfolio-320.webp 320w,
    /images/designer-portfolio-640.webp 640w,
    /images/designer-portfolio-960.webp 960w
  "
  sizes="(max-width: 600px) 92vw, (max-width: 1000px) 45vw, 280px"
  width="640"
  height="426"
  alt="Selected project from Priya Sharma’s design portfolio"
  loading="lazy"
  decoding="async"
>

In this example, the width descriptors describe the candidate files’ intrinsic widths. The sizes value describes the expected CSS slot at the listed breakpoints, so it should reflect the actual grid. If your card image uses a fixed ratio with cropping, CSS can maintain that shape:

.designer-card__image {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.designer-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Change 3 / 2 to the ratio your design uses. Make sure that ratio and the crop in your generated candidates agree. Responsive image guidance from Google’s web.dev explains how srcset and sizes help avoid sending desktop-sized assets to smaller displays. web.dev: Descriptive images

5. Reserve space and load images at the right time

Include intrinsic width and height attributes or a CSS aspect-ratio so the browser can reserve the image area before the file arrives. This reduces layout movement as directory cards load. Lazy-load images below the fold with loading="lazy". A prominent image already visible when the page opens should load eagerly instead of being deferred.

<!-- Below the fold: lazy-loaded card image -->
<img src="/images/designer-project.webp"
     width="640" height="426"
     loading="lazy" alt="Packaging design project by Aditi Rao">

<!-- Prominent above-the-fold image: load eagerly -->
<img src="/images/featured-designer-project.webp"
     width="960" height="640"
     alt="Brand identity project by Aditi Rao">

Use alt text that describes the image’s useful content in context. If the nearby card already names the designer and project, avoid repeating information without adding a description. If the image is decorative and conveys no additional information, an empty alt value may be appropriate.

6. Create and review a thumbnail batch

Once the crop and candidate plan are set, prepare the directory’s image set using your image editor, build pipeline, or image service. Keep a record of the source asset, its permitted use, the crop, and the generated candidates so later updates are consistent.

Rights: Confirm the designer can authorize display and note required attribution.
Recognition: Check that the project or subject is still identifiable at card size.
Crop: Keep a common aspect ratio while preserving each image’s focal point.
Breakpoints: Check the actual card widths on mobile, tablet, and desktop layouts.
Responsive candidates: Verify that srcset and sizes describe the files and rendered layout correctly.
Layout stability: Set intrinsic dimensions or a matching aspect ratio.
Loading: Lazy-load below-the-fold cards; load prominent above-the-fold images eagerly.
Visual consistency: Review a full grid, not just individual exports.

Figma’s guide to responsive layouts and images includes examples such as max-width and height: auto. It can inform a design workflow, but it does not prescribe a crop ratio for your directory. Figma: Guide to responsive design

7. Troubleshoot common thumbnail problems

Problem	Likely cause	Fix
The image looks blurry on a high-density screen.	The chosen candidate is too small for the rendered slot and device pixel density, or the source is already low resolution.	Generate a suitable larger candidate from an authorized source and ensure the `srcset` offers it. Check that the width descriptors match actual file widths.
The subject is cut off in the card.	The crop does not account for the image’s focal point, or a single crop was reused across different layouts.	Adjust the crop, change the focal position, or prepare layout-specific crops where the responsive design requires them.
Cards jump as images load.	The browser has no reserved image dimensions or aspect ratio.	Add intrinsic `width` and `height` attributes or reserve the card’s image area with CSS `aspect-ratio`.
Mobile visitors receive unnecessarily large image files.	`srcset` candidates are missing, or `sizes` does not describe the actual mobile slot.	Provide appropriate candidates and update `sizes` to match the layout’s real breakpoints and widths.
Thumbnails appear inconsistent in the grid.	Cards use mixed ratios, arbitrary crops, or different treatments without a deliberate design rule.	Set a shared card ratio and treatment, then review the whole grid and adjust individual focal points within that rule.
An image is attributed incorrectly or cannot be displayed under its source’s rules.	Rights, hotlinking, or attribution requirements were not checked.	Verify the asset’s license or permission and follow the source’s display requirements. For Unsplash API images, hotlink the returned URL and attribute Unsplash and the photographer with a profile link.
A candidate never appears or the browser selects an unexpected file.	A URL is wrong, a width descriptor is inaccurate, or `sizes` does not reflect the rendered layout.	Open each candidate URL, confirm its intrinsic width, and compare the declared slot size with the card’s computed CSS width.

8. Performance, reliability, and cost considerations

Thumbnail performance depends on matching delivered image dimensions to rendered card sizes, keeping the crop and format appropriate, and avoiding unnecessary loading. Responsive candidates reduce the need to send a desktop-sized asset to a smaller display; reserved dimensions reduce layout movement; lazy loading below the fold avoids fetching every listing image immediately. The dossier provides no directory-specific benchmark, file-size target, or universal image format, so measure your own layout and delivery stack rather than relying on a made-up threshold.

For reliability, retain a clear source-to-thumbnail mapping and verify generated files and their URLs as part of your publishing workflow. Rights and attribution are part of reliable publication too: confirm them before a batch appears in public listings. If using an image API, follow that service’s documented URL and attribution requirements.

Costs vary with the image editor, hosting, transformation service, and directory traffic you choose. No specific paid product is required by this workflow, and the available evidence does not support a universal cost estimate. Start from the image delivery and storage capabilities you already have, then compare costs against your actual usage.

9. Capture portfolio pages when you need a source image

If a designer authorizes you to capture a public portfolio page as a source image, take the screenshot as a capture step, then crop it to your directory’s chosen card ratio and prepare responsive candidates. A screenshot does not grant permission to reproduce someone else’s work; confirm the right to display it before publishing.

You can capture a page manually in a browser or automate captures as part of an image-preparation workflow. ScreenshotNeo is a website screenshot API and MCP server for developers. ScreenshotNeo can return PNG, JPEG, WebP, or PDF from a URL. Its available options include full-page capture, selecting one element by CSS selector, viewport and device presets, retina scale, waiting for a selector or network idle, custom CSS and JavaScript, and custom headers or cookies. For portfolio cards, an element capture can target a specific project area before you create the final consistent crop. See the ScreenshotNeo API documentation.

For an automated workflow, retain the capture URL and designer permission alongside the resulting image. Verify that the screenshot shows the intended project and that the crop remains legible in the final listing card. ScreenshotNeo’s MCP server also provides take_screenshot, get_page_info, and capture_pdf tools for AI agents and MCP clients.

Or skip the browser setup

Make a one-call capture of a portfolio page, then crop and resize the returned image for your card design. Replace the target URL with 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.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}`);

Cookie banners, popups, and chat widgets are removed before the shot. Bot checks, blank pages, and failed loads are never billed. An MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Read the API documentation and sign up for 1,000 free screenshots a month, with no card.

Frequently asked questions

What size should website thumbnails be?

There is no universal size for this directory. Measure the card widths in your own responsive layouts, account for device pixel density, and prepare candidates that suit those slots.

Should every designer have the same crop?

Use a consistent card ratio and visual treatment, but adjust each image’s crop so its important subject or project detail remains visible.

Can I use Unsplash images as designer portfolio thumbnails?

Only when the image is an honest representation of what the thumbnail is meant to show and its use is permitted. Unsplash API images must be hotlinked from the returned URL and attributed to Unsplash and the photographer with a link to the photographer’s profile.

Should I lazy-load every thumbnail?

Lazy-load listing images below the fold. Load prominent images visible at the top of the page eagerly.

Does the Unsplash five-megapixel minimum apply to directory thumbnails?

No. That minimum concerns images submitted to Unsplash; it is not a general requirement for website thumbnails.