Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

HTML must be rendered by a browser before it can become a JPG or PNG. For a one-off capture, use Chrome Headless; for repeatable scripts, use Playwright. Choose a viewport, full-page, or element capture based on what you need, then check the saved image for content that loads asynchronously.

Choose a conversion method

Converting HTML to an image means capturing the browser-rendered result, not translating the HTML source directly. The right method depends on what you have and how often you need to capture it.

Method Input and best fit What to know
Chrome Headless A URL; a quick command-line capture Supports a screenshot flag and window-size option. Check behavior against your installed Chrome version because the cited command-line reference is older.
Playwright A URL in a repeatable script Offers viewport, full-page, and element screenshots, with format and image options.
Browsershot A URL, HTML string, or local file; software-library workflow Spatie Browsershot uses Puppeteer with headless Chrome behind the scenes. The cited repository summary does not establish that it is faster or better than alternatives.
wkhtmltoimage A command-line workflow using its rendering tool The project describes it as a headless Qt WebKit tool. The project page is old in the search results; current maintenance and suitability are not established here.
Hosted API A URL or HTML submitted to a service html2img documents HTML-to-image and Screenshot endpoints that can return PDF instead of PNG using a format parameter. Check a provider’s current privacy and retention policies before sending sensitive content.

For most developers who need controlled, repeatable output, the Playwright examples below are a practical starting point. If you already have HTML as a string or local file, choose a library that explicitly accepts that input rather than assuming a URL-only screenshot command will handle it.

Convert a URL with Chrome Headless

Chrome’s headless command-line reference documents --screenshot for saving a screenshot and --window-size for setting the capture window. A basic invocation is:

What’s actually slowing this PC down?

Pick the symptom - the matching free tool is one click away.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
#1 Best Overall
Dell Optiplex 7050 SFF Desktop PC Intel i7-7700 4-Cores 3.60GHz 32GB DDR4 1TB SSD WiFi BT HDMI Duel Monitor Support Windows 11 Pro Excellent Condition(Renewed)
  • Model: Dell OptiPlex 7050 Small Form Factor (SFF)
  • Processor: Intel Core i7-7700 3.60 GHz
  • Memory: 32GB DDR4 Ram
  • Storage: 1TB Solid State Drive (SSD) Fast Boot + Storage
  • Operating System: Windows 11 Pro (64-bit)
chrome --headless --screenshot="capture.png" --window-size=1440,1000 "https://example.com"

The exact executable name can differ by operating system and installation. Use the Chrome executable available on your machine. To save a JPEG, use a .jpg output filename if supported by your installed version, or use Playwright’s explicit format option for predictable format selection.

The Chrome reference also describes --timeout as a maximum wait before capture when a page is still loading. Its current behavior may vary by Chrome version, so check the flags supported by the version you have installed. A timeout does not guarantee that every animation, API response, or lazy-loaded image has finished.

Capture with Playwright

Playwright is the programmatic route when you want to repeat a capture, choose its scope, or set image options in code. Its documentation says you can “Capture the viewport, a specific element, or the full scrollable page.” The screenshot guide lists PNG, JPEG, and WebP as possible output types; the Page API documents PNG as the default.

Install Playwright

For Node.js, install the package and its browser binaries:

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
npm init -y
npm install playwright
npx playwright install chromium

Save a viewport screenshot as PNG

This complete Node.js example opens a URL, waits for the page load event, and saves the visible viewport:

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch({ headless: true });
  const page = await browser.newPage({ viewport: { width: 1440, height: 1000 } });

  try {
    await page.goto('https://example.com', {
      waitUntil: 'load',
      timeout: 60000
    });
    await page.screenshot({ path: 'capture.png', type: 'png' });
  } finally {
    await browser.close();
  }
})();

Replace the URL and viewport dimensions with your target. The load event is a useful baseline, but it does not prove that content rendered later by scripts is ready. If the page has a known element that appears only after data loads, wait for that element before calling screenshot.

Rank #2
Apple 2026 MacBook Neo 13-inch Laptop with A18 Pro chip: Built for AI and Apple Intelligence, Liquid Retina Display, 8GB Unified Memory, 256GB SSD Storage, 1080p FaceTime HD Camera; Blush
  • AN AMAZING MAC AT A SURPRISING PRICE — With an incredibly portable and durable aluminum design, up to 16 hours of battery life,* and the A18 Pro chip, MacBook Neo is ready to go wherever school takes you.
  • FOUR STUNNING COLORS. ONE DURABLE DESIGN — Choose from four beautiful colors — Silver, Blush, Citrus, or Indigo — each with a color-coordinated keyboard. And MacBook Neo is made with a durable recycled aluminum enclosure that helps it reach 60 percent recycled content by weight — the most ever in any Apple product.*
  • FLY THROUGH EVERYDAY ASSIGNMENTS — Whether you’re cramming for finals, using Apple Intelligence* to summarize class notes, creating presentations, or even playing the latest Apple Arcade game,* MacBook Neo delivers the performance and AI capabilities you need to get things done.
  • UP TO 16 HOURS OF BATTERY LIFE — MacBook Neo delivers all day battery life, so you can power through from early morning classes to late night study sessions without worrying about plugging in.
  • A VIBRANT 13-INCH DISPLAY* — The gorgeous Liquid Retina display on MacBook Neo supports 1 billion colors, so photos and videos pop and text is crisp for easy reading.

