How to Insert a Screenshot Into a Document or Web Page

Inserting a screenshot has two separate steps: capture the screen if you do not have an image yet, then insert or embed the resulting image in your destination.

Use the method that matches your source and destination:

Situation	Best method
You are working in desktop Word and still need the image	Use Insert > Screenshot or Screen Clipping.
You already have a screenshot file	Insert the picture from your device or cloud storage.
The screenshot is on your clipboard	Paste it into Word or Google Docs.
You are editing a web page	Make the image available at a reachable URL or path, then reference it with HTML.

Insert a screenshot in Microsoft Word

Capture and insert an open window

Open the window you want to capture.
Switch to Word and open the document.
Choose Insert > Screenshot.
In the Screenshot gallery, select the thumbnail for the open window.

Word inserts the selected window as a picture at the cursor. Activate the target window before returning to Word so it appears in the gallery. Microsoft’s instructions cover current Microsoft 365 and several perpetual Word releases on Windows and Mac (Microsoft Support).

Capture only part of the screen

Choose Insert > Screenshot > Screen Clipping.
Word switches to the available screen view.
Drag over the region to capture.
Release the mouse. Word inserts the selected region into the document.

Close or minimize unrelated windows first if you want a less cluttered clipping. A clipping captures what is visible; it does not automatically include content below the fold.

Insert an existing screenshot file

Place the cursor where the image should appear.
Choose Insert > Pictures.
Select This Device, OneDrive, or another available source.
Choose the image and select Insert.

In Word for the web, you can also paste a copied picture or drag an image into the document. Resize from a corner handle to preserve the aspect ratio.

Paste a screenshot from the clipboard

After taking a system screenshot, click in Word and press Ctrl+V on Windows or Command+V on macOS. If Word pastes only a file name or nothing appears, save the capture as PNG or JPEG and use Insert > Pictures.

Set size, wrapping, and reading order

Select the picture and open Picture Format > Wrap Text. Use In Line with Text when predictable reading order and accessibility matter. Square, Tight, or other wrapping modes let text flow around the image, but can make placement change when surrounding text is edited.

For accessibility, open the picture’s Alt Text pane and describe the information a reader needs. For example: “Billing settings page with the Export CSV button in the upper-right corner.” Do not use an unhelpful file name such as Screenshot-2026-10-01.png.

Insert a screenshot in Google Docs

Upload an image file

Place the cursor at the insertion point.
Choose Insert > Image.
Select Upload from computer, Drive, Photos, By URL, or another offered source.
Select the image and wait for it to appear.

Google Docs also supports dragging an image into the document and copying and pasting an image from your computer or a web page (Google Docs Help).

Adjust position and wrapping

Click the image and choose an image layout such as In line, Wrap text, or Break text. Use image options to set size, rotation, and margins where available. Google Docs does not provide the cited wrapping and position controls in pageless documents; switch to File > Page setup > Pages when you need those controls.

Add alt text

Right-click the image, choose Alt text, and enter a concise description and, if useful, a title. Describe the screenshot’s purpose in the document rather than listing every visible control. If the image is purely decorative, an empty description can be appropriate.

Add a screenshot to an HTML web page

An HTML page cannot display a local image that visitors cannot access. First place the file in the site’s assets directory or an image host, then reference its URL or path with an <img> element.

Minimal example

<img
  src="/images/settings-export.png"
  alt="Settings page showing the Export CSV button"
  width="1600"
  height="900"
>

The src value must resolve from the published page. A root-relative path such as /images/settings-export.png starts at the site’s domain; a relative path such as images/settings-export.png starts from the current document’s directory. An absolute HTTPS URL works when the remote server permits access.

Use a figure and caption

<figure>
  <img
    src="/images/settings-export.png"
    alt="Settings page showing the Export CSV button"
    width="1600"
    height="900"
    loading="lazy"
  >
  <figcaption>The export control is in the upper-right corner.</figcaption>
</figure>

Use a visible <figcaption> when readers need context. The title attribute is not a replacement for meaningful alt text. Width and height let the browser reserve space and reduce layout movement while the file loads. For the HTML element reference, see MDN’s img documentation.

Responsive screenshots

.screenshot {
  display: block;
  max-width: 100%;
  height: auto;
}

<img
  class="screenshot"
  src="/images/dashboard.png"
  alt="Analytics dashboard with weekly traffic chart"
  width="1920"
  height="1080"
>

The intrinsic dimensions remain in the markup while CSS prevents the image from overflowing narrow screens. If you have purpose-built desktop and mobile captures, use <picture> and provide an appropriate source for each breakpoint.

When the screenshot is also a link

<a href="/docs/exporting-data">
  <img
    src="/images/export-help.png"
    alt="Open the exporting data guide"
    width="1400"
    height="800"
  >
</a>

When an image is the link’s only content, make the alt text describe the destination or action, not just the appearance.

Capture a web page automatically before inserting it

If the source is a live URL rather than your current desktop screen, an API can produce a repeatable image for Word, Google Docs, or your website. Decide whether you need the full page, a viewport, one CSS-selected element, a specific device size, dark mode, a PDF, or custom authentication before choosing capture options.

Or skip the browser setup

ScreenshotNeo returns a PNG, JPEG, WebP, or PDF from one GET request. It accepts cookie and consent banners as a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be disabled. Bot checks, CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the result with X-Page-Verdict and X-Billed headers. It also provides an MCP server for Claude, Cursor, and other MCP clients.

