How to Edit a Website Screenshot

A screenshot is a raster image: its text and controls are pixels, not editable webpage elements. If you can access the live page, edit its rendered HTML or CSS in Chrome DevTools and capture it again. That usually preserves typography and spacing better than painting over flattened pixels. If you only have a PNG or JPEG, use an image editor such as GIMP or Photoshop on the web. If the goal is a collaborative redesign, use Figma to rebuild the screen as editable design layers.

Choose based on what you have and what the result must mean: a recaptured page shows a browser-rendered state; a retouched image is an altered graphic; a Figma reconstruction is a design reference. Do not present an edited screenshot as an unmodified record of the original page.

1. Choose the right editing workflow

What you have	Best fit	Use it for
Access to the live page	Chrome DevTools, then capture again	Changing text, colors, spacing, or visible state while keeping browser rendering
Only a PNG or JPEG	GIMP or Photoshop on the web	Cropping, annotation, redaction, or a visual mockup
A redesign or review task	Figma	Turning the captured screen into editable design layers for collaboration

For a structural change, the browser is the source of truth. DevTools edits are generally temporary browser-side changes; save changes in your project or workspace if they need to persist. A pixel edit can make a mockup, but it cannot change the page that produced the image. Figma layers support design work, but the reconstruction may need manual cleanup for fonts, browser effects, and dynamic states.

2. Edit the live page with Chrome DevTools

Step-by-step

1. Open the page in Chrome at the viewport width you want to show.
2. Right-click the element and choose Inspect. In the Elements panel, find the text or element.
3. Double-click text in the DOM to change the displayed copy. For styling, edit a CSS declaration in the Styles pane or add a declaration such as color: #1d4ed8;.
4. Check the result at the target width. Use device mode when the desired image represents a phone or tablet layout.
5. Capture a viewport, selected node, or full-size page from DevTools. The Command Menu can expose capture commands; search for “screenshot” there and choose the appropriate capture type.
6. Save the image and inspect its dimensions and content before sharing.

The Sources panel supports editing CSS and JavaScript and creating Snippets that can run on a page. For a repeatable change, a small snippet can update matching elements. This runnable example changes the text of a unique selector for the current page session:

document.querySelector('.hero-title')?.replaceChildren('A revised headline');

To add a temporary style from a Snippet:

const style = document.createElement('style');
style.textContent = '.hero-title { color: #1d4ed8; letter-spacing: -0.02em; }';
document.head.append(style);

Replace .hero-title with a selector that matches the actual page. If several elements match, scope the selector more tightly. A page script may rerender and overwrite a manual edit; make the change in the app’s source for a persistent result. A DevTools change alone is not a source-code update.

Full-page and responsive captures

A full-size capture is useful for long pages, but inspect the output for lazy-loaded content, sticky headers, animations, and sections that only appear after scrolling. For a reliable comparison, keep browser zoom, viewport dimensions, device emulation, and page state consistent. If the page has a consent dialog or personalized content, record the state you captured so another person understands why it differs.

For screenshots produced by code, the general sequence is: set viewport, navigate, wait for the relevant state, make the intended edit, then capture. Do not use a fixed delay as the only readiness check if a specific element can be awaited. A screenshot service can automate that sequence, but the browser-side method is useful when you need to inspect and adjust the DOM interactively.

3. Edit an existing PNG or JPEG

Use a raster editor when you cannot alter the source page or when the task is annotation rather than webpage editing. GIMP is a free, open-source local option. Photoshop on the web supports image markup and drawing, with edits placed on generated layers. Keep a separate untouched original so you can undo, compare, or establish what was changed.

Safe editing sequence

1. Make a copy of the source file and open the copy.
2. Crop to the area the reader needs. Decide on the final aspect ratio before adding callouts.
3. For arrows, labels, highlights, or replacement copy, use separate layers where possible. Keep their placement clear of important interface details.
4. For private information, use an opaque fill or a sufficiently strong blur. Check at 100% zoom and around the edges; do not rely on a small translucent overlay.
5. Export a new file, then reopen it to confirm the redaction and dimensions survived export.

PNG is a good choice for crisp interface text, flat colors, or transparency. JPEG can make sense for a photographic image where smaller file size matters and minor compression artifacts are acceptable. Preserve the original and label an edited mockup clearly when it could be mistaken for evidence of the live page.

4. Rebuild a screenshot in Figma

Figma can capture a production website into Figma Design or FigJam and turn coded screens into editable layers. The resulting design can expose layout, color, typography, text strings, component properties, styles, and variables for inspection. This is useful when the screenshot is a starting point for redesign or collaboration.

1. Capture the live site or the relevant section with Figma’s documented capture workflow.
2. Inspect the imported frame and identify elements that need correction, replacement, or restructuring.
3. Replace copy and adjust layout in editable layers; check fonts, wrapping, and spacing against the intended target.
4. Export the frame or share the design file for review.

Expect manual cleanup: browser effects, fonts, responsive behavior, and dynamic content may not translate exactly. A Figma reconstruction is an editable design representation, not proof that the original browser rendered those exact pixels.

5. Redact private information before sharing

Look for email addresses, names, account numbers, access tokens, private URLs, customer records, and personal notifications. Redact before exporting or uploading the image to a collaboration service. An opaque shape is safer than a light blur when the underlying value must not be recoverable visually. At 100% zoom, inspect boundaries and nearby UI for clipped or duplicated text. Reopen the final exported file, because checking only the editor canvas can miss an export mistake.

