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 →To convert HTML to a JPG, render the page in a browser and save a screenshot in JPEG format. For a local, programmable workflow, Playwright can capture a viewport or full page and set JPEG quality and pixel scale. For a hosted workflow, CloudConvert documents capture from a URL or HTML file. Choose based on where your HTML lives, how much control you need, and whether you want to run a browser yourself.
What “convert HTML to JPG” means
HTML is markup, not an image format. A browser must first interpret the HTML and CSS, load any required fonts and images, and lay out the page. A screenshot tool then captures the rendered result and encodes it as JPEG. This matters because the result depends on the browser’s rendering, viewport, page state, and the time at which the capture happens.
There are two common inputs: a live page available at a URL, or an HTML document you have locally. There are also two different capture scopes: the visible viewport and the full scrollable page. Decide both before choosing a tool; otherwise, a technically successful conversion can still produce the wrong image.
Choose a method and capture scope
| Need | Suitable approach | Key consideration |
|---|---|---|
| Repeatable captures with local control | Playwright browser automation | You install and run the browser and code; you control when capture occurs and the screenshot options. |
| Capture a URL or HTML file without managing a browser pipeline | CloudConvert Website Screenshot API | It is a hosted job/API workflow; check its current options and pricing before relying on them. |
| PHP application already using Puppeteer-based rendering | Browsershot | The project documents rendering a URL or HTML input to images or PDFs. |
Playwright documents JPEG screenshots, full-page capture, a JPEG quality setting, and scale choices for CSS pixels or device pixels in its Page API documentation. CloudConvert describes URL or HTML-file capture and JPG output in its Website Screenshot API documentation. These sources describe capabilities, not independent comparative benchmarks; they do not establish which method is fastest, most accurate, safest, or cheapest for a particular workload.
#1 Best Overall
- One-click Process for Converting Your Images
- Convert Between All Key Image Format
- Preserve Vector Graphics When Converting
Viewport or full page
A viewport screenshot captures the browser’s visible area at the chosen viewport size. It is appropriate for a card preview, above-the-fold view, or a fixed-size social graphic. Full-page capture includes content below the fold and is better for a long article or report. A tall full-page image may be inconvenient to view or share, so use a viewport capture when the output must fit a fixed frame.
CSS pixels or device pixels
Pixel scale affects output dimensions. CSS-pixel scale produces an image at the page’s CSS dimensions; device-pixel scale uses the device scale factor and can produce a higher-resolution image. Higher resolution also increases file size. JPEG quality is a separate control: higher quality generally preserves more detail while increasing output size. Playwright exposes both scale and JPEG quality; set them to suit the destination rather than assuming maximum values are always useful.
Convert HTML to JPG with Playwright
This JavaScript example loads a local HTML file in Chromium, waits for fonts, captures the full page as a JPEG, and saves it as page.jpg. It assumes Node.js is installed and that the file path is correct. Install Playwright and its browser first:
- In a project directory, run
npm install playwright. - Install Chromium with
npx playwright install chromium. - Save the script below as
html-to-jpg.js, changinginput.htmlto your file’s path if needed. - Run
node html-to-jpg.js. The output ispage.jpgin the current directory.
const { chromium } = require('playwright');
const path = require('path');
(async () => {
const browser = await chromium.launch({ headless: true });
const page = await browser.newPage({
viewport: { width: 1440, height: 900 },
deviceScaleFactor: 1
});
try {
await page.goto('file://' + path.resolve('input.html'), {
waitUntil: 'load',
timeout: 30000
});
await page.evaluate(() => document.fonts.ready);
await page.screenshot({
path: 'page.jpg',
type: 'jpeg',
quality: 85,
fullPage: true,
scale: 'css'
});
} finally {
await browser.close();
}
})();
The example uses a 1440-by-900 CSS-pixel viewport and JPEG quality 85 as practical starting settings, not as a universal optimum. Change the viewport to match the layout you need. For a viewport-only image, set fullPage: false. To capture at device-pixel resolution, set scale: 'device' and consider lowering the viewport or quality if the resulting file is too large.
Rank #2
- ONGOING PROTECTION Download instantly & install protection for 5 PCs, Macs, iOS or Android devices in minutes!
- TOP-PERFORMING VPN Faster speeds, more server locations, and greater connection control to protect your privacy across all your devices, including Smart TVs.
- ADVANCED SCAM PROTECTION Help spot hidden scams online. With the built-in Genie AI assistant, you’ll never wonder if a message or email is suspicious again.
- REAL-TIME PROTECTION Advanced security protects against existing and emerging malware threats, including ransomware and viruses, and it won’t slow down your device performance.
- DARK WEB MONITORING Identity thieves can buy or sell your information on websites and forums. We search the dark web and notify you should your information be found.
Capture a live URL instead
For a public webpage, replace the file:// navigation with the page URL:
await page.goto('https://example.com', {
waitUntil: 'networkidle',
timeout: 30000
});
Network idle is not a guarantee that every site is visually ready: pages that continuously make network requests may never reach it, while delayed content can still appear later. If a known element indicates readiness, wait for it before taking the screenshot, for example with await page.locator('main').waitFor(). If that selector does not exist on the page, the wait will fail; use a selector that matches the actual document or use a deliberate short delay where appropriate.
Use a URL for a local page with relative assets
A local HTML file can load differently when opened as a file than when served by a web server, especially if it relies on relative paths or browser security behavior. If the page depends on local assets, serve the directory over HTTP and navigate to the local server URL in Playwright. Keep the server and browser on the same machine or network, and stop the server when the capture is complete. This gives the document a normal web origin and lets relative URLs resolve against it.
Capture a smaller region
To save a particular element rather than the whole page, use Playwright’s locator screenshot API. For example:
Rank #3
- Convert images to jpeg, gif, png, bmp, tiff and more
- Rotate, resize and compress digital photos
- Easily add captions or watermarks to your images
- Compress thousands of photos at a time with batch conversion
- Convert images directly from the right-click menu
await page.locator('.receipt').screenshot({
path: 'receipt.jpg',
type: 'jpeg',
quality: 90
});
Replace .receipt with a CSS selector that identifies the element. A missing or non-unique target can make the capture fail or select an unintended region; confirm the selector against the rendered page before running a batch.
Or skip the browser setup
For a public webpage, ScreenshotNeo offers a one-request screenshot API. This cURL example saves a WebP image; change the target URL to the page you want to capture. 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
Equivalent Python and Node.js calls:
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}`);
ScreenshotNeo is a website screenshot API and MCP server from Yorker Media. Its capture workflow accepts cookie and consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before the shot; each of those steps can be disabled. Bot checks and 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 server through tools including take_screenshot, get_page_info, and capture_pdf. Plans include 1,000 screenshots per month free with no card; paid plans start at $5 for 3,000 shots. Those figures are ScreenshotNeo plan terms, not a comparison with other providers. See ScreenshotNeo for details and sign up free for 1,000 screenshots a month, with no card.
Use CloudConvert for a hosted capture workflow
CloudConvert documents a Website Screenshot API that accepts a URL or HTML file and produces JPG or PNG. Its product page describes full-height capture by default, with options including a custom viewport, zoom, resizing, and waiting for a selector. The operation documentation describes creating a capture job with a URL and output format. This can suit a workflow that already uses CloudConvert’s job model or storage integrations; the available sources do not establish that it is preferable for every project.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsCloudConvert’s product page states a starting price of $0.008 per file. That is a vendor-published price statement, with no publication date shown in the page result, and may change. Verify the current pricing and API details on the product page and capture-website operation documentation before estimating recurring costs.
Rank #4
- SONY IMAGE CONVERTER 2 SOFTWARE
Other implementation choices
PHP with Browsershot
Browsershot is a PHP project that renders pages to images or PDFs through Puppeteer and documents URL or HTML input. It is a potential fit if your application is already built around PHP and you want a browser-driven workflow. Review the project’s current installation requirements and API before implementation; no cross-platform compatibility or performance comparison is established here.
Image format and output expectations
JPG and JPEG refer to the same general image format; the shorter .jpg extension is common. Playwright’s screenshot API calls the type jpeg, so name the output file with either extension as needed. JPEG is lossy, making it a reasonable choice for photographic content, but crisp text, diagrams, and interface edges can show compression artifacts. If your downstream system permits it and visual fidelity for sharp edges is more important than JPEG compatibility, Playwright also supports PNG screenshots; the requested output here is JPG.
Troubleshooting failed or incorrect captures
- Output file is missing: Check that the script reached
page.screenshot(), the current directory is where you expect, and the process has write permission. Thefinallyblock closes Chromium even if navigation or capture fails. - Navigation times out: The site may be slow, unreachable, or waiting on persistent requests. Confirm the URL opens from the same machine, then use a suitable readiness condition rather than waiting indefinitely for network idle. Increase the timeout only when there is a reason to allow a longer load.
- Fonts or images are absent: Confirm the asset URLs resolve from the browser’s context and that the page has finished loading them. The example waits for document fonts; remote images may still need a specific readiness check if they load late.
- Page is cut off: Use
fullPage: truefor the entire scrollable document. If you need a fixed-size image instead, choose a viewport and usefullPage: false. - Text or elements look too small: Check viewport width and whether the site has responsive breakpoints. Device scale changes output pixel density, not the CSS layout width; adjust the viewport if you need a different responsive layout.
- JPG has visible artifacts or is too large: Adjust the JPEG quality. If sharp text must remain lossless, use a lossless format such as PNG when the destination allows it.
- Selector capture fails: Make sure the selector exists after navigation and that any required content has rendered before waiting for or capturing the element.
Performance, reliability, and cost considerations
A local browser workflow gives you control of the code and capture configuration, but your application must install and run the browser, handle navigation failures, and decide how to manage concurrency and retries. A hosted service avoids operating that browser pipeline yourself but introduces a remote request or job workflow, service pricing, and reliance on that provider. These are architectural trade-offs, not measured performance results.
For batch work, avoid launching more browser instances than your machine can support; reuse a browser process where appropriate and close pages when finished. Record failures separately from valid images so a timed-out or blank capture is not mistaken for a successful conversion. For hosted jobs, read the response and job status according to the provider’s documentation before treating an output as complete. None of the reviewed sources provides independent speed, accuracy, uptime, or total-cost benchmarks, so estimate using your own page mix and current provider terms.
Best Value
- Convert JPG, JPEG & PNG to PDF
- Select multiple images
Frequently asked questions
Is changing an HTML file extension to .jpg enough?
No. Renaming changes the filename, not the file contents. Render the HTML in a browser and capture the rendered page as an image.
Can I convert HTML to JPG without opening a visible browser window?
Yes. Playwright can launch Chromium in headless mode, as in the example above. The browser still performs the rendering; its window simply is not displayed.
Does a JPG preserve links and selectable text?
No. A screenshot is a raster image of the rendered appearance. It does not preserve the HTML document’s links, semantic structure, or selectable text.
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.

