The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
To convert HTML to an image in code, render it in a browser and save a screenshot. Playwright, Puppeteer, and Selenium all support this approach; choose based on the language and browser-automation stack you already use, then decide whether you need a viewport, full page, or individual element. For PHP, Browsershot wraps Puppeteer. If you do not want to operate a browser yourself, a hosted screenshot API is another route.
What “HTML to image” means
In these approaches, HTML is laid out and painted by a browser engine, then captured as a raster image such as PNG. That makes the output reflect browser rendering, including CSS and loaded assets, rather than simply converting markup text into pixels. It also means the browser must be able to load the page and its dependencies before the capture is useful.
Before choosing a library, define the capture target: the visible viewport, an entire scrolling page, or a particular element. Also decide the output format and pixel dimensions. Those choices affect the API calls and the result; there is no meaningful universal “best” tool independent of your stack and capture needs.
Recommended Free Tools
1. Use Playwright
Playwright is a browser automation option with page screenshot support. Its official Page API documentation covers screenshot output, including a file path and scale options. The following Python example opens a URL and saves a full-page PNG:
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
from pathlib import Path
from playwright.sync_api import sync_playwright
url = "https://example.com"
with sync_playwright() as p:
browser = p.chromium.launch(headless=True)
page = browser.new_page(viewport={"width": 1440, "height": 900})
page.goto(url, wait_until="networkidle", timeout=60_000)
page.screenshot(path="page.png", full_page=True, scale="css")
browser.close()Install the Python package and browser binaries in your environment before running the script:
python -m pip install playwright
python -m playwright install chromiumHere, full_page=True asks for the full scrollable page rather than only the viewport. Use full_page=False for a viewport capture. The scale choice controls image pixel density: CSS scale produces one image pixel per CSS pixel, while device scale captures device pixels and can make the resulting image larger. Use CSS scale for predictable CSS-sized output; choose device scale when a higher-density image is needed and larger files are acceptable.
Capture one element instead of the page
When the target is a component, use a locator and take the screenshot from it. This avoids capturing unrelated page content:
Free tools Windows power users keep installed
One-click scans. No signup required.
from playwright.sync_api import sync_playwright
with sync_playwright() as p:
browser = p.chromium.launch(headless=True)
page = browser.new_page(viewport={"width": 1440, "height": 900})
page.goto("https://example.com", wait_until="networkidle", timeout=60_000)
page.locator(".product-card").screenshot(path="product-card.png")
browser.close()Replace .product-card with a selector that uniquely identifies the element you want. If the locator matches nothing, the capture cannot proceed; if it matches multiple elements, make the selector or locator more specific.
Readiness and output controls
A navigation event does not guarantee that every image, font, or client-rendered component is ready. Choose a readiness condition appropriate to the site, and wait for a known selector when a page renders important content after navigation. Playwright exposes screenshot options such as output path, applicable image quality settings, and CSS or device scale in its documentation. Image quality applies only to formats that support a quality setting; use PNG when lossless output matters.
2. Use Puppeteer
Puppeteer is a JavaScript library for automating Chrome and Firefox through browser protocols, and screenshots are one of its uses, as described by Chrome for Developers. Its guide demonstrates both page and element screenshots. This Node.js example captures an entire page:
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch({ headless: true });
try {
const page = await browser.newPage();
await page.setViewport({ width: 1440, height: 900 });
await page.goto('https://example.com', {
waitUntil: 'networkidle0',
timeout: 60000
});
await page.screenshot({ path: 'page.png', fullPage: true });
} finally {
await browser.close();
}
})();Install Puppeteer with npm install puppeteer. The documented page-screenshot workflow waits for navigation before capture; the exact readiness condition should suit the site. A network-idle condition can be unsuitable for pages with persistent requests, so a selector or a deliberate wait may be more appropriate where the page has a clear content-ready signal.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minuteCapture a selected element
Puppeteer also supports element screenshots. Select the target and screenshot its handle:
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch({ headless: true });
try {
const page = await browser.newPage();
await page.goto('https://example.com', { waitUntil: 'networkidle0' });
const element = await page.$('.product-card');
if (!element) throw new Error('Could not find .product-card');
await element.screenshot({ path: 'product-card.png' });
} finally {
await browser.close();
}
})();The selector must match the intended element. If a page uses client-side rendering, wait for that element before querying it rather than assuming navigation alone means the content has appeared.
3. Use Selenium
Selenium is a practical fit when your project already uses WebDriver. The example below uses Ruby and Chrome with a device scale factor of 2 for a Retina-style screenshot, then saves the page image:
require "selenium-webdriver"
options = Selenium::WebDriver::Chrome::Options.new
options.add_argument("--headless=new")
options.add_argument("--force-device-scale-factor=2")
driver = Selenium::WebDriver.for(:chrome, options: options)
begin
driver.manage.window.size = Selenium::WebDriver::Dimension.new(1440, 900)
driver.navigate.to("https://example.com")
driver.save_screenshot("page.png")
ensure
driver.quit
endInstall the Selenium Ruby gem with gem install selenium-webdriver, and ensure a compatible Chrome/WebDriver setup is available in the runtime. The device scale factor requests higher-density rendering; it is not a guarantee of a particular output size for every page or driver configuration. Check the saved image dimensions in your own environment.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →This example captures the current browser view. A full-page screenshot workflow can require additional browser-specific handling; the cited example establishes the window resize and device-scale approach, not a universal Selenium full-page method. Selenium, Playwright, and Puppeteer are not ranked here by speed or output quality: the available documentation provides usage examples, not a controlled comparison.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Which approach should you choose?
| Approach | Good fit when | Capture considerations |
|---|---|---|
| Playwright | You want its page and locator screenshot APIs in a supported automation workflow. | Can capture a page or locator; CSS and device scale are documented options. |
| Puppeteer | Your application is in JavaScript and you want page or element capture through Puppeteer. | Choose readiness and page-versus-element capture deliberately. |
| Selenium | Your project already uses WebDriver, including a Ruby/Chrome workflow. | The cited example resizes Chrome and sets a device scale factor; it is not a comparative quality or performance test. |
| Browsershot | You work in PHP and want a wrapper around Puppeteer and headless Chrome. | Accepts a URL, arbitrary HTML, or a local HTML file for image or PDF output. |
Spatie Browsershot is a PHP implementation option. The right choice depends on your language, existing browser stack, and whether you need a viewport, full page, or element. If you would rather call a managed service than maintain browser automation infrastructure, hosted screenshot APIs are another option. Urlbox is one service named as an example; its current prices, limits, and service terms should be checked directly before adopting it.
Or skip the browser setup
If your task is to capture a public URL rather than run a browser locally, ScreenshotNeo is a website screenshot API and MCP server. It returns a PNG, JPEG, WebP, or PDF from one GET request. Its cleanup can accept consent banners and remove more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers report the page verdict and billing status. AI agents can use its MCP tools: take_screenshot, get_page_info, and capture_pdf.
For example, this cURL request saves a WebP screenshot of a URL:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webpSee the ScreenshotNeo API documentation for authentication and available parameters. The same request pattern is available in Python and Node.js:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://example.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://example.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);ScreenshotNeo includes 1,000 screenshots per month on its free plan with no card; paid plans start at $5 for 3,000 shots. Sign up for the free plan to try it.
Best Value
Make the output useful in production
Control the capture dimensions
Set the viewport deliberately rather than relying on a browser default. Responsive layouts can change substantially with viewport width, so use the dimensions that match the consumer of the image. For higher pixel density, select a device-scale approach where supported and account for the larger resulting files. Confirm actual output dimensions for the browser and driver combination you deploy.
Wait for the content you need
Choose an explicit readiness strategy: navigation state, a target selector, or an application-specific signal. Pages can continue changing after the initial document loads because of JavaScript, fonts, images, or API requests. Capturing too early can produce missing content; waiting for network activity to stop may never complete on a page with persistent connections. A target-specific wait is often the clearest signal when you know which element must appear.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallCrashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteKeep browser work bounded
Browser capture involves launching or reusing a browser process, navigating, loading page resources, and writing an image. Set navigation timeouts, close pages and browsers when work finishes, and use a cleanup path such as finally so failed navigation does not leave processes behind. For repeated captures, measure your own workload and choose a browser lifecycle that balances startup cost with isolation; no comparative benchmark establishes one of these libraries as universally faster.
Troubleshooting
- The screenshot is blank or incomplete: the page may not have rendered its client-side content yet, or navigation may have failed. Wait for a target selector or application-ready condition and inspect the page before saving.
- An element screenshot fails: the selector may not match, may identify the wrong node, or may appear only after asynchronous rendering. Verify the selector and wait for the intended element.
- Images or fonts are missing: capture may occur before those resources load, or the page may not be able to fetch them. Choose a more suitable readiness condition and verify the page’s resource access.
- A network-idle wait hangs or times out: persistent requests can prevent an idle state. Wait for a relevant selector or use a site-specific readiness condition instead.
- The image is larger or softer than expected: CSS scale and device scale produce different pixel dimensions. Choose the intended scale and inspect the saved image dimensions; a larger file is a normal trade-off of capturing more device pixels.
- The browser does not launch: confirm the required browser binaries or compatible Chrome/WebDriver installation are present in the environment. For Playwright, install the browser with its install command; for Selenium, check the driver and browser compatibility.
- The output is only the viewport: page screenshot defaults and driver support differ. In Playwright set
full_page=True; in Puppeteer setfullPage: true. The Selenium example above demonstrates viewport capture, not a general full-page recipe.
FAQ
Can I convert an HTML string rather than a live website?
Browsershot accepts arbitrary HTML and local HTML files as well as a URL. For the browser automation examples, first load or construct the HTML in a page, then capture that page or a selected element.
Can the result be a PDF?
Yes. Browsershot supports PDF output, and ScreenshotNeo’s API and MCP include PDF capture. The Playwright, Puppeteer, and Selenium examples above are image captures.
Is one of the three browser tools objectively the fastest?
No comparative benchmark is established here. Choose based on your language, current automation stack, target capture, and operational needs, then benchmark your own representative pages if throughput matters.
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.
