Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Clear out junk files and repair common Windows errors3Fix the driver behind crashes, sound loss and screen glitchesUse a headless browser to render each HTML file, then save a JPEG screenshot in a loop. A browser is required for CSS layout, web fonts, images and JavaScript; changing .html to .jpg only changes a filename. For most batches, Playwright or Puppeteer provides the best fidelity and control. The workflow below covers local files, full-page output, timing, naming, JPEG quality and common failures.
Choose the right conversion method
Your choice depends on what the HTML contains and what the JPG is for.
| Method | Best for | Important trade-off |
|---|---|---|
| Playwright or Puppeteer | Modern CSS, JavaScript, web fonts, responsive layouts and full-page captures | Requires installing a browser runtime and writing a short script |
| wkhtmltoimage | Simple, mostly static HTML and a quick command-line loop | Verify rendering of modern JavaScript and CSS with your installed version |
| ImageMagick | Converting already-rendered PNGs to JPEG, resizing and setting quality | It is a raster post-processor, not an HTML renderer |
| Screenshot API | Unattended or remote batches without maintaining browsers | Requires an API key and network access |
For reports or documents, capture the full scrollable page. For a fixed-size card, thumbnail or preview, capture only the viewport. Keep a PNG master when text must remain pixel-perfect or when transparency matters; JPEG is lossy.
Prepare the HTML folder
Place source files in one directory and write images to a separate directory so reruns cannot overwrite your inputs. Deterministic names make automation and later processing predictable.
#1 Best Overall
- Read Before You Buy — No Video Output: These adapters support charging and USB 2.0 data transfer, but cannot transmit video signals. Except for standard USB webcams (which use USB data only), they are not compatible with HDMI/DisplayPort cables, video-capable USB-C hubs, or docking stations with video output.
- Convert USB-A Ports to USB-C: Designed to connect USB-C earphones, cables, flash drives, card readers, and other USB-C accessories to standard USB-A ports. Plug-and-play with no drivers or software required.
- Aluminum Alloy Housing: Built with a sturdy aluminum alloy shell that aids in heat dissipation and protects against daily wear and scratches. Designed to maintain a stable and secure connection.
- Compact & Travel-Friendly: The ultra-compact design allows the adapter to stay plugged into your device without blocking adjacent ports or adding bulk, reducing wear and tear on your original USB ports.
- 12-Month Warranty: Backed by a 12-month manufacturer warranty for peace of mind. Designed to meet strict quality control standards for reliable everyday performance.
project/
html/
invoice-001.html
invoice-002.html
jpg/Local pages that use relative images, ES modules or fetch() may fail under a file:// URL because browsers apply origin security rules. If that happens, serve the folder locally:
python3 -m http.server 8000 --directory htmlThen use URLs such as http://127.0.0.1:8000/invoice-001.html. This keeps relative paths working while remaining local.
Batch conversion with Playwright and Node.js
Playwright’s CLI and browser API support viewport screenshots, full-page screenshots and JPEG output. Its documentation describes a “Screenshot of the viewport,” a separate full-scrollable-page option and JPEG as a supported type (Playwright screenshot commands). The Node.js API is preferable for a folder because one browser can process every file.
Install
mkdir html-to-jpg
cd html-to-jpg
npm init -y
npm install playwright
npx playwright install chromiumCreate the batch script
Save this as convert.mjs beside your html directory:
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →import { chromium } from 'playwright';
import { readdir, mkdir } from 'node:fs/promises';
import path from 'node:path';
import { pathToFileURL } from 'node:url';
const inputDir = path.resolve('html');
const outputDir = path.resolve('jpg');
const browser = await chromium.launch();
const context = await browser.newContext({
viewport: { width: 1440, height: 900 },
deviceScaleFactor: 1
});
const page = await context.newPage();
await mkdir(outputDir, { recursive: true });
const files = (await readdir(inputDir))
.filter(name => name.toLowerCase().endsWith('.html'))
.sort();
for (const file of files) {
const source = path.join(inputDir, file);
const base = path.basename(file, path.extname(file));
const target = path.join(outputDir, `${base}.jpg`);
const url = pathToFileURL(source).href;
await page.goto(url, { waitUntil: 'networkidle' });
await page.evaluate(() => document.fonts?.ready);
await page.screenshot({
path: target,
type: 'jpeg',
quality: 85,
fullPage: true
});
console.log(`${file} -> ${target}`);
}
await browser.close();Run it with:
node convert.mjsnetworkidle waits for network activity to settle, while document.fonts.ready prevents a capture before web fonts finish loading. Neither is a universal guarantee: pages with polling, advertisements or long-running connections may never become truly idle. In those cases, wait for a page-specific selector or use a bounded delay.
Use a local HTTP URL instead of file URLs
Replace the navigation line with a server URL when your files need an origin:
await page.goto(`http://127.0.0.1:8000/${encodeURIComponent(file)}`, {
waitUntil: 'networkidle'
});For nested folders, preserve the relative path rather than encoding the entire pathname as one segment.
Rank #2
- 5-in-1 USB-C Hub: Experience comprehensive connectivity featuring a Power Delivery input, two USB-A 2.0 ports, a USB-A 3.0 port, and an HDMI port. (Note: The USB-C power delivery input port is only for connecting an external wall charger to power your laptop and cannot power peripheral devices.)
- 90W Pass-Through Charging: Achieve optimal charging with 90W pass-through power to your laptop, supported by a total input of 100W, with the hub reserving 10W for operational efficiency. (Note: Wall charger not included.)
- Quick Data Transfers: Accelerate your productivity with rapid data transfers using a high-speed 5Gbps USB 3.0 port and two 480Mbps USB 2.0 ports.
- 4K HDMI Display: Enhance your visual experience with a hub capable of delivering 4K resolution at 30Hz in both mirror and extend modes. Please note that this hub is compatible with MacBook (macOS 12 and newer), Windows 10 and 11, ChromeOS, and laptops equipped with DP Alt Mode and Power Delivery. Note: This device is not compatible with Linux.
- What You Get: Anker USB-C Hub (5-in-1, 4K HDMI), welcome guide, 18-month warranty, and our friendly customer service.
Capture only the viewport or one element
Change fullPage: true to fullPage: false for a fixed viewport. To capture a component instead, locate it and screenshot the locator:
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
await page.locator('.invoice').screenshot({
path: target,
type: 'jpeg',
quality: 90
});Set a deliberate viewport width because responsive breakpoints change the rendered design. Increase deviceScaleFactor for sharper output, but expect larger files and more memory use.
Playwright CLI for a quick one-off or shell loop
The CLI runs headless by default. A single local capture is conceptually:
mkdir -p jpg
playwright-cli open "file:///absolute/path/to/html/page.html"
playwright-cli screenshot --full-page --filename="jpg/page.jpeg"For several files, a shell loop can generate deterministic names, although a Node script is easier to extend with waits and error handling:
mkdir -p jpg
for f in html/*.html; do
base=$(basename "$f" .html)
# Open "$f" with your Playwright CLI workflow and write "jpg/$base.jpeg".
doneConsult the Playwright CLI getting-started guide for the exact CLI installation and command syntax for your installed release.
Puppeteer alternative
Puppeteer’s documented pattern is page.goto(..., { waitUntil: 'networkidle2' }) followed by page.screenshot() (Puppeteer screenshots guide). The equivalent batch structure is:
import puppeteer from 'puppeteer';
import { readdir, mkdir } from 'node:fs/promises';
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.setViewport({ width: 1440, height: 900 });
await mkdir('jpg', { recursive: true });
for (const file of (await readdir('html')).filter(f => f.endsWith('.html')).sort()) {
const base = file.slice(0, -5);
await page.goto(`file://${process.cwd()}/html/${file}`, { waitUntil: 'networkidle2' });
await page.screenshot({ path: `jpg/${base}.jpg`, type: 'jpeg', quality: 85, fullPage: true });
}
await browser.close();Adapt URL handling for spaces and nested paths; using a properly encoded file URL is safer than string concatenation.
Rank #3
- Sleek 7-in-1 USB-C Hub: Features an HDMI port, two USB-A 3.0 ports, and a USB-C data port, each providing 5Gbps transfer speeds. It also includes a USB-C PD input port for charging up to 100W and dual SD and TF card slots, all in a compact design.
- Flawless 4K@60Hz Video with HDMI: Delivers exceptional clarity and smoothness with its 4K@60Hz HDMI port, making it ideal for high-definition presentations and entertainment. (Note: Only the HDMI port supports video projection; the USB-C port is for data transfer only.)
- Double Up on Efficiency: The two USB-A 3.0 ports and a USB-C port support a fast 5Gbps data rate, significantly boosting your transfer speeds and improving productivity.
- Fast and Reliable 85W Charging: Offers high-capacity, speedy charging for laptops up to 85W, so you spend less time tethered to an outlet and more time being productive.
- What You Get: Anker USB-C Hub (7-in-1), welcome guide, 18-month warranty, and our friendly customer service.
wkhtmltoimage for simple static files
The wkhtmltoimages project documents a command-line utility that accepts URLs and local HTML and writes JPG or PNG (wkhtmltoimage README). A basic loop is:
mkdir -p jpg
for f in html/*.html; do
base=$(basename "$f" .html)
wkhtmltoimage "$f" "jpg/$base.jpg"
doneCheck representative pages before adopting this route. Modern JavaScript, newer CSS features, web fonts and client-side rendering can differ from a current Chromium-based browser. The exact result depends on the wkhtmltoimage version and its rendering engine.
Recommended Free Tools
JPEG quality, dimensions and post-processing
Choose quality deliberately
JPEG quality trades file size against sharp edges and text detail. Start around 85, inspect small text at 100% zoom, and raise quality when artifacts are visible. Do not repeatedly recompress the same JPEG; render once and derive delivery sizes from the master.
Resize or convert PNG masters with ImageMagick
ImageMagick accepts filename globbing and numbered output references; the output extension selects JPEG. After rendering PNGs:
magick 'rendered/*.png' -quality 85 'jpg/page-%03d.jpg'Its command-line processing documentation covers globbing, sequences and format behavior (ImageMagick command-line processing). JPEG is single-frame, so animated or multi-frame inputs need a separate frame-selection policy.
Very tall pages
Full-page screenshots can produce extremely tall JPEGs. Some viewers, uploaders and image pipelines impose maximum dimensions. Set a fixed width, inspect output dimensions, and split long documents into sections when the destination cannot accept one tall image. If pagination is required, PDF may be a better intermediate than one continuous raster.
Reliability checklist for unattended batches
- Sort input names and create the output directory before processing.
- Log each source, destination, elapsed time and failure.
- Use a per-page timeout so one broken document cannot block the batch forever.
- Wait for fonts, images and the application’s meaningful ready selector.
- Keep failed inputs for retry instead of silently producing blank images.
- Limit concurrency to available CPU and memory; one browser with sequential pages is a safe starting point.
- Test pages containing external resources, cookies, lazy-loaded images and responsive breakpoints.
Troubleshooting common failures
The JPG is blank or only partly rendered
Cause: capture occurred before JavaScript, fonts or images completed. Fix: wait for a specific selector, document.fonts.ready, image completion, or a short bounded delay. For lazy images, scroll through the page before the screenshot so they load.
Rank #4
- Dual Converters, Infinite Potential：Includes 2× USB C male to USB A female adapters and 2× USB A male to USB C female adapters. Perfect for a wide range of uses—tablets with Bluetooth keyboards, expand USB ports on macbook, and more. Two different converters for all your daily needs
- Next-Level 10Gbps & 3A Charging: No more slow 480Mbps, this usb to usb c adapter has a transfer speed of up to 10Gbps, allowing you to do more transferring in less time. This usb adapter fits both USB A and USB C charger, supporting up to 3A fast charging
- Upgraded Exquisite Craftsmanship: With an aluminum alloy housing and metal connector, the usbc to usb adapter is extremely durable and sturdy. Rigorously tested to withstand more than 10,000 times of plugging and unplugging, ensuring long-lasting performance
- Broad Compatible: The usb c to usb adapter widely supports all USB C/ USB A devices like laptops, tablets, cellphones, car chargers, and phone chargers. Such as compatible with MacBook Pro/Air 2023/2022, Thunderbolt 4/3 Devices,Apple MagSafe Watch 9/8/7/SE/Ultra, iPad Pro 2022/2021, Samsung Galaxy S23/S20/S10, and iPhone 17/16/15 Pro. Plug and play
- Please Note: To reach 10Gbps speed, keep the cable under 3.3 ft. For USB A Male to USB C adapters, try flipping the USB C connector. USB C Male to USB A adapters support bidirectional 10Gbps transfer within 3.3 ft
Relative images or scripts do not load
Cause: file:// origin restrictions or incorrect relative paths. Fix: serve the directory with python3 -m http.server and navigate to http://127.0.0.1; inspect browser console errors.
Fonts change between runs
Cause: remote font requests, fallback fonts or a capture before fonts are ready. Fix: bundle fonts where possible, wait for document.fonts.ready, and use the same browser version and viewport for every file.
The output is unexpectedly cropped
Cause: viewport capture was used instead of full-page capture, or content expands after measurement. Fix: set fullPage: true, wait for layout changes to finish, and verify the page’s scroll height.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Some files fail while others succeed
Cause: malformed HTML, missing assets, navigation timeouts or resource-specific errors. Catch errors per file, record the filename and retry after correcting that input; do not treat a zero-byte or tiny image as success.
JPEG text looks fuzzy
Cause: lossy compression or insufficient pixel density. Keep a PNG master, raise JPEG quality, increase device scale factor, or deliver PNG when exact text rendering is required.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server. One GET request renders a URL to PNG, JPEG, WebP or PDF. It accepts cookie and consent banners before capture and removes more than 60 known consent platforms, newsletter popups and chat widgets; each cleanup step can be disabled. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads and cache hits are not billed, and the response identifies the page verdict and billing status in X-Page-Verdict and X-Billed headers.
For files exposed through a local or staging URL, use the API call below (replace the target URL and key):
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo documentation for all parameters. The same service supports full-page capture, CSS-selector elements, dark mode, 12 device presets or custom viewports, retina scale, PDF paper and page options, custom CSS and JavaScript, click and wait actions, blocked ads or resource types, headers, cookies, user agents, authorization, timezone, geolocation, transparent backgrounds, resizing, selectable cache TTLs, signed image links, asynchronous jobs with signed webhooks, bulk capture of up to 100 URLs per call, a usage API and an OpenAPI specification. Parameter names used by other screenshot APIs also work.
Best Value
- 5-in-1 Connectivity: Equipped with a 4K HDMI port, a 5 Gbps USB-C data port, two 5 Gbps USB-A ports, and a USB C 100W PD-IN port. Note: The USB C 100W PD-IN port supports only charging and does not support data transfer devices such as headphones or speakers.
- Powerful Pass-Through Charging: Supports up to 85W pass-through charging so you can power up your laptop while you use the hub. Note: Pass-through charging requires a charger (not included). Note: To achieve full power for iPad, we recommend using a 45W wall charger.
- Transfer Files in Seconds: Move files to and from your laptop at speeds of up to 5 Gbps via the USB-C and USB-A data ports. Note: The USB C 5Gbps Data port does not support video output.
- HD Display: Connect to the HDMI port to stream or mirror content to an external monitor in resolutions of up to 4K@30Hz. Note: The USB-C ports do not support video output.
- What You Get: Anker 332 USB-C Hub (5-in-1), welcome guide, our worry-free 18-month warranty, and friendly customer service.
Python
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)Node.js
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);The Free plan includes 1,000 screenshots per month without a card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account to start.
FAQ
Can I convert HTML to JPG without opening a browser?
Not faithfully for modern pages. An HTML renderer—normally a headless browser or a tool built on one—must first paint the page into pixels.
Should I use JPG or PNG for text-heavy documents?
Use PNG as the archival or editing master. Use JPG when smaller files are more important and the resulting text remains readable at the intended display size.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchHow do I preserve clickable links?
A JPG contains pixels only; links and accessibility metadata are lost. Keep the original HTML or export a PDF when interactive or searchable content is required.
Frequently Asked Questions
Can a batch include HTML files in nested directories?
Yes. Walk the directory tree, preserve each file’s relative path, and create matching output subdirectories; avoid flattening names that may collide.
Why does a page that works online differ when loaded locally?
Origin-dependent requests, absolute URLs, service workers, authentication and content-security policies can change behavior. Test the same deployment URL or serve local files over HTTP.
Is full-page capture suitable for printing?
It creates one continuous raster image, not paginated paper. Use a PDF workflow when page breaks, selectable text or print margins matter.
Free tools Windows power users keep installed
One-click scans. No signup required.
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.