See the complete option list and parameter reference in the ScreenshotNeo documentation.

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

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
r.raise_for_status()
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}`);
if (!res.ok) throw new Error(`Screenshot failed: ${res.status}`);
const bytes = Buffer.from(await res.arrayBuffer());
require('fs').writeFileSync('shot.webp', bytes);

After saving the result, insert it into Word or Docs as an existing image, or upload it to your web site’s asset storage and use its public path in an <img> element. ScreenshotNeo includes full-page capture with lazy images loaded, element capture by CSS selector, dark mode, device presets, custom viewport and retina scale, custom CSS and JavaScript, click actions, selector or network-idle waits, request and resource blocking, headers, cookies, user agents, authorization, timezone, geolocation, transparent backgrounds, resizing, configurable caching, signed image links, asynchronous jobs with signed webhooks, bulk capture of up to 100 URLs per call, a usage API, and an OpenAPI specification.

There are 1,000 free screenshots per month with no card. Paid plans start at $5 for 3,000 screenshots; every feature is available on every plan. Create a free ScreenshotNeo account.

Quality and accessibility checklist

Use meaningful alt text: state what the screenshot helps the reader understand. Use alt="" only when it is decorative.
Keep text legible: inspect the image at its final rendered size. A full desktop capture may need a cropped or element-specific version.
Reserve layout space: include HTML width and height or an equivalent CSS aspect ratio.
Check reading order: inline placement is the safest default in Word; verify wrapping does not separate the image from its explanation.
Use a caption when context is visible: captions are useful for steps, callouts, and figure references.
Review sensitive data: remove account numbers, tokens, private messages, and personal information before sharing.
Confirm reuse rights: screenshots can contain third-party text, photographs, or trademarks. Check that you may reproduce the material, especially on a public site.

Troubleshooting

Problem	Likely cause	Fix
Word’s Screenshot gallery is empty	No other window is open or the target window was not activated.	Open the target application, activate it, return to Word, and reopen the gallery.
Screen Clipping captures the wrong area	The selection began on the wrong display or window.	Move the target into view, start Screen Clipping again, and drag from one corner to the other.
Pasted image looks blurry	The capture was copied at a small display scale or repeatedly recompressed.	Capture at the needed display scale, save PNG for UI text, and avoid enlarging a small bitmap.
Google Docs image cannot be moved beside text	The document is in pageless format or the selected layout is inline.	Switch to Pages format, then choose a wrapping layout from the image controls.
HTML shows a broken-image icon	The `src` path is wrong, the file was not deployed, or the server blocks access.	Open the image URL directly, check capitalization and the deployment folder, and verify the response is an image.
Image shifts the page while loading	No intrinsic dimensions were provided.	Add accurate `width` and `height` attributes or reserve space with CSS.
Alt text is read twice	The same description appears in both alt text and a nearby caption.	Let alt text convey the essential meaning and keep the caption focused on context or interpretation.
Automated capture contains a cookie banner	The capture ran before consent handling or the site uses an unsupported overlay.	Use a wait condition or custom click/hide rule; ScreenshotNeo can accept consent and remove known banners before capture.
Screenshot API returns a non-image response	The URL failed, triggered a bot check, or the request was invalid.	Inspect the HTTP status and `X-Page-Verdict`/`X-Billed` headers, then correct the URL, credentials, or wait settings.

Performance, reliability, and cost considerations

Choose the smallest useful image: an element capture transfers and renders faster than a very tall full-page image.
Use PNG for interface text and diagrams: JPEG is usually smaller for photographic content; WebP can reduce transfer size when your destination supports it.
Prevent layout shifts: publish intrinsic dimensions and use lazy loading for screenshots below the initial viewport.
Wait for real content: dynamic pages may need a selector wait, delay, or network-idle condition. Waiting too long increases latency; waiting too little produces incomplete captures.
Cache stable pages: a chosen cache TTL avoids repeated captures for unchanged content. With ScreenshotNeo, cache hits are not billed.
Plan for failures: retry transient network errors with backoff, but do not blindly retry invalid URLs or authentication failures. For large batches, use asynchronous jobs and signed webhooks where appropriate.
Control spend: block unnecessary ads, trackers, and resource types, capture only the required viewport or element, and monitor usage through the API.

FAQ

Can I insert a screenshot without saving it first?

Yes. Word can capture an open window or screen clipping directly into the document, and Word and Google Docs can accept an image pasted from the clipboard.

Should a screenshot use PNG or JPEG?

PNG usually preserves small interface text and sharp edges better. JPEG can be smaller for photographs. WebP is another compact option when your document or web pipeline supports it.

Does an HTML screenshot need to be publicly accessible?

It must be reachable by the browser loading the page. A private local path works only for your local document; a published page needs a deployed asset or an accessible image URL.

What should alt text say?

Describe the screenshot’s useful meaning in context, such as the control or result it demonstrates. Do not repeat a generic file name or write “screenshot” without explaining what readers should learn.

Can I put a screenshot in a PDF?

Insert it into Word or Google Docs first, then export the document as PDF. For a web URL captured directly as a PDF, ScreenshotNeo supports PDF output with paper size, margins, landscape mode, and page ranges.