Recommended Free Tools
Use a website screenshot when the visual state or control is difficult to explain precisely in words. A useful screenshot is tightly cropped, captured in a reproducible state, connected to numbered instructions, and supported by accessible text. This guide shows how to decide when an image earns its place, capture and annotate it, remove personal information, write alt text, document responsive layouts, and maintain the result as the interface changes.
1. Decide whether a screenshot is necessary
A screenshot should explain something that prose alone would make ambiguous: the location of a control, the appearance of a state, a multi-step interaction, or a responsive difference. Google’s documentation guidance recommends using images when they provide useful visual explanation and capturing only the UI important to the discussion.
Use one when the reader must recognize a visual state
- A control is difficult to find or has an unfamiliar icon.
- A dialog, validation message, selected state, or permission prompt must be recognized.
- The procedure depends on a particular arrangement that cannot be described reliably with words.
- The desktop and narrow layouts change navigation, controls, or interaction.
Do not use one as a substitute for the instructions
Keep the actionable wording in the document. A reader may be using a different viewport, browser, language, zoom level, theme, or product version. A screenshot is evidence of an example state, not the only source of meaning. Do not add decorative captures that repeat nearby text or make a page harder to maintain.
2. Capture a reproducible, focused state
Before capturing, create a small capture specification for the document set. Record the product version or date, browser, viewport width and height, zoom, theme, locale, account state, and the data shown. Repeat the same convention—browser chrome included or excluded, image format, border treatment, and annotation style—throughout the guide.
#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.
Prepare the page
- Open the exact URL and wait for the page to finish loading.
- Set the viewport, zoom, theme, and locale required by the procedure.
- Use representative, non-sensitive data and reach the precise state the reader must reproduce.
- Dismiss unrelated notifications and close panels that are not part of the task.
- Capture only the relevant region. Cropping reduces distraction and makes later UI changes less likely to invalidate the image.
Choose the crop
Include the visible label, surrounding context needed to identify the control, and any resulting state that the written step describes. Exclude browser tabs, bookmarks, unrelated navigation, personal account details, and empty margins. If a control’s position changes by viewport, capture each meaningful layout rather than implying that one position is universal.
3. Annotate screenshots so actions are unambiguous
Visual markers connect what the reader sees to what the reader must do. Mozilla’s screenshot guidance describes markers as key to clear, user-friendly documentation. Use a consistent marker system across the document.
Number the actions
- Put a numbered marker beside the first control to use.
- Continue in the order of the procedure; do not number unrelated controls.
- Match every number to one written instruction.
- Keep markers outside text labels when possible so they do not obscure the control.
For example, write “Select Billing (1), choose Invoices (2), then select Download PDF (3).” The screenshot should show markers 1, 2, and 3 at those controls. Refer to visible labels rather than “the button on the right.” Directional wording depends on reading order, localization, zoom, and responsive layout.
Make annotations accessible and legible
- Use high contrast, a readable size, and shapes that remain distinguishable without color.
- Do not cover the label, icon, value, or error message the reader needs.
- Use a short legend only when marker meaning is not obvious.
- For a long flow, split the procedure into several focused images instead of covering one page with arrows.
4. Remove personal information before publication
Inspect every capture for names, email addresses, account IDs, order numbers, tokens, addresses, customer records, internal URLs, and browser notifications. Replace test data before capture whenever possible. If a source image contains personally identifiable information, Google recommends a solid-color overlay at 100% opacity. Do not rely on blur or mosaic: those effects can be reversed.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Repair Windows errors before they cause bigger problems3Scan for outdated or missing drivers - takes under a minuteRedaction checklist
- Cover the entire value, including characters near the edge and text revealed by selection or hover.
- Redact both the main page and any visible tooltip, dropdown, browser notification, or developer overlay.
- Export the redaction as part of the flattened image; do not leave an editable layer that exposes the original.
- Reopen the exported file, zoom in, search metadata where applicable, and inspect it as a reader would.
- Repeat the inspection after resizing, recompressing, or converting formats.
5. Write useful alternative text and surrounding text
W3C states that images need text alternatives describing the information or function they represent. MDN recommends a descriptive label for every screenshot object, while Digital.gov warns that screen readers process screenshots of text as photos. Put the important words in real document text as well as in the image.
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.
Informative screenshots
Describe the state and the task-relevant relationship, not every pixel. “Invoices page with the Status filter set to Paid and the Download PDF button visible” is more useful than “Screenshot of a webpage.” If the image demonstrates a result, state that result.
Functional screenshots
When the image is acting as a link or control, describe its destination or function. The accessible name should agree with the visible label and the surrounding instruction.
Decorative screenshots
If an image adds no information beyond adjacent text, use a null alternative in the implementation and keep it out of the reading flow. Never place essential instructions only inside a decorative image.
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 reinstallOutdated 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 match6. Keep the document accessible without the image
Use semantic headings, meaningful control names, keyboard-reachable content, and a written explanation of every important visual fact. Do not make color, an arrow, position, or a numbered circle the sole carrier of meaning. A reader should be able to complete the task with the image hidden, and should understand the image with a screen reader’s alternative.
Write the procedure in reading order
- State the goal and prerequisite.
- Name the control by its visible label.
- Explain the expected result after the action.
- Use the screenshot as confirmation or orientation.
- Describe errors and recovery in text.
Avoid “click the button on the right” or “see the item above.” Labels survive translation, reflow, and different assistive-technology reading orders better than spatial references.
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.
7. Document responsive behavior deliberately
Show narrow and wide form factors when layout, navigation, or interaction changes. MDN’s screenshot metadata guidance describes separate screenshots for narrow and wide device form factors and recommends descriptive labels. Label each image with the viewport or device category and explain the behavioral difference.
When two captures are warranted
- Desktop navigation becomes a menu or bottom bar.
- Columns stack, controls move, or labels collapse at a breakpoint.
- A gesture, hover action, or touch target replaces a desktop interaction.
- Text wrapping changes the sequence or meaning of a form.
Do not duplicate screenshots merely for decoration. Capture representative widths that demonstrate the actual difference, and test at an intermediate width when a breakpoint could produce a third state.
Free tools Windows power users keep installed
One-click scans. No signup required.
8. Maintain screenshots as the product changes
Give each asset a stable filename and record the page, state, viewport, date, and document section. During UI changes, compare the control labels, focus order, validation states, redactions, and alternative text—not only the pixels. Replace a capture when it misrepresents the current path, hides a changed permission, or contains stale personal data. Keep source files and flattened publication files separate, with access limited to the team that needs them.
9. Choosing a capture approach
Evaluate any approach against six criteria: fidelity to the user’s actual state, clarity after cropping and annotation, privacy exposure, accessibility of the surrounding text and alternative, maintenance cost, and coverage of relevant viewport or device form factors. A manual browser capture is useful for one-off, authenticated flows. Automation is preferable when you need repeatable states, many URLs, or scheduled updates.
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server for developers. It removes cookie and consent banners, newsletter popups, and chat widgets before capture; bot checks, blank pages, timeouts, failed loads, and cache hits are not billed. Each response identifies the page verdict and billing status in X-Page-Verdict and X-Billed headers. Its MCP server lets Claude, Cursor, and other MCP clients use take_screenshot, get_page_info, and capture_pdf.
One GET request returns PNG, JPEG, WebP, or PDF. The API supports full-page capture with lazy images loaded, CSS-selector element capture, dark mode, 12 device presets or a custom viewport, retina scale, PDF paper size/margins/landscape/page ranges, HTML/CSS rendering, custom JavaScript and CSS, pre-capture clicks, hidden selectors, waits for selectors/delays/network idle, request and resource blocking, headers/cookies/user agents/Authorization, timezone and geolocation, transparent backgrounds, resizing, chosen cache TTLs, signed image links, asynchronous jobs with signed webhooks, bulk capture of up to 100 URLs per call, a usage API, an OpenAPI specification, and compatible parameter names used by other screenshot APIs.
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 →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
See the ScreenshotNeo documentation for the current request options. Replace the target URL in these runnable examples:
cURL
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython
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}`);ScreenshotNeo’s Free plan includes 1,000 shots each month with no card. Paid plans start at $5 for 3,000 shots; every feature is available on every plan. Create a free ScreenshotNeo account to begin.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.10. Troubleshooting common documentation failures
The screenshot does not match the reader’s screen
Check viewport, zoom, theme, locale, account permissions, feature flags, and product version. State those prerequisites beside the procedure and capture the relevant responsive form factors.
The control is visible but the step is still confusing
Tighten the crop, add sequential markers, and name the visible label in the sentence. Remove competing panels and explain the expected result after the click.
Text in the image is inaccessible
Transcribe the essential words into real document text, provide a meaningful alternative, and ensure the procedure works with the image unavailable.
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.
Private data remains after redaction
Reopen the exported file at high zoom, inspect tooltips and notifications, flatten the overlay, and recapture with synthetic data if any value is uncertain. Never publish a reversible blur or mosaic.
An automated capture is blank or blocked
Wait for a selector or network idle, supply the required headers or cookies, increase the timeout, and check the response verdict. If a bot check or CAPTCHA prevents a meaningful page, treat it as a failed capture rather than documenting an empty state.
FAQ
Should every step have its own screenshot?
No. Group consecutive actions when one focused image clearly supports them; split images when the state or context changes.
Which image format should documentation use?
Choose the format that preserves readable text at the required size and fits your publishing pipeline. Verify the exported asset, not only the editor preview.
Can I publish a screenshot containing a customer’s data if I have permission?
Use synthetic or minimized data whenever possible. Permission does not remove the risk of accidental redistribution, indexing, or later reuse.
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.
