Wrap the PNG’s <img> element in an <a> element. Put the destination page in the anchor’s href, the PNG file’s location in the image’s src, and useful link-purpose text in alt:
<a href="https://example.com/page">
<img src="/images/example.png" alt="Open the example page">
</a>The anchor makes the image clickable; the image itself does not navigate. The same HTML works whether you write the page by hand or use a site editor that lets you link an image.
What the link and image attributes do
An image link combines two different jobs. The <a> element creates a hyperlink, and its href says where that hyperlink goes. The <img> element embeds an image, and its src says where the browser can find it. Nesting the image inside the anchor makes the image part of the link.
<a href="https://example.com/page">
<img src="/images/example.png" alt="Open the example page">
</a>href: the web page you want to open.src: the PNG file to display.alt: a text alternative that explains the image link’s purpose.
Do not put href on <img>: it belongs on the anchor. Also make sure the destination and image are not accidentally reversed. If href points to the PNG, clicking the image will open the image file, not the web page.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Choose the right URL for the page and PNG
The anchor destination and image source are independent. One can be a full URL and the other a path on your site. Use whichever form resolves correctly from the page where the HTML appears.
Both resources are on your site
A site-relative path is convenient when the page and image are hosted on the same site:
<a href="/guides/getting-started">
<img src="/images/getting-started.png" alt="Read the getting started guide">
</a>In this example, the leading slash makes each path start from the site’s root. A path such as images/getting-started.png without that leading slash is relative to the current document’s URL. For example, a page nested in a directory may cause that path to resolve under that directory. Check the resolved URL, not just the spelling you see in the editor.
The destination or image is on another site
Use an absolute URL when the resource is hosted elsewhere, such as a CDN:
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →<a href="https://www.example.com/pricing">
<img src="https://cdn.example.com/assets/pricing.png" alt="View pricing">
</a>The anchor can point to your site while the PNG comes from a separate host, or the reverse. Confirm that the exact image URL is publicly reachable by the intended visitors; a file that only exists on your computer will not load for people visiting the published page.
Write alt text for the link’s purpose
When the image is the only content inside the link, its alt text acts as the link’s accessible name. Describe the action or destination, such as alt="Open the example page" or alt="View pricing". “Image,” “PNG,” and a filename usually do not tell someone what activating the link will do.
Think about the destination in context. If a linked logo goes to a company’s home page, text like alt="Acme home page" makes the purpose clearer than alt="Acme logo". If the visible image already contains words, do not assume that those words alone explain the link’s destination.
When nearby text already names the link
If the image is decorative and nearby text in the same anchor already states where the link goes, use an empty alt attribute, alt="". For example:
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →<a href="/guides/getting-started">
<img src="/images/arrow.png" alt="">
Read the getting started guide
</a>The empty value tells assistive technology not to announce the decorative image as extra link content; the text supplies the link’s meaning. Do not leave out the alt attribute just because the image seems obvious visually.
Add an image link in a CMS or site builder
The editor’s controls vary, but the resulting structure should have the same semantics: a real link destination around an image, with appropriate alternative text. Look for an image block or insert-image control, then a link or chain control that applies a destination to the image.
- Insert or select the PNG and confirm that the editor has the correct image file.
- Use the image’s link control, not a caption or image-source field, to enter the page URL.
- Fill in the image’s alt-text field with the link’s purpose. If meaningful text in the same link already supplies that purpose and the image is decorative, set alt text to empty if the editor supports it.
- Save or publish the page, then inspect the rendered result. The editor should generate an anchor with an
hrefaround an image with asrcand analtattribute.
If you are unsure what the editor created, inspect the published HTML or use the browser’s developer tools. A preview can look correct even when the link is attached to the wrong element or the image’s alt field is blank.
Test the image link before publishing
- Save the page and open its actual published URL in a browser. Testing the published page catches path problems that a local editor preview can hide.
- Click the image and confirm that the intended page opens, rather than the PNG file, an error page, or an unintended location.
- Use the Tab key to move focus to the link, then press Enter. An anchor with a real
hrefcan be keyboard-activated. - If the PNG fails to load, check whether the visible alternative text still makes the link’s purpose clear.
- Check the browser’s resolved image and destination URLs against the files and page you intended to use.
These checks catch the most common failures: a misspelled or misdirected URL, an image path that resolves from the wrong directory, and a link that works only when clicked with a mouse.
Best Value
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Common mistakes and fixes
| Problem | Why it happens | Fix |
|---|---|---|
| The image displays but is not clickable. | The image is not inside an anchor, or the editor applied the link somewhere else. | Put the <img> inside <a href="…">, or reapply the image’s link in the editor. |
| Clicking opens the PNG instead of the page. | The image file URL was entered as the anchor’s destination. | Set href to the page URL and src to the PNG URL. |
| The image is broken on the published page. | The src path is misspelled, points to the wrong directory, or names a file visitors cannot access. |
Open the resolved image URL directly and correct the path or hosting access. |
| The click goes to the wrong page or fails. | The href is incorrect, incomplete, or resolved differently than expected. |
Check the actual destination URL from the published page and use the intended full URL or correct site-relative path. |
| A screen reader announces only “image” or a filename. | The image-only link has missing or unhelpful alt text. | Describe the link’s purpose in alt, or use empty alt text only when other content in the same link already provides that purpose. |
| The link looks clickable but is not a dependable hyperlink. | A placeholder such as href="#" or href="javascript:void(0)" was used instead of a destination. |
Use the real destination in href. Placeholder patterns can interfere with copying, bookmarking, opening in a new tab, and use without JavaScript. |
Or skip the browser setup
If you need to create a webpage screenshot as a PNG asset, ScreenshotNeo can return a screenshot from one GET request. It is a website screenshot API and MCP server for developers, made by Yorker Media. This is separate from making an existing PNG clickable: you still use the anchor-and-image HTML above to link the resulting file to a page. See the ScreenshotNeo API documentation.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/page -o shot.webpThis one-call example saves a screenshot of the target page. Supply your API key in place of YOUR_API_KEY; the exact output format is determined by the request or service behavior, so check the response and use a matching filename extension when you put the captured image into your site. ScreenshotNeo accepts cookie or consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and responses identify the page verdict and billing status in headers. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents, including Claude, Cursor, and other MCP clients.
The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000. Learn about ScreenshotNeo or sign up for 1,000 free screenshots a month with no card.
Frequently Asked Questions
Does linking to a page change or convert the PNG file?
No. The anchor controls navigation; the PNG remains an image resource referenced by the src attribute.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minuteCan I make the image link open in a new tab?
Yes, an anchor can be configured to open a new browsing context, but do so only when that behavior benefits the visitor. The basic image-link pattern does not require it.
Does the link have to point to a page on the same website as the PNG?
No. The image source and destination are separate URLs, so they can be hosted on different sites as long as both resolve for the visitor.
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.