Save a JPEG and set quality

Use type: 'jpeg' and a quality value from 0 to 100. The documented default JPEG quality is 80; set it explicitly if your output needs a repeatable quality setting.

await page.screenshot({
  path: 'capture.jpg',
  type: 'jpeg',
  quality: 85
});

JPEG is lossy, so it is appropriate when that format is required and some compression loss is acceptable. Do not assume it will always be smaller or look better than PNG; the result depends on the page and the chosen settings.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Capture the full scrollable page

For a long page, set fullPage: true. This captures beyond the current viewport:

await page.screenshot({
  path: 'full-page.png',
  fullPage: true
});

A full-page image can be much taller than the viewport. If the page uses lazy-loaded images or content that appears only as the reader scrolls, verify that the output includes it; the default screenshot does not promise that all such content has loaded. You may need to wait for the relevant content or use a page-specific scrolling approach before capture.

Capture one element

When only a chart, card, or other component is needed, capture its locator rather than the whole page:

const chart = page.locator('#chart');
await chart.waitFor({ state: 'visible' });
await chart.screenshot({ path: 'chart.png' });

Replace #chart with a selector that uniquely identifies the target. Waiting for visibility helps when the element is inserted after navigation, but it does not necessarily mean its data or internal animation is complete.

Free tools Windows power users keep installed

One-click scans. No signup required.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
Rank #3
Sale
HP Essential 2026 Laptop Student Business, Ultra Light, 4GB RAM, Intel CPU
  • Performance: Powered by Intel Celeron N4500 dual-core processor with up to 2.8 GHz burst frequency and 4MB L3 cache, this HP Chromebook delivers smooth multitasking for everyday computing. With 4GB LPDDR4x-2933 RAM and Intel UHD Graphics, enjoy seamless web browsing, video streaming, and productivity apps. Chrome OS boots in seconds and updates automatically, keeping your laptop secure and running at peak performance for students, professionals, and home users.
  • Immersive 14-Inch HD Display: Experience clear, vibrant visuals on the 14-inch diagonal HD (1366 x 768) anti-glare display with 250 nits brightness and 62.5% sRGB color accuracy. The micro-edge design maximizes your viewing area with an impressive 80% screen-to-body ratio, perfect for streaming movies, video calls, and document editing. The anti-glare coating reduces eye strain during extended use, making it ideal for all-day productivity and entertainment in any lighting condition.
  • Advanced Connectivity & Ports: Stay connected with Wi-Fi 6 (2x2) for faster wireless speeds and Bluetooth 5.3 for seamless device pairing. Equipped with versatile ports including 1 USB Type-C 10Gbps (with USB Power Delivery and DisplayPort 1.4), 2 USB Type-A 5Gbps ports, 1 HDMI 1.4b, and 1 headphone/microphone combo jack. Connect external monitors, transfer files quickly, charge your device, and expand your workspace effortlessly for maximum productivity and flexibility.
  • All-Day Battery & Premium Design: The battery keeps you powered throughout your day, while the included 45W USB Type-C power adapter ensures fast charging. Featuring a sleek modern grey finish with vertical brushing pattern on the keyboard deck, this lightweight 3.35 lb Chromebook combines style and portability. The full-size modern grey keyboard and HP Imagepad provide comfortable typing and precise navigation for work, school, or entertainment on the go.
  • Enhanced Security & Multimedia: Built-in H1 secure microcontroller protects your data and privacy with enterprise-grade security. The HP True Vision 720p HD camera with integrated dual array digital microphones delivers crystal-clear video calls and online meetings. HD Audio with stereo speakers provides rich, immersive sound for music, videos, and calls. With 64GB eMMC storage, you have ample space for essential files while Chrome OS seamlessly integrates with Google Drive for cloud storage.

Choose image scale and background

Playwright’s screenshot options let you choose CSS-pixel or device-pixel scale. CSS-pixel scale follows the page’s CSS dimensions; device-pixel scale can produce more physical pixels on high-density displays. Pick based on the dimensions expected by the downstream app, not just on the monitor used to view it.