• Keep an untouched original in a restricted location.
• Export a separate sharing copy with private data removed.
• Remove hidden layers or metadata that should not travel with the file, where the tool supports it.
• When the screenshot is meant as a factual record, disclose annotations and material changes.

6. Capture a clean source image with ScreenshotNeo

If you need a fresh screenshot rather than edits to an existing file, ScreenshotNeo is a website screenshot API and MCP server from Yorker Media. One GET request returns a PNG, JPEG, WebP, or PDF. Its cookie and consent handling can accept banners like a visitor and remove more than 60 known consent platforms, newsletter popups, and chat widgets; each of those steps can be turned off. Bot checks, CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing status.

Or skip the browser setup:

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

See the ScreenshotNeo API documentation for request options and setup. Cookie banners, popups, and chat widgets are removed before the shot; bot checks, blank pages, and failed loads are never billed; an MCP server lets AI agents take screenshots; 1,000 screenshots a month are free with no card, and paid plans start at $5 for 3,000. Sign up for the free plan.

7. Code examples for screenshot capture

These examples fetch an image from ScreenshotNeo. Keep the API key out of source control; read it from an environment variable in a real script. The cURL call above saves the response as shot.webp.

Python

import os
import requests

api_key = os.environ["SCREENSHOTNEO_API_KEY"]
r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": api_key, "url": "https://stripe.com"},
    timeout=90,
)
r.raise_for_status()
with open("shot.webp", "wb") as image:
    image.write(r.content)

Node.js

const apiKey = process.env.SCREENSHOTNEO_API_KEY;
if (!apiKey) throw new Error('Set SCREENSHOTNEO_API_KEY');
const q = new URLSearchParams({ access_key: apiKey, url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
const bytes = new Uint8Array(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', bytes));

Available capture controls

ScreenshotNeo supports full-page capture with lazy images loaded, capture by CSS selector, dark mode, 12 device presets or a custom viewport, retina scale, custom CSS and JavaScript, clicking an element before capture, hiding selectors, and waiting for a selector, delay, or network idle. Requests can use custom headers, cookies, user agent, and Authorization; timezone and geolocation can also be set. Other options include blocking ads, trackers, requests, or resource types; transparent backgrounds; resizing; cache TTL; signed public image links; async jobs with signed webhooks; bulk capture for up to 100 URLs per call; usage API; and an OpenAPI specification. PDF controls include paper size, margins, landscape, and page ranges. HTML/CSS can also be rendered to an image. Parameter names used by other screenshot APIs work to ease migration. Consult the docs for exact parameter syntax before adding options.

8. Troubleshooting

Problem	Likely cause	Fix
Text looks jagged after editing	Text was painted over raster pixels or exported at low resolution	Edit the live DOM and recapture for structural text changes; otherwise use a separate text layer and export at suitable dimensions.
DevTools change disappears	The page rerendered, navigated, or was refreshed	Repeat the edit after the state loads, use a Snippet, or make the change in the site’s source and rebuild.
Wrong element changed	The selector matches multiple elements or is too broad	Inspect matches, scope the selector to a parent, and verify at the intended viewport.
Full-page image misses content	Lazy loading or delayed rendering has not completed	Scroll through the page, wait for the relevant selector or content, then capture again.
Redacted value is still readable	Blur was too weak, the overlay missed an edge, or the edited copy was not exported	Use opaque coverage, inspect at 100%, and reopen the exported copy before sharing.
Screenshot request returns an error	Missing or invalid key, malformed URL, or remote page failure	Check the key and URL, inspect the response status and headers, and retry only after correcting the cause.
Screenshot is blank or shows a challenge	The target is blank, blocked, or presenting a bot check	Check the target in a normal browser and review the response’s page verdict; do not treat a challenge image as the intended page.

9. Performance, reliability, and cost

For local editing, the main performance factors are image dimensions, layer count, and editor memory. Crop before detailed work and avoid repeatedly recompressing JPEGs. For browser capture, consistency depends on a stable viewport and a clear readiness condition; dynamic content, animations, and network delays can produce different images on successive runs. Use a selector or network-idle condition when supported, and keep a known original for comparison.

For service-based capture, asynchronous jobs and signed webhooks suit longer-running or bulk workflows; bulk requests support up to 100 URLs per call. A cache TTL can reduce repeated work for unchanged pages. ScreenshotNeo’s usage API helps inspect consumption, and the response’s verdict and billing headers distinguish clean captures from outcomes that are not billed. Its plans are Free: 1,000 shots/month, no card; Starter: $5 for 3,000; Growth: $15 for 15,000; Pro: $39 for 60,000; Scale: $99 for 250,000; Business: $249 for 1,000,000. Yearly billing gives two months free. Every feature is on every plan. Check the current plan and parameter details in the linked docs before integrating.

10. Frequently asked questions

Can I change the words in a screenshot without Photoshop?

Yes. If you can access the live page, change the rendered text in Chrome DevTools and capture again. If you only have the image, use a raster editor with a separate text layer; matching the original background and typography may take manual work.

Can I edit a screenshot in Figma?

Yes. Figma can turn captured coded screens into editable design layers. Treat the result as a design reconstruction that may need cleanup, rather than an exact record of browser pixels.

What is the safest way to blur personal information?

Use opaque coverage when the data must be unreadable, preserve the original privately, and inspect the exported copy at full size before sharing.

Will DevTools edits change the website for everyone?

No. They change your current browser rendering. Save corresponding changes to the site’s source if you intend to change the actual website.