How to Make a Clickable Image

A clickable image allows anyone to click on an image and be taken to a page you specify. Said another way, you want the image itself to be a link.

html clickable image

Making a clickable image using HTML is not as complicated as it sounds. There are a few ways to do this.

First I will outline the manual approach which works anywhere HTML is accepted. Second, I will outline a quick workaround if you use WordPress and don’t want to deal with as much code.

option one

How to manually write the HTML for your clickable image

To create your HTML you’ll need two bits of info:

  1. The landing page URL. This is the web address (URL) of the page/post/site where you want the user to land when they click on the image.
  2. File URL. This is the URL specifying where the image is located (or hosted) online.  If you’re not sure where your image is hosted, the workaround below (under Option Two) allows you to find it easily by uploading it into a new post first. (Don’t worry, you won’t publish the post, you’re only using this method to get the URL.)

Switch out the bolded URLs below with the two pieces of information from above. Simply paste the URLs between the quotation marks. (Be very careful not to accidentally delete the quotation marks in the process and don’t duplicate the http://.)

<a href="http://LandingPageURL.com"><img src="http://FileURL" /></a>

To make the link open in a new window, you would simply add “target=”_blank” to the first piece like so:

<a href="http://LandingPageURL.com" target="_blank"><img src="http://FileURL" /></a>

You can now take that whole piece of HTML (from the <a href…> to the </a> with <img src..> inbetween) and paste it wherever you want the image to appear (such as your sidebar).

Related: Tips for Using Images on Your Blog

option two

If you’re unsure where your image is hosted online and therefore don’t know where to find the File URL, or if you prefer to deal with less HTML, here’s another option.

These instructions are for WordPress, but a similar process could be used with Blogger too. The idea is simply to create a new post, add a photo and link it and then grabbing the HTML to be used elsewhere. Here’s what I mean…

Step 1: Save the image to your computer

If you have not already saved the image to your computer, do this first. Right-click (command-click on a Mac) on the image and “Save image as…”

Step 2: Open a new WordPress post (even if you’re going to put the image somewhere else on your site like your sidebar)

From your WordPress Dashboard open a new Post (Posts –> Add New).

Step 3: Upload your image

Make sure you’re in the Visual tab (indicated in the top right of the post box). Click the Add Media button (top left of the post box).

add media in wordpress

Step 4: Add your image to your post

While in the Upload Files tab (top left), you can either drag and drop your image into this screen, or click the Select Files button to find the image on your computer.

upload media into WordPress

Once you’ve selected your file, you should be automatically switched to the Media Library tab. In this window, do the following:

  1. Make sure the image you want to work with is checked.
  2. The title will automatically be inserted. Did you rename your image before you uploaded it? A good title will help with SEO so make sure you rename your image before uploading. (If you need to start over, you can delete this image by clicking Delete Permanently next to the thumbnail image on the right.)
  3. Fill in the Alt Text. Again, this helps with SEO. I just usually make it the same as the title without hyphens.
  4. Do you want your image to be aligned in a certain way? Centered, right, left or none? Select your preference from the dropdown.
  5. Here’s where you make it clickable! Select Custom URL from the dropdown menu. Enter the URL of the webpage you want this image to link to. So, in my example, I’ll enter http://amylynnandrews.com/how-to-blog/ so it will match my image and link to my How to Blog Step By Step Guide.
  6. Do you want your image to be a different size than what you uploaded? (These options are controlled in Settings –> Media.)
  7. Click the Insert into post button.
image clickable in html

Click to view larger

Your image will now appear in your post window like so:

clickable image in post

Step 5: Do you want your image to open in a new window when someone clicks?

Many people like the link attached to their image to open in a new window, especially for an affiliate link or when they’re sending people to a different site.

  1. If that’s the case, click on the image to highlight it. It’ll gray out a bit.
  2. Then, click on the link icon (looks like a chain link).
  3. In the small window that pops up, check the box that says Open link a new window/tab.
  4. Click Update.
open image in new window

Click to view larger

Step 6: Grab the HTML

Click the Text tab in the top right corner.

html clickable image

Click to view larger

This tab shows you the HTML for your image. Simply copy that whole bit of code and paste it wherever HTML is accepted (like in a sidebar widget).

Step 7 (optional): If this is an affiliate link, make the link nofollow

If your image will is linked with an affiliate link, you should make it nofollow. Tagging it nofollow will tell search bots not follow those links when it’s indexing your site. You can read more about why this is important in my post How to Add the NoFollow Tag to A Link.

To add the nofollow tag, simply add this bit of code in the HTML right before the closing tag (>) of the first link:

rel="nofollow"

I’ve inserted it below. See the highlighted text.

clickable image html

Click to view larger

Now you can grab this HTML and paste it wherever you’d like the clickable image to appear (like in your sidebar).

Don’t forget to read my other tips for using images on your blog.

Do you get The Useletter?

It’s a hand-curated roundup of tips I don’t share elsewhere. And peeks behind the scenes. Not sure? Learn more (& see what others think)...