How to Make a Screenshot Clickable With a Link

Direct answer: make the screenshot itself the link. On a web page, place the <img> inside an <a href> element. In WordPress, Google editors, Word, or PowerPoint, select the image and use the editor’s link command. The image file does not become clickable by itself; the page or document adds the link.

1. Make a screenshot clickable in HTML

Use an anchor element around the image:

<a href="https://example.com/pricing">
  <img
    src="/images/account-settings.png"
    alt="Screenshot of the account settings page"
    width="1200"
    height="800"
  >
</a>

Replace the destination and image path with your own URLs. The entire image is now one link. Keep the alt text descriptive: it should explain what the image shows or where the link leads.

Open the destination in a new tab

<a href="https://example.com/pricing" target="_blank" rel="noopener">
  <img src="/images/account-settings.png" alt="View account pricing">
</a>

Use a new tab only when it helps the reader. If you do, keep rel="noopener". For links to pages in the same site, opening in the current tab is usually simpler.

Make the link obvious and keyboard friendly

<a class="screenshot-link" href="https://example.com/pricing">
  <img src="/images/account-settings.png" alt="View account pricing">
</a>

<style>
.screenshot-link {
  display: inline-block;
}
.screenshot-link:focus-visible {
  outline: 3px solid #155eef;
  outline-offset: 4px;
}
.screenshot-link img {
  display: block;
  max-width: 100%;
  height: auto;
}
</style>

The focus style helps keyboard users see which image link is active. The responsive sizing prevents a large screenshot from overflowing a narrow viewport.

Link to a section on the same page

<a href="/docs/setup#authentication">
  <img src="/images/auth-token.png" alt="Go to authentication instructions">
</a>

<h2 id="authentication">Authentication</h2>

The id must be unique on the destination page. The link can point to an internal section, another page, an email address, or any valid URL:

<a href="mailto:support@example.com">
  <img src="/images/help.png" alt="Email support">
</a>

2. Link an image in WordPress

Open the post or page in the block editor.
Select the Image block.
Use the link control and paste or search for the destination URL.
Apply the link, then preview or publish the page.

WordPress can link an image to a custom URL, the original media file, or an attachment page. Choose Custom URL when the screenshot should open a web page. Choose Media File when the intended result is the full-size screenshot. Choose Attachment Page only when that page is useful to visitors; choose None to remove the link.

Link to a WordPress page section

Add a unique HTML anchor to the target heading or block, such as setup.
Select the screenshot image.
Set its link to #setup or to the full page URL followed by #setup.
Test the jump in the published page.

3. Link a screenshot in Google Docs, Sheets, or Slides

Select the image.
Choose Insert then Link (or use the editor’s link shortcut).
Enter a web URL, email address, or supported internal destination.
Apply the link and open the shared file in viewing mode to confirm it works.

Docs also supports bookmarks for destinations inside a document. Interface labels can differ between Docs, Sheets, Slides, browser versions, and mobile apps, so verify the result in the same shared view your readers will use.

4. Link a screenshot in Microsoft Word

Select the picture.
Choose Insert > Link, or right-click the picture and choose Link.
Enter the destination in the Address field.
Save, reopen, or export the document and test the link.

5. Link a screenshot in PowerPoint

Select the picture on the slide.
Choose Insert > Link.
Enter the web address or another supported destination.
Start the slide show and click the image to test the presentation link.

6. Choose the right destination

Goal	Destination
Open a product or documentation page	Custom web URL
Show the uncropped screenshot	Image or media-file URL
Show metadata or comments	Attachment page
Jump to instructions	Page URL with a unique fragment such as `#setup`
Start an email	`mailto:` URL

Decide based on the result the reader expects, not simply on where the image is stored.

7. Accessibility and link clarity

Write useful alt text. For an image link, describe the linked destination or the screenshot’s purpose.
Keep nearby text clear so users know what will happen when they activate the image.
Do not rely on color or a hover effect alone to show that an image is clickable.
Provide a visible keyboard focus state for HTML links.
Avoid vague surrounding wording such as “click here”; describe the destination instead.

Search engines can use an image’s alt attribute as anchor text for image links, so descriptive text helps both accessibility and discoverability.

Open the published page or shared document, rather than only the editor canvas.
Click the image with a mouse or trackpad.
Focus it with the keyboard and activate it with Enter.
Check the destination on desktop and mobile widths.
Confirm that the URL uses HTTPS, has no accidental spaces, and does not require editor-only permissions.
If the image was exported to PDF or a slide show, test that exported or presentation version too.

9. Troubleshooting

Symptom	Likely cause	Fix
Clicking does nothing	The image was not placed inside an anchor, or the editor did not save the link.	Inspect the published HTML or reselect the image and apply the link again.
The full-size image opens instead of the website	WordPress is set to Media File.	Change Link To to Custom URL and enter the destination page.
The link works in editing mode but not after sharing	The shared or exported format removed the hyperlink, or access requires permission.	Test the shared file or exported PDF and recreate the link in that version if needed.
The link jumps to the wrong section	The fragment does not match a unique `id` or HTML anchor.	Use the exact anchor value and make it unique.
Keyboard users cannot tell the image is focused	No visible focus style exists.	Add `:focus-visible` styling to the anchor.
The screenshot is clipped or causes horizontal scrolling	Fixed dimensions exceed the container.	Set `max-width:100%` and `height:auto`.
The destination returns 404	The URL is mistyped or the page moved.	Open the exact URL in a new tab, update redirects or replace the link.

10. Or skip the browser setup

If you need a fresh screenshot to place in a clickable card, documentation page, or email, ScreenshotNeo returns one from a single request. Its consent handling removes cookie banners, newsletter popups, and chat widgets before capture; bot checks, blank pages, failed loads, timeouts, and cache hits are not billed. The response identifies the result with X-Page-Verdict and X-Billed headers. ScreenshotNeo also provides an MCP server so Claude, Cursor, and other MCP clients can take screenshots, inspect pages, or capture PDFs.

See the ScreenshotNeo API documentation for the complete option list.

cURL

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

Python

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)

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}`);
if (!res.ok) throw new Error(`Screenshot failed: ${res.status}`);
const bytes = new Uint8Array(await res.arrayBuffer());
await Bun.write('shot.webp', bytes);

After saving the image, wrap it in the same HTML anchor shown above. ScreenshotNeo supports PNG, JPEG, WebP, and PDF output, full-page and element capture, custom CSS and JavaScript, waits, headers, cookies, device settings, caching, signed links, asynchronous jobs, bulk capture, and other capture controls.

The Free plan includes 1,000 screenshots each month with no card. Paid plans start at $5 for 3,000 shots, and every feature is available on every plan. Create a free ScreenshotNeo account.

11. Performance, reliability, and cost notes

Use WebP or JPEG when file size matters; use PNG for sharp UI text or transparency.
Set explicit image dimensions in HTML to reduce layout movement while the page loads.
Use a cache when the source page changes infrequently; choose a TTL that matches your freshness requirement.
For many URLs, asynchronous jobs or bulk capture can keep page requests responsive.
Check verdict and billing headers when automating retries so a failed or blocked capture is handled separately from a valid image.
Keep the clickable image URL stable if it is embedded in many pages; replace the underlying asset or use a redirect when possible.

12. FAQ

Can I make a screenshot clickable inside the image file?

No. PNG, JPEG, and WebP files contain pixels. The surrounding web page, document, or presentation supplies the hyperlink.

Can one screenshot have multiple clickable areas?

Yes. On the web, use separate positioned links or an image map. In document editors, use separate shapes or linked objects when the application supports them.

Will a clickable screenshot work in an email?

Usually, if the email client supports linked images and the image is hosted at an accessible HTTPS URL. Send a test message because clients can strip or rewrite links.

Why does my alt text matter if the image is decorative?

For a linked image, alt text communicates the link’s purpose to people who cannot see the screenshot and can also provide anchor context to search engines.

Should I link to the screenshot or the page it depicts?

Link to the page when the reader needs to continue a task. Link to the image file when inspecting or downloading the screenshot is the intended outcome.