The API also documents omitBackground for preserving a transparent background. It does not apply to JPEG, so use PNG when transparency is required. A page’s own background styling may still affect the result unless the screenshot is configured and the page is styled appropriately.

Convert existing HTML or a local file

A browser-based renderer can capture HTML, but the way you provide it matters. Spatie Browsershot documents three input styles: a URL, an HTML string, and a local file path. It uses Puppeteer with headless Chrome behind the scenes. Consult its documentation for the exact setup and API for your environment; the cited project summary does not establish comparative speed, fidelity, or a universal recommendation.

For local HTML rendered directly in Playwright, navigate to a file URL or set page content, then take the screenshot:

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
const fs = require('node:fs');
const { chromium } = require('playwright');

(async () => {
  const html = fs.readFileSync('page.html', 'utf8');
  const browser = await chromium.launch({ headless: true });
  const page = await browser.newPage({ viewport: { width: 1200, height: 800 } });

  try {
    await page.setContent(html, { waitUntil: 'load' });
    await page.screenshot({ path: 'page.png', fullPage: true });
  } finally {
    await browser.close();
  }
})();

Relative asset paths in an HTML string may not resolve as they do in the original project. For CSS, fonts, or images, use absolute URLs, serve the files from a local web server, or navigate to the local file when that better matches the intended rendering.

Choose PNG or JPG

Need Choose Reason
Transparent background PNG Playwright documents transparent-background capture through omitBackground; this option does not apply to JPEG.
Avoid JPEG quality loss PNG PNG is the documented default screenshot type; JPEG uses adjustable lossy quality.
A required JPEG file JPEG Set type: 'jpeg' and choose a quality from 0–100.
A specific output size Either, with the right scale Choose CSS-pixel or device-pixel scale according to the dimensions required by the destination.

File extension and actual encoding should agree. With Playwright, setting both a matching filename and type makes the intent clear. PNG is the default if type is omitted, so do not simply change a filename to .jpg and assume the bytes are JPEG.

Rank #4
Dell Optiplex 3060 Desktop Computer | Intel i5-8500 (3.2) | 32GB DDR4 RAM | 1TB SSD Solid State | Built in WiFi | Bluetooth | Windows 11 Professional | Home or Office PC (Renewed)
  • [INTEL POWERED CONTENT] - Built with a 8th Generation Hexa-Core Intel i5 and 32GB of DDR4 RAM; Modern, Windows 11 ready, with 4K support, Executive multitasking, media streaming and smooth, multi-tab web browsing; Perfect as an all-purpose multimedia computer; built for content creators; Plenty of RAM and Mass storage for photo and video editing powered by Intel HD 630
  • [LATEST WIRELESS TECH] - This Dell Desktop Computer easily connects to the internet through the Built In WiFi / Bluetooth
  • [SOLID STATE STORAGE] - This Dell Computer setup comes with an ultra-fast 1TB Solid State Drive (SSD); Setup as the primary boot device; Boot and load programs with lightning speed ; Additional expansion available
  • [BUY & OWN WITH CONFIDENCE] - From the world's largest Microsoft Authorized Refurbisher; Quality Guarantee and Free Tech Support; Award-winning Customer Service; | Support Sustainable Business
  • [MODERN HI-SPEED PORTS] - USB 3.0 (x4) | USB 2.0 (x4) | DisplayPort (x1) | HDMI Port (x1) | Audio Combo Jack (x1) | Audio Out (x1) | RJ-45 Ethernet (x1) | Internal SATA (x3)

Wait for dynamic content and improve repeatability

Pages often continue changing after the initial navigation event: client-side apps fetch data, images load lazily, and animations advance. No single generic wait condition guarantees that every page is visually complete. Use a condition tied to the target site and inspect the output image.

  • Wait for a meaningful selector with Playwright’s locator or page wait APIs when a specific component signals readiness.
  • Use a deliberate delay only when the page has a known, consistent rendering delay; fixed sleeps can make automation slower and still miss variable loads.
  • Choose a navigation wait condition that matches the page. Waiting for full network idleness can be unsuitable for pages that keep connections open or continuously poll.
  • For full-page captures, check whether lazy-loaded sections were triggered and whether the final image includes them.
  • Set viewport dimensions and screenshot scale explicitly when output dimensions need to remain consistent across runs.

Or skip the browser setup

If you want a URL-to-image call without installing or managing a browser, ScreenshotNeo is a website screenshot API and MCP server. Its clean-shot workflow accepts cookie/consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks/CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, with response headers identifying the page verdict and billing status. Its MCP tools—take_screenshot, get_page_info, and capture_pdf—are available to AI agents and MCP clients.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

One GET request returns an image or PDF. The API also accepts the parameter names used by other screenshot APIs, which can make switching easier. See the ScreenshotNeo API documentation for parameters and response details.

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

PNG, JPEG, or WebP can be requested through the API’s format options; use the documentation for the precise parameter values and other capture settings. Free includes 1,000 shots per month with no card. Paid plans start at $5 for 3,000 shots; every feature is on every plan. For the full schedule, consult the product site.

Sign up free for 1,000 screenshots a month with no card.

Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Troubleshooting

The screenshot is blank or missing content

Check that the page actually loaded and that the URL is reachable from the machine running the browser. If content is created asynchronously, wait for its selector or another page-specific readiness condition before capture. Confirm the final image rather than treating navigation completion as proof that all content appeared.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Images or styles are missing from local HTML

Relative paths may resolve differently when HTML is passed as a string or opened from a different directory. Use absolute asset URLs, serve the project locally, or open the actual file so its path context is preserved.

Best Value
Dell OptiPlex Computer Desktop PC, Intel Core i5 3rd Gen 3.2 GHz, 16GB RAM, 2TB HDD, New 22 Inch LED Monitor, RGB Keyboard and Mouse, WiFi, Windows 11 Pro (Renewed)
  • 🖥POWERFUL PROCESSOR and SUPERIOR STORAGE: Configured with top of the Intel Core i5 processor for lightning-fast, reliable and consistent performance to ensure an exceptional PC experience. 16GB RAM memory to smoothly run multiple applications and browser tabs all at once. 2TB HDD storage space to store apps, games, photos, music, and movies. Loaded with 16GB to zip through multiple tasks in a hurry without lag.
  • 🖥️New 22 Inch Full HD (1920x1080) LED monitor: with 75hz, High-Quality panel with quick refresh rate and response time. With 1080p resolution, you can enjoy gaming or a modern computing experience. 22 Inch monitor has a Smart Contrast to provide optimized image quality. Bezel-less and sleek design with glossy finish, crisp edge-to-edge visuals. Wide Viewing Angles for clarity from any viewpoint. VESA Mountable and built-in tilt options allow for a variety of monitor configurations.
  • ⌨️ +🖱️ RGB KEYBOARD AND MOUSE | RGB SPEAKER: 3 LED Colors - Blue, red, green, Backlight LED Lights for use at night time, looks amazing. The keyboard mouse and speaker are responsive, reliable, and probably plastered in RGB lights. It's important you pick the right one for your desktop.
  • 💿 WINDOWS 10 Pro LATEST: A new installation of the latest Microsoft Windows 11 Professional 64 Bit Operating System software, free of bloatware commonly installed from other manufacturers. As Microsoft's latest and best OS to date, Windows 10 Pro 64 Bit will maximize the utility of each PC for years to come. Optional software such as Anti-Virus and Office 365 can also be easily downloaded through the Microsoft Windows App Store.

The output has the wrong format

With Playwright, specify type: 'png' or type: 'jpeg' explicitly and use a matching extension. Remember that the documented default is PNG.

The result is clipped

A normal screenshot captures the viewport. Increase viewport dimensions if you need a larger visible area, or set fullPage: true to capture the full scrollable page. For a component-only result, take a locator screenshot.

Chrome rejects a flag

Command-line options can change across versions. Check the flags supported by your installed Chrome and adapt the command rather than assuming an older reference exactly matches your binary.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Performance, reliability, and privacy considerations

Browser screenshots require launching a browser, navigating, waiting for the chosen condition, and encoding an image. Reusing an automation setup and avoiding unnecessarily large full-page captures can help keep a script practical, but no comparative performance figures are established for the methods described here. Reliability depends on the target page, its network and scripts, the wait condition, and the renderer version.

A local browser workflow keeps the capture process on your machine, but network pages still send requests to the site and its assets. With a hosted service, review the provider’s current privacy and retention policies before submitting sensitive HTML or URLs. The available documentation for the services named here does not establish comparative privacy terms, fidelity, or security.

The wkhtmltoimage project page describes an open-source headless Qt WebKit renderer, but its age means current maintenance and compatibility should be checked before adopting it. Likewise, Playwright’s Next documentation is prerelease/branch documentation, and the Chrome command-line reference may not reflect current defaults; verify behavior against the installed versions you use.

Frequently Asked Questions

Can I convert HTML without opening a visible browser window?

Yes. Chrome Headless and Playwright run browser rendering in headless mode; you can save the resulting screenshot without showing a regular browser window.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Can a screenshot include only one HTML component?

Yes. In Playwright, locate the component and call its locator screenshot method to save just that element.

Does a screenshot capture interactive states such as an open menu?

It captures the page as rendered at capture time. Trigger the desired state in the browser automation before taking the screenshot.

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.