Generate Real Estate Listing Images from HTML for Indian Property Portals

To generate a real estate listing image from HTML, render the HTML in a browser and capture the intended element or page region. With Playwright, set a deliberate viewport and capture the listing element as PNG or JPEG; then inspect the saved file’s dimensions, size, text, images, and clipping before upload. Portal rules differ: Magicbricks publishes a 4 MB maximum and 600 × 400 pixel minimum, but those values are not India-wide requirements. A designed graphic may also be unsuitable where a portal expects genuine photos of the property.

1. Decide what the image is for

First decide whether the output is a designed summary graphic, a floor-plan presentation, a map, or a photograph of the actual property. Rendering HTML can produce the first kinds of graphics, but it does not make a graphic evidence of the real property. Check the destination portal’s current rules for the particular listing and image category before uploading.

Choose the composition and dimensions before capture. Keep important details readable when the image is shown as a small listing thumbnail. A fixed-size card is usually easier to capture consistently than a long page. If the design is a card within a larger page, capture the card element rather than the full page.

2. Build a fixed-size HTML listing card

This self-contained example creates a 1200 × 800 pixel property summary. Replace the sample details and image with material you are entitled to use. It uses a local image filename so rendering does not depend on a remote image host.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Property listing card</title>
  <style>
    * { box-sizing: border-box; }
    html, body { margin: 0; width: 1200px; height: 800px; }
    body {
      font-family: Arial, sans-serif;
      background: #f3f1ec;
      color: #20231f;
      padding: 40px;
    }
    .card {
      width: 1120px;
      height: 720px;
      background: white;
      overflow: hidden;
      border-radius: 18px;
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      box-shadow: 0 12px 36px #18201422;
    }
    .photo { width: 100%; height: 720px; object-fit: cover; }
    .details { padding: 52px 44px; display: flex; flex-direction: column; }
    .tag { color: #356a52; font-size: 20px; font-weight: 700; }
    h1 { font-size: 42px; line-height: 1.12; margin: 18px 0; }
    .price { font-size: 34px; font-weight: 700; margin: 12px 0 24px; }
    .facts { font-size: 22px; line-height: 1.65; }
    .note { margin-top: auto; color: #53584f; font-size: 17px; line-height: 1.45; }
  </style>
</head>
<body>
  <main class="card">
    <img class="photo" src="property.jpg" alt="Living room">
    <section class="details">
      <div class="tag">APARTMENT · FOR SALE</div>
      <h1>Two-bedroom apartment</h1>
      <div class="price">₹82 lakh</div>
      <div class="facts">2 bedrooms · 2 bathrooms<br>1,080 sq ft · East-facing<br>Near sample locality, Bengaluru</div>
      <p class="note">Replace this sample copy with accurate listing information. Confirm whether text and graphic overlays are allowed for the image category and portal.</p>
    </section>
  </main>
</body>
</html>

Save it as listing.html and place property.jpg beside it. For a repeatable production image, bundle fonts and assets locally or wait for them to load before capture. Use accurate property facts and avoid adding personal contact details, branding, watermarks, or other overlays until you have checked the destination’s rules.

3. Capture the HTML with Playwright

Playwright supports viewport, element, and full-page screenshots, as well as PNG, JPEG, and WebP output. The example below captures the card element as PNG. Install Playwright and its Chromium browser using the official Playwright screenshot documentation and installation guide.

npm init -y
npm install -D playwright
npx playwright install chromium

Create capture.cjs in the same directory:

const { chromium } = require('playwright');
const path = require('node:path');

(async () => {
  const browser = await chromium.launch({ headless: true });
  try {
    const page = await browser.newPage({
      viewport: { width: 1200, height: 800 },
      deviceScaleFactor: 1
    });
    await page.goto('file://' + path.resolve('listing.html'), {
      waitUntil: 'load'
    });
    await page.locator('.card').screenshot({
      path: 'listing.png',
      type: 'png'
    });
  } finally {
    await browser.close();
  }
})();

Run it with node capture.cjs. If your HTML uses remote assets or web fonts, prefer serving it locally over HTTP and wait for those assets explicitly. A page load event alone does not ensure that every late-loading font or image has finished rendering.

Choose the right capture mode

• Element screenshot: Capture a selector such as .card. Best for a card or fixed-size composition.
• Viewport screenshot: Capture the visible browser area. Set the viewport to the desired composition dimensions.
• Full-page screenshot: Capture the entire page. Useful for long designs, but usually inappropriate for a single listing image because it may create an excessively tall result.
• Clip: Capture a deliberate rectangle when the desired region does not have a stable selector. Keep the clip within the rendered page bounds.

Playwright screenshot options include the path, output type, quality for JPEG or WebP, full-page capture, animation handling, caret handling, and a clip rectangle. Element screenshots use a locator’s screenshot method; page screenshots use the page method. Consult the official screenshot options for exact API details. PNG is lossless and broadly supported; JPEG is often smaller for photographic content. Although WebP is supported by Playwright, do not assume a portal accepts it.

4. Check the output against portal requirements

Check the actual saved file, not only the CSS width and height. A device scale factor above 1 can increase screenshot pixel dimensions. Verify the format, dimensions, file size, legibility, and visual completeness after capture. If you resize or recompress, check the final output again.

Magicbricks

Magicbricks’ official help guidance lists JPG, GIF, BMP, and PNG formats, a maximum file size of 4 MB, and minimum dimensions of 600 × 400 pixels. These are Magicbricks requirements as published in its help pages; recheck the current upload guidance before relying on them. Its image guidance says photos should match the property type and lists contact number, email, name, address, website, watermark, and company name among reasons for rejection. It also flags human figures, animation, blurred or poor-quality images, and duplicate images across properties. The page allows a project name on floor-plan, master-plan, or location-map images. See Magicbricks help and locate the current photo upload and rejection guidance there.

Magicbricks describes photo screening and says approved photos may be uploaded within 24 hours. Its posting guidance recommends relevant, high-quality images. A designed HTML summary should not be assumed to qualify as a genuine property photograph or to pass screening.

Housing.com and 99acres

Housing.com’s support article describes adding images in the listing edit area, taking pictures in landscape mode except bathroom pictures, and a quality review. That article is dated November 23, 2023, so confirm that its instructions still apply. It does not establish current numeric format, file-size, or resolution limits in the research for this article. Consult Housing.com support.

No authoritative current 99acres numeric upload specification was established for this article. Do not carry Magicbricks’ limits over to 99acres. Check 99acres’ current help or the upload interface for accepted formats, dimensions, size limits, and image-content rules.

Pre-upload checklist

• Confirm that a generated graphic is allowed for the selected image category.
• Use the portal’s current requirements for format, dimensions, and maximum file size.
• Open the final file and check for clipped text, missing images, unexpected overlays, and readable type.
• Confirm property details are accurate and the image is relevant to the listing.
• Use genuine property photos where the portal asks for photos or proof of the actual property.

5. Troubleshooting

Symptom	Likely cause	Fix
Image file is blank or mostly white	Capture ran before content rendered, navigation failed, or the selector matched the wrong element.	Check the page URL and selector. Wait for the relevant content and assets before capturing; inspect the page in a browser.
Photo is missing	Incorrect path, inaccessible remote URL, or the image had not loaded yet.	Check the asset path and browser console. Bundle the asset locally where possible and wait for the image element to complete loading.
Text uses a fallback font	Web font was unavailable or capture began before it loaded.	Bundle the font or wait for document.fonts.ready before taking the screenshot.
Content is clipped	Fixed card dimensions, overflow rules, or text length do not fit the content.	Adjust the composition or copy, then capture again. Do not shrink important text until it is unreadable at thumbnail size.
Output is below the portal’s minimum dimensions	Viewport or device scale factor produced fewer pixels than expected.	Set the intended CSS dimensions and device scale factor, then inspect the output’s real pixel dimensions.
Upload rejects the file size	Image exceeds the destination’s size limit or format is unsupported.	Use a permitted format and reduce dimensions or JPEG quality as appropriate. Recheck the saved file size and visual quality.
Upload rejects the image content	Text, watermark, irrelevant graphic, duplicate, or non-genuine image may violate that portal’s policy.	Read the portal’s current rules for the image category. Submit genuine, relevant property photos when required.

6. Performance, reliability, and cost

For repeated rendering, reuse a browser process where your execution model allows it, create a fresh page for each independent composition, and close pages and browsers reliably. Avoid unnecessarily large viewports and full-page captures when one element is sufficient. Local assets reduce reliance on external servers; explicit waits for fonts and images make output more predictable. Add your own checks for page errors, missing assets, image dimensions, and file size if this becomes an automated publishing step.

Browser automation has setup and maintenance costs: a compatible browser binary, runtime resources, and care around external assets and rendering differences. A screenshot API can remove the need to operate browser infrastructure, but you should still validate the resulting image and portal policy. ScreenshotNeo is a website screenshot API and MCP server from Yorker Media. Its stated plans are 1,000 free shots per month without a card, 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. Every feature is on every plan. Those are ScreenshotNeo prices, not portal upload fees.

Or skip the browser setup

ScreenshotNeo can render a URL as an image through one GET request. Put your HTML somewhere reachable over HTTP, then request its URL. Its screenshot options include element capture, output formats, viewport dimensions, and waiting for page content. See the ScreenshotNeo API documentation for parameter names and configuration.

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

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://example.com/listing.html"},
    timeout=90,
)
r.raise_for_status()
with open("listing.webp", "wb") as f:
    f.write(r.content)

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://example.com/listing.html'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await require('node:fs/promises').writeFile('listing.webp', Buffer.from(await res.arrayBuffer()));

Cookie and consent banners, newsletter popups, and chat widgets are removed before capture; each step can be turned off. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and response headers identify the page verdict and billing status. Its MCP server gives AI agents tools named take_screenshot, get_page_info, and capture_pdf. You still need to check the output format and final file against the destination portal’s rules. The free plan includes 1,000 screenshots each month with no card; paid plans start at $5 for 3,000. Sign up for ScreenshotNeo’s free plan.

FAQ

Can I upload an HTML file directly to a property portal?

This workflow produces a static image from HTML. The portal’s upload flow determines which file types it accepts; check that flow and its current help guidance.

Do I need to add photos while posting a property ad online?

Requirements depend on the portal and listing flow. Magicbricks provides photo upload guidance and screening; consult the current instructions for your listing rather than treating one portal’s process as universal.

Will a designed listing card be accepted as a property photo?

Do not assume so. A portal may expect genuine, relevant images of the property, and its content rules may restrict text or graphics. Verify the rules for the specific image category before uploading.

Can I use WebP for Magicbricks?

The cited Magicbricks guidance lists JPG, GIF, BMP, and PNG. It does not list WebP, so choose a listed format unless current upload guidance says otherwise.

Sources

• Playwright: Screenshots
• Playwright: Installation
• Magicbricks Help Center (check current photo upload and rejection articles)
• Housing.com Support (check current image guidance)