How to Make a Clickable Image

Updated July 13, 2019

Do you want your image to be clickable, so when someone clicks on it, they are taken to a webpage you specify? I will show you how, using HTML and in WordPress.

How to make a clickable image with HTML.

The final result

For this tutorial, we’ll use this image:

How to start a blog to make money or otherwise

To see how it works, click on it and you’ll be taken to the corresponding post on my site, How to Start a Blog.

My site runs on WordPress but WordPress is not necessary for this tutorial. WordPress users, I’ve included a 40-second video tutorial at the end of the post.

8 easy steps to make an image a clickable link using HTML

  1. Pick an image to make clickable
  2. Optimize the image
  3. Upload the image to the web
  4. Find and copy the image URL
  5. Paste the image URL into a free HTML editor tool
  6. Find and copy the landing page URL
  7. Copy the HTML snippet
  8. Paste the HTML where you want the image to appear

1. Pick an image to make clickable

Use your own image if possible. If it’s not your own image, do you have the legal right to use it? If you’re not sure, read Tips for Using Images on Your Website.

2. Optimize the image

An image straight out of the camera is very large in file size — too large for normal web use.

Resize and compress your image before using it, otherwise it will slow everything down. Instructions for resizing and compression are in this post.

3. Upload the image to the web

In order to be viewable on the web, your image must be “hosted” somewhere online.

Where can you host your image?

If you have a blog or website, host it there. The upload process depends on your platform. In WordPress for example, go to Dashboard > Media > Add New.

If you don’t have a blog or website, use a service like Google Drive. Simply upload it to Drive and it’s hosted!

4. Find and copy the image URL

Any image hosted online has its very own URL, or web address.

How do you find it?

In WordPress, go to Dashboard > Media > Library and find your image. Click on it. In the Attachment Details window, highlight and copy the entire snippet of code in the Copy Link field (make sure you get it all!).

Attachment details window in WordPress

Hosting on Google Drive? Here’s a tutorial.

5. Paste the image URL into a free HTML editor tool

We need to generate the HTML. In a new browser window, go to HTML5 Editor. It’s a free online tool, no signup required. You’ll see a rich text box (with all the icons at the top) and a code box.

In the rich text box, click the image icon:

HTML Cleaner rich text box image icon

In the popup box, paste the image URL in the Source field. Click OK.

Your image will appear in the rich text box. HTML will appear in the code box. The image will appear blue because it’s highlighted. Just leave it highlighted. We’ll come back to it.

6. Find and copy the landing page URL

Where do you want people to go when they click your image? This is called the landing page.

If you aren’t sure what the landing page’s URL is, open a new tab or window in your web browser (Chrome, Safari, Firefox, etc.) and navigate to the page you want people to go. Highlight and copy the web address in your browser’s address bar.

In our example, I want people to land on my post about starting a blog. So, I grab that post’s URL:

landing page URL for how to start a blog

Go back to HTML5 Editor. With the image highlighted in HTML5 Editor, click the link icon immediately to the left of the image icon:

HTML5 link icon rich text editor

You’ll get a popup box. Paste the landing page URL in the URL field. You also have the option to set the link to open a new window by choosing Target > New window.

Click OK.

7. Copy the HTML snippet

In the code window of HTML5 Editor, your HTML has been generated for you. Highlight and copy it. I do not copy the paragraph tags, <p> and </p>. It’s not likely to matter if you do but it’s cleaner:

HTML clickable image generated

8. Paste the HTML where you want the image to appear

You’re ready to use the HTML. You could paste it in your sidebar or footer, or wherever HTML is accepted.

That’s it!

faq

FAQ: Can I attach my affiliate link to the image?

Yes. Simply use your affiliate link for the landing page URL. However, if you do, make sure you add a disclosure before the image and add the nofollow tag.

You might also be interested in Affiliate Marketing: The Ultimate (Free) Guide.

FAQ: How do I make a clickable image in WordPress?

In WordPress, go to Add block > Image in a post or page window. Make sure the block settings are visible on the right. If they aren’t, highlight the image by clicking on it, click the three dots (More options) > Show block settings. Scroll down to Link settings > Link to: Custom URL. Add the URL of the landing page you want people to be taken to.

You might also like:

How to Start an Online Business: A Budget-Friendly Checklist
Tips for Using Images on Your Website