How to Make a Clickable Image

Updated April 9, 2020

Do you want your image to be clickable, so when someone clicks on it, they are taken to a webpage you specify? In this beginner’s guide, I will show you how to create HTML to paste anywhere it’s accepted. I’ll also explain how to make an image clickable in WordPress, and answer some FAQs.

Disclosure: This post contains affiliate links. If you click through and make a purchase, I’ll earn a commission, at no additional cost to you. Read my full disclosure here.

Please note, if you want to make an image clickable on Facebook, Twitter, Instagram or other social media, this is not the method to use. Read the FAQs at the end of the post for more.

An example of how it works

For this tutorial, we’ll use this image of my time management book:

Click on it and you’ll be taken to its product page on Amazon.

7 Steps to make a clickable image with HTML

  1. Choose an image to make clickable
  2. Optimize the image
  3. Upload the image to the web
  4. Get the image URL
  5. Get the landing page URL
  6. Create the HTML
  7. Use the HTML where you want it to appear

1. Choose an image to make clickable

Use your own image or buy a stock image. (I buy my stock images during the twice-yearly Depositphotos sale. Sign up for my Flash Deals Notifications list to be notified when I see it next.)

If you don’t use your own image or one you bought from a reputable stock image site, make sure you have permission to use it and aren’t violating anyone’s copyright.

How do I know if I’m violating someone’s copyright?
Can I use someone else’s logo?

Be very careful doing so. Many companies are happy if you use their logo as long as you follow their brand guidelines. Find a brand’s guidelines by searching their site or contacting them directly.

2. Optimize the image

Many images, including those straight out of the camera, are very large in file size. Too large for normal web use; they will slow your site down. Optimize your image by resizing and compressing it before uploading it to the web.

First, resize the image so the actual width and length (usually measured in pixels) is only as big as you need. A good rule of thumb is to use the width of the container the image will be in on your site. For example, if you’re reading this post on a desktop, the container this text is in is about 800 pixels wide. Use a tool like PicResize.

Second, compress the image. This squishes it down, reducing its file size without sacrificing quality on the web. Use a tool like TinyPNG (my preference) or Squoosh to compress your image.

For more details, read Tips for Using Images on Your Website.

3. Upload the image to the web

In order to be viewable online, your image must be “hosted” somewhere. It won’t show up and be accessible to internet users if it’s simply saved on your personal computer.

So where can you host your image?

If you have a blog or website, host it there. Simply upload it. The process to upload your image to your own site will depend on what kind of site you have. In WordPress, for example, go to Dashboard > Media > Add New. It’s hosted.

Don’t have a blog or website? No problem. Use a service like Google Drive. Once you sign up for a free account, upload your image and it’s hosted! Here’s how to upload a file to Drive.

4. Get the image URL

A URL is a web address. For example, the URL of this blog post is:

https://amylynnandrews.com/html-clickable-image/

The image URL is the unique web address of your image. Just like your home address tells people where you live, your image URL tells the internet where your image lives online. 

Any image hosted online has its own URL. We’ll need this to create our HTML.

How do you find your image’s URL?

If you have your own blog or website, the place to find your image’s URL will vary depending on the platform you use.

In WordPress for example, go to Dashboard > Media > Library. Find your image and 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!).

I suggest you open a blank document somewhere on your computer (a Google Doc, Word doc, a text editor, etc.). Paste your image URL there. We’ll use it in a minute.

Where do you get an image URL on Google Drive? Here’s a tutorial.

5. Get the landing page URL

The landing page URL is simply the page you want someone to go to when they click on your image. It’s the destination.

In my example, when someone clicks on the cover of my book, I want them to be taken to this landing page.

You probably already know the URL for the landing page you want people to go to.

If you aren’t sure what it is, open a new tab or window in your web browser (Chrome, Safari, Firefox, etc.) and go to the webpage you want people to land on when they click your image. Highlight and copy the web address in your browser’s address bar.

For example, I want people to land on my book’s Amazon page. So, when I’m on that page, I copy the URL in the address bar like so:

Paste the landing URL in the document you created in Step 4.

6. Create the HTML

Now it’s time to create the HTML. This is the very basic HTML snippet you’ll use:

<a href="LandingPageURL">
<img src="ImageURL" alt="text describing the image">
</a>

(A < and > indicates an HTML tag. Read more about tags at w3schools.com.)

Replace “LandingPageURL” and “ImageURL” with the ones from steps 4 & 5 above. Keep the quotation marks though! Simply paste in the entire URLs (including https) between them.

Add alt text too. You’ll notice a space to enter alt text in the HTML snippet (alt=””). Alt text improves accessibility for those who can’t view images on the web. Alt text should describe what is in the image. Again, type in text between the quotation marks. Learn more about alt text here.

So in our example, my HTML would look like this:

<a href="https://www.amazon.com/Tell-Your-Time-Manage-Schedule-ebook/dp/B005F0H7BK/">
<img src="https://amylynnandrews.com/wp-content/uploads/2019/02/TellYourTime_Cover_Revised.jpg" alt="Tell Your Time cover">
</a>

The URLs are long and therefore wrapped to the next line. Don’t worry, you’re just looking for what’s between the quotation marks.

Is there a tool I can use to generate the HTML?

Yes, there are many HTML generator tools. One is HTML5 Editor.

You’ll see a rich text box (with all the icons at the top) and a code box. If the boxes are pre-filled, click inside either one and select everything. Delete. That should empty out the boxes.

In the rich text box, click the Insert/edit image icon:

In the popup box, paste the image URL in the Source field of the popup box. It’s also a good idea to describe the Image description field. This is your alt text. 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. Now 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.

Click OK.

7. Use the HTML where you want it to appear

That’s it! You’re ready to use the HTML. Paste it in your sidebar or footer or wherever HTML is accepted.

It should look something like this:

<a href="https://landingURL.com">
<img src="https://imageURL.jpg" alt="your alt text">
</a>
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.

How do I make a clickable image within 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.

Can’t see the video? Watch it here.
Will this work on Facebook, Twitter, Instagram or other social media platforms?

No. In general, social media platforms do not accept HTML so this will not work. The method above is best for blogs (footers, sidebars, etc.), websites, etc.

On social media, first try pasting the landing page URL directly into your post or tweet. That will often automatically display the featured image from the landing page.

If that doesn’t work as you’d like, here are some suggestions:

On Facebook, if you’re trying to get a large image to show up, change the featured image on your landing page. After doing so, run the landing page URL through Facebook’s Sharing Debugger tool and try posting the landing page URL directly into your Facebook post again.

On Twitter, use Twitter Cards. To use them, you must first sign up for a Twitter Ads account and enter a credit card number (although you won’t be charged unless you choose to run ads). Once you have a Twitter Ads account, go to Creatives > Cards > Create Card > Website Card. Upload your image and create your tweet. Publish immediately or schedule for the future. Tip: Make sure the “Promoted-only” checkbox is unchecked. Otherwise, it won’t publish (unless you pay).

On Instagram, the lack of clickable things is frustrating. The best tool I’ve found to make images (sort of) clickable is Smart.bio by Tailwind.

You might also like:

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