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.
The final result
For this tutorial, we’ll use this image:
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
- Pick an image to make clickable
- Optimize the image
- Upload the image to the web
- Find and copy the image URL
- Paste the image URL into a free HTML editor tool
- Find and copy the landing page URL
- Copy the HTML snippet
- 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!).
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:
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:
Go back to HTML5 Editor. With the image highlighted in HTML5 Editor, click the link icon immediately to the left of the image icon:
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.
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:
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.
FAQ: Can I attach my affiliate link to the image?
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.