Skip to content
PictureToLink
Menu
Image Sharing

How to Make a Picture a Clickable Link

Turn any image into a clickable link in HTML, email, Google Docs and Word. Copy-ready code plus how to host the image first if it is on your device.

By PictureToLink Team · · 8 min read
Facts checked against official sources on

On this page

To make a picture a clickable link, you place the image inside a link: in HTML that means wrapping the img tag in an a tag, and in email, Google Docs or Word it means selecting the picture and using the editor's Insert link command. If the picture only exists on your phone or computer, upload it somewhere first so it has a public address, then use that address in the image tag. The steps for each place are below.

People use "make a picture a link" for two different jobs, and it helps to know which one you need before you start.

  • A link to a picture. You have a photo and want a URL you can paste into a chat, a forum or a form, so other people can open it. Here the picture is the destination. Our guide on getting an image URL on any device covers this in detail.
  • A clickable picture. You have a web page, email or document, and you want an image in it that takes the reader somewhere when they click it: a logo that opens your homepage, a product photo that opens a shop page, a banner that opens a sign-up form. Here the picture is the button.

Most of this article is about the second job. The two often meet, though: before an image can appear on a web page or in an HTML email, it needs its own URL. So the first job is usually step one of the second.

In HTML, an image becomes clickable when the img element sits inside an a (anchor) element. The href on the anchor is where the click goes; the src on the image is where the picture is loaded from. Add alt text so screen-reader users know where the link goes.

<a href="https://example.com/shop">
  <img src="https://example.com/images/product.jpg"
       alt="Blue ceramic mug, 350 ml"
       width="600" height="400">
</a>

What each part does:

PartPurpose
hrefThe page that opens when someone clicks the picture
srcThe direct address of the image file (it should end in .jpg, .png, .webp and so on)
altText read aloud by screen readers and shown if the image fails to load. For a linked image, describe where the link goes or what the image shows
width and heightThe image's size in pixels, so the browser can reserve space and the page does not jump while loading

Two optional extras:

  • Add target="_blank" rel="noopener" to the a tag if you want the link to open in a new tab.
  • Add a title attribute to the a tag if you want a small tooltip on hover. It is not a substitute for alt.

If you are new to image tags in general, our guide to embedding an image in HTML explains src, alt and sizing in more depth.

Clickable images in Markdown and BBCode

The same idea works in other markup languages, which matters if you write README files or post on forums:

Markdown:  [![Alt text](https://example.com/image.jpg)](https://example.com/page)
BBCode:    [url=https://example.com/page][img]https://example.com/image.jpg[/img][/url]

In both, the image code sits inside the link code, exactly as in HTML.

Email editors hide the HTML, but the logic is the same: put the picture in the message body, select it, then add a link. In Gmail, press Ctrl+K (Cmd+K on Mac) or click the link icon. In Outlook, choose Insert > Link or right-click the picture and choose Link. Then paste the address the picture should open.

Gmail on a computer

  1. Open a new message and add the picture to the body. Google's help notes you can add an image by dragging it directly into the compose window. Make sure it sits inside the text area, not in the attachment strip at the bottom.
  2. Select the image by clicking it.
  3. Press Ctrl + K (Cmd + K on Mac), which Gmail lists as the shortcut for inserting a link, or click the link icon in the formatting bar.
  4. Paste the web address the picture should open and confirm.
  5. Send a test message to yourself and click the picture to check it.

Outlook

Microsoft's instructions for creating a hyperlink say to select the text or picture you want to act as a link and then use Insert > Link. In practice:

  1. Insert the picture into the message body (Insert > Pictures, or paste it).
  2. Click the picture once to select it.
  3. Choose Insert > Link, or right-click the picture and choose Link.
  4. Enter the address in the box and select OK or Insert.

One caution for both: many recipients' email apps block images from senders they do not know until they click "show images". Your link still works once the image is shown, but add a plain text link nearby too, so nobody misses it.

In Google Docs and Microsoft Word, click the picture to select it, choose Insert > Link, paste the address and confirm. In Google Docs, links on images only work when the image is set to "In line" with the text, so switch it to in-line first if the option is greyed out.

Google Docs

  1. Insert the picture (Insert > Image).
  2. Click the picture to select it.
  3. Choose Insert > Link, as described in Google's help on adding links in Docs, or press Ctrl + K (Cmd + K on Mac).
  4. Paste the address and click Apply.

If the Link option is greyed out, check how the picture is positioned. A Google Product Expert in the Docs community explains that links on images are only available when the image is set to "In line" with the text. Click the picture and pick the in-line option in the small toolbar under it, then try again.

Microsoft Word

The same Microsoft help page applies to Word: select the picture, then choose Insert > Link (or right-click the picture and pick Link), type the address and confirm. To check it, hover over the picture: Word shows the linked address in a tooltip. If you plan to share the file as a PDF, export it after adding the links and test a click in the PDF too.

Does the image need to be hosted online first?

An image needs a public URL before it can appear on a web page, in an HTML email, in a Markdown file or in a forum post, because a path like C:\Users\me\Pictures\logo.png only exists on your computer and nobody else can load it. In Word, Google Docs or an email you compose, the image can live inside the document instead.

If your picture is on your phone or computer, you have a few options:

  • Your own website. Upload it through your site's media library and copy the file address.
  • An image host. Upload it to a free image host and copy the direct link.
  • Cloud storage. Services like Google Drive give you a sharing link, but that link opens a viewer page rather than the raw image, so it often fails inside an img tag.

With PictureToLink's uploader, you drop or paste the image and get several link formats at once. The direct link (ending in .jpg, .png and so on) goes in the src of your image tag. The "HTML embed" format is already a clickable picture: the image is wrapped in a link to its own share page, so you can paste it straight into a web page and change the href if you want the click to go elsewhere. Add your own alt text, since that is something only you can describe.

A few honest notes about using us for this. Uploads must be JPG, PNG, WebP, GIF or AVIF (HEIC from iPhones needs exporting as JPG first), up to 25 MB. The image is compressed and metadata such as GPS location is stripped. It stays online while people keep viewing it and is removed after 12 months without views, or sooner if you choose an auto-delete time. Anyone with the link can view it, so do not use a public host for anything private. If the image is a permanent part of a business website, hosting it on your own site is the safer long-term choice.

Common mistakes

These are the reasons a clickable picture most often fails:

  1. Using a page link as the image source. If src points to a share page or a cloud-drive viewer instead of the image file itself, the browser gets a web page, not a picture, and shows a broken image. The src should normally end in an image extension. Our explainer on direct links, viewer links and embed codes shows the difference.
  2. Swapping href and src. The href (on the a tag) is where the click goes. The src (on the img tag) is the picture.
  3. Linking to a file on your own computer. It will look fine to you and broken to everyone else.
  4. Forgetting alt text. A linked image with no alt gives screen-reader users no clue where the link goes.
  5. Image floats in Google Docs. As noted above, switch it to in-line before adding the link.
  6. Expired or deleted image. If the image host removed the file, or you set it to delete automatically, the picture disappears but the link around it remains. If you see a broken icon, our guide to why images don't show walks through the causes.
  7. Huge file sizes. A 6 MB photo used as a button slows the page down. Resize it close to the size it will be shown at before you link it.

Next step

If your picture is still on your device, upload it and copy the HTML embed code, then edit the href to point wherever you want readers to go. If it is already online, copy its direct address and use the HTML template at the top of this guide.

Related articles