Embedding a link in an image means wrapping the image inside a hyperlink so a single click carries the viewer to a URL, and the method depends on whether you are working in HTML, Google Docs, Microsoft Word, or a collaborative tool like Mural.
Adding a clickable link to an image is one of the most common web and document tasks, but the exact steps change from HTML code to a Google Doc to a Word file. Some tools limit image-links to specific layout modes, and forgetting to test the clickable region is a mistake even experienced users make. Here is the working method for every major platform, the HTML pattern that underlies them all, and the one trap that kills an image link silently.
The Universal HTML Pattern
In raw HTML, making an entire image clickable requires wrapping the <img> tag inside an <a> (anchor) tag. The href attribute on the anchor holds the destination URL. This is the same pattern the web has used since the 1990s and it works in every browser on every device.
MDN Web Docs’ guide on creating links shows the exact syntax: <a href="destination"><img src="image.jpg" alt="descriptive text"></a>. The alt attribute is not optional for accessibility — screen readers announce it as the link’s purpose, so a blank or missing alt text makes the link unusable for assistive technology. A common mistake is dropping the <img> tag outside the anchor; the image does not become clickable unless it is nested inside the <a> element.
If you need multiple clickable regions within a single image — like a map where each country loads a different page — that is an image map using <map> and <area> elements with usemap. That is a separate technique from embedding one link across the whole image.
How To Embed A Link In An Image On Google Docs
Google Docs supports image links, but only when the image is in inline mode. If the image is wrapped with text or set to a break-text layout, the link option disappears entirely. Select the image and look at the toolbar — if the chain-link icon is grayed out, the image is not inline.
The working sequence: click the image once to select it, then click the chain-link icon in the toolbar (or press Ctrl + K / Cmd + K). A small dialog appears. Paste or type your destination URL and click Apply. The image now clicks through to that address. If you later change the image’s wrapping mode, the link is removed and you have to re-add it after switching back to inline.
How To Embed A Link In An Image In Microsoft Word
Microsoft Word treats image links the same way it treats text links — using the standard Hyperlink dialog. Select the picture, then go to the Insert tab and click Link (or right-click the image and choose Link). In the dialog that opens, the Address box at the bottom is where you paste the URL. Click OK and the image becomes clickable.
Microsoft Support’s documentation on hyperlinks in Word confirms that this works for both text and pictures, and that you can also link to a specific spot in the same document, an email address, or a new blank document. One reliability note: if you export the Word file to PDF, some PDF converters strip or break image links depending on export settings, so verify the link works in the final output format.
How To Embed A Link In An Image On Mural
Mural is a collaborative whiteboard tool where images are called image objects. To add a clickable link, select the image, then click the Add link icon that appears in the floating toolbar. Type or paste the URL and press Enter or Return. Mural Support’s article on hyperlinking images notes that this works for any image object on the canvas, and the link is accessible by clicking directly on the image in view mode.
| Platform | Core Technique | Critical Limitation |
|---|---|---|
| HTML | Wrap <img> inside <a> with href |
Missing alt text breaks accessibility |
| Google Docs | Chain-link icon with image selected | Only works in inline mode |
| Microsoft Word | Insert > Link or right-click > Link | PDF export may lose link functionality |
| Mural | Add link icon on floating toolbar | None noted for standard boards |
| Google Docs (workaround) | Use a drawing with embedded link | Not editable as standard image |
| HTML image map | <map> + <area> with coords |
For multiple hotspot regions, not single link |
Embedding A Link In An Image: The Accessibility Rule
When an image is the clickable element, the link’s purpose must be clear to someone who cannot see the image. The W3C WCAG 2.1 guidelines on link purpose in context require that the link text — which, for an image link, is the alt attribute — communicates where the link goes. The Australian Style Manual’s guidance on links puts it plainly: images used as links should be accurately described with alt text. A green arrow icon with alt text “Click here” is less useful than “Download the PDF report.” If the image is purely decorative and the surrounding text explains the link, an empty alt="" is acceptable in HTML but not recommended for documents where screen readers rely on the alt text alone.
Practical Workflow: Add A Link To An Image In Under A Minute
The fastest route through each platform looks like this:
- HTML: type
<a href="URL"><img src="path" alt="description"></a>directly into the code editor. - Google Docs: select the image, press Ctrl + K, paste the URL, hit Enter. If the link icon is disabled, set the image to inline mode first via the image options.
- Microsoft Word: right-click the picture, choose Link, paste the URL into the Address box, click OK.
- Mural: select the image, click the Add link icon, type the URL, press Enter.
After adding the link, test it by clicking the image in view or preview mode. A link that looks correct in the editor but goes nowhere in the published version is the most common failure, and it is the one test that catches missing protocols (paste a URL without https:// in Word and the link may break), wrong export settings, or an image that shifted out of inline mode between saves.
References & Sources
- MDN Web Docs. “Creating Hyperlinks.” Official syntax for anchor tags and embedding images within links.
- Microsoft Support. “Create or edit a hyperlink.” Steps for linking images in Microsoft Word.
- Mural Support. “Hyperlink an image.” Process for adding links to image objects in Mural.
- Google Docs Help Thread. “How to add link to an image.” Official discussion confirming inline-mode limitation.
- W3C WCAG 2.1. “Understanding Link Purpose (In Context).” Accessibility standard for link clarity with images.
- Australian Style Manual. “Links.” Guidance on alt text for linked images.