How to Create Website Thumbnails for a Real Estate Agent Portfolio

To create a website thumbnail for a real estate agent portfolio, start with the card or grid where it will appear: measure its rendered dimensions, check its aspect ratio and crop behavior, then crop and resize a copy of an authorized source photo for that component. Keep the full-resolution master, export an optimized web image, write contextual alt text, and preview the result at actual phone and desktop sizes. There is no single correct thumbnail dimension: the right size depends on your design and any platform-specific requirements.

1. Decide where the thumbnail will appear

Inspect the portfolio page in a browser and note the rendered width, height, and image treatment for each use: property cards, featured listings, galleries, and mobile layouts. Check whether the image keeps its original ratio or fills a fixed box with a crop. If the site uses object-fit: cover, the browser fills the box and trims the overflow; object-fit: contain preserves the full image but may leave unused space.

Use the card’s aspect ratio to plan the crop. For example, a 3:2 card is wider than a 4:3 card. Decide which property feature must remain visible at small sizes, then keep it inside the portion that survives the crop. Do not pick a pixel size just because another portal uses it.

2. Choose and prepare the source photo

Use an image you own or have permission to use, and check the applicable photographer agreement. Select a clear, recognizable photograph with a subject that will still read when shown small. A well-lit exterior, distinctive room, or notable feature can work; a complex wide shot may lose its point when cropped to a small card.

For a property listing, a sequence can include an exterior hero image followed by living spaces and other relevant areas. This is listing-photography guidance, not a mandatory portfolio design rule. The realestate.com.au guidance recommends staging, natural light, and a mix of interior, exterior, and aerial views. See its listing image requirements for platform-specific rules.

3. Crop for the component, then resize a derivative

Keep the original master untouched. Make a separate derivative for the portfolio card, cropping to the component’s ratio before resizing. This avoids stretching and gives you the opportunity to choose a crop that preserves the important part of the scene. If the same property appears in a wide hero and a square card, create separate crops rather than forcing one file to work for both.

Copy the source into your image editor or image-processing workflow.
Set the crop ratio to match the target card, unless the site intentionally displays the full image.
Position the subject away from edges that may be trimmed on narrower layouts.
Resize the cropped copy to suit the component and the site’s responsive image setup.
Check the output at the actual displayed size, including a narrow phone layout.

Some portfolio builders generate responsive renditions automatically. Adobe Portfolio, for example, documents automatic renditions at different widths while preserving aspect ratio and selecting an appropriate size for the visitor’s screen and device resolution. If your builder does this, check the generated result on phone and desktop before uploading extra oversized copies. See Adobe Portfolio’s image rendition documentation.

4. Select dimensions based on the destination

These published specifications illustrate why dimensions must be tied to the destination:

Destination or example	Published guidance	How to use it
Your portfolio card	Measure the component and its crop ratio	Use this as the starting point for a portfolio derivative
realestate.com.au listing images	2000 × 1500 pixels at 4:3 is recommended in its general listing requirements	Follow this when preparing images for that route, not as a universal portfolio size
realestate.com.au Agent Admin manual upload	A 16:9 example is 2000 × 1125 pixels; manual uploads must be under 2.5 MB	This is a route-specific example and limit; check the current instructions for your upload method
Rightmove property images	3:2 upload ratio; 224 × 149 pixels for search summaries and 656 × 437 pixels for detail galleries	These are Rightmove presentation sizes, not general website standards
Adobe Portfolio renditions	Generated renditions can be up to 3840 pixels wide	This describes Adobe Portfolio’s rendition behavior, including larger display contexts

Sources: realestate.com.au listing requirements, realestate.com.au Agent Admin resizing instructions, Rightmove image FAQ, and Adobe Portfolio renditions.

These values apply to named products and upload routes. Check your own builder’s current requirements. A DPI value by itself does not determine how large an image appears in a browser; pixel dimensions and page layout determine the rendered size.

5. Export an efficient web image

Export the derivative in a format your portfolio supports, such as WebP, JPEG, or PNG. Choose quality settings that keep visible detail without creating an unnecessarily large download. Use RGB/sRGB color as recommended by Adobe Portfolio, and avoid uploading files much larger than the displayed image when your platform does not create its own responsive renditions.

Adobe Portfolio recommends keeping thumbnails and small images under 500 KB for best performance. That is guidance for Adobe Portfolio, not a universal file-size ceiling. Similarly, realestate.com.au’s manual Agent Admin upload limit is under 2.5 MB, while its general listing requirements allow images up to 20 MB; the applicable limit depends on the platform and upload route. Neither limit guarantees a particular page-speed score. See Adobe’s rendition guidance and its image optimization recommendations.

If you control the page code, provide responsive sources and dimensions so the browser can choose an appropriate file and reserve layout space. For example:

<img
  src="/images/cedar-house-card-800.webp"
  srcset="/images/cedar-house-card-400.webp 400w,
          /images/cedar-house-card-800.webp 800w"
  sizes="(max-width: 640px) 100vw, 33vw"
  width="800"
  height="533"
  alt="Bright living room with wide windows in the Cedar House"
  loading="lazy">

Adjust the file paths, widths, and sizes to match the actual layout. Do not lazy-load an above-the-fold hero image if doing so delays the main content image.

6. Write useful alternative text

Property thumbnails usually convey information, so their alternative text should describe the relevant scene or feature in the context of the page. W3C’s Images Tutorial explains how alternative text should convey essential information for informative images, remain empty for purely decorative images, and describe the function when an image is a link or button. See the W3C WAI Images Tutorial.

Informative image: alt="Renovated kitchen with a stone island at the Oak Street home"
Image links to a listing: describe the destination or linked property, such as alt="View the Oak Street home listing", if that is the link’s purpose.
Decorative image: use alt="" when it adds no information and is not the only content of a link or control.

Avoid keyword strings such as “real estate, home, property, house for sale.” Describe what the image actually shows and what matters in that page context.

7. Check platform rules and preview the result

Before publishing, check both the image presentation and the destination’s current content rules. realestate.com.au, for example, prohibits text overlays such as “Sold” or “Under Offer,” contact details, excessive branding, and collages in listing photos. Those are platform-specific rules, not a universal statement about every portfolio website. Review the current realestate.com.au requirements when publishing there.

Preview each thumbnail at its real card size; detail that looks clear full-screen can disappear in a small tile.
Check both narrow and wide layouts for unexpected cropping, stretching, or blank space.
Confirm the generated file loads and has the expected dimensions and format.
Check alt text with the surrounding link and page content in mind.
Confirm the image is authorized for this use and meets the destination’s current file and content rules.

Or skip the browser setup

You can capture a property page directly through ScreenshotNeo, a website screenshot API and MCP server. One GET request returns a PNG, JPEG, WebP, or PDF. See the ScreenshotNeo API documentation for request options.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

Replace the example URL with the listing or portfolio page you are authorized to capture. ScreenshotNeo removes cookie banners, popups, and chat widgets before the shot; bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card, and paid plans start at $5 for 3,000.

Troubleshooting

Problem	Likely cause	What to do
The thumbnail cuts off the roof, room, or key feature	The source ratio differs from the fixed card ratio, or the card uses a cover crop	Reposition the crop on a derivative or create a separate crop for that card; verify at phone width
The image looks soft or pixelated	The derivative is smaller than its rendered or high-density display size	Export a larger source rendition or let the builder generate responsive renditions; preserve the master
The page downloads a needlessly large image	An oversized source is displayed in a small slot, or the platform is not serving responsive variants	Resize and compress a derivative, or configure responsive sources; check the actual delivered file
The upload is rejected	The file exceeds a route-specific limit, uses an unsupported format, or violates content rules	Check the current destination requirements and the exact upload route; reduce size or change format if allowed
The crop differs between editor and published page	The theme applies its own aspect ratio or object-fit behavior	Inspect the rendered page’s container and CSS; adjust the derivative or component settings to match
Screen readers announce a filename or unhelpful text	Alt text is missing, auto-generated, or repeats keywords	Write a concise contextual description, or use empty alt only when the image is decorative
Text or branding appears on a portal listing image	The source artwork includes overlays disallowed by that platform	Use a clean photo and check that platform’s current image rules before upload

Performance, reliability, and cost

For a portfolio, image delivery affects both visual quality and page weight. Keep a high-quality master, then make appropriately sized derivatives rather than repeatedly resizing an already compressed thumbnail. Use responsive delivery when the site supports it, and test the actual files sent to phone and desktop visitors. There is no single compression setting or file-size target that guarantees a particular speed score; platform guidance and upload limits are destination-specific.

Automatic rendition features can reduce manual work, but check the output and the platform’s current behavior. If you use a screenshot API to capture a rendered page, distinguish that capture from preparing an upload-ready source photograph: a screenshot represents a web page at a chosen viewport, while a thumbnail derivative is cropped and exported from the property photo. ScreenshotNeo bills only clean shots; its response includes X-Page-Verdict and X-Billed headers indicating the result. Its plans are Free (1,000 shots/month), Starter ($5 for 3,000), Growth ($15 for 15,000), Pro ($39 for 60,000), Scale ($99 for 250,000), and Business ($249 for 1,000,000); yearly billing gives two months free, and every feature is on every plan. Choose based on expected capture volume rather than assuming a screenshot replaces an image-editing workflow.

FAQ

Should every property card use the same crop?

Use a consistent presentation for cards in the same component, but choose the crop per property so its defining feature remains visible.

Can I use the same file in my portfolio and on a listing portal?

You can if it meets both destinations’ dimensions, crop, file-size, format, and content rules. Since those rules differ, separate derivatives are often more reliable.

Does setting an image to 72 DPI make it look sharper online?

No. Browser display size is determined by pixel dimensions and page layout; the dossier’s platform specifications do not establish DPI as a way to improve browser sharpness.

Should I add the neighborhood and property type to every alt description?

Include those details only when they help identify the image or its purpose in that page context. Describe the visible image accurately rather than repeating search terms.