How To Use HTML To Create A Clickable Image

Although it’s advisable to use text as links, rather than images, as it offers better discoverability, a little bit of variety also never hurt anyone. 

Setting up an HTML clickable image gives visitors to your blog or website a bit of visual flair while providing a way to link to related pages.

If you wish to create an HTML image link, then we’ll show you the most straightforward methods available to do so.

The Clickable Image HTML Code

If you want to use an image for your clickable HTML, follow the steps in the tutorial below.

Or, watch the overview video of how to create clickable images using HTML code:

1. Select an appropriate image

It’s best to choose an image that reflects the link that you want it to redirect to.

A button link HTML would be best served by an image of a button along with the name of the page it lands on.

An envelope or a message icon would best represent an HTML email link, and so on.

Nothing is stopping you from using whatever image you want, but it’s better to think about the visitors to your site and how you want to direct them.

2. Optimize the image size

If you’re frequently planning to add image HTML files, then it’s best to reduce the size of the image that you use.

Large file sizes will slow down a webpage, and this will begin to add up eventually.

Any good image editor will have an image resizer.

If you don’t have an image editor on hand, you can use free online ones, like PicResize.com or ResizeImage.net to do it for you.

3. Upload the image to an image Hosting Site

In order to use the image as a clickable link, you will need to get its HTML link code.

To do this, you will have to upload the image online.

There are plenty of options to do this, such as Dropbox, Imgur, or even Google Photos.

As long as you can get the image URL, then it’s okay.

Get the URL you want to link

4. Enter the following HTML code

Once you have your image link and the URL of the page you want to be linked, you will need to type in this code:

<a href=”URL of Website You want to Link”>

<image src=”URL of your image” alt=”an image description”>

</a>

This is the insert image HTML code that assigns a URL address to the image itself.

Replace the URLs as indicated in the code above, but be sure to keep the quotation marks.

The alt text is intended for those who aren’t able to view the image to know what the link is supposed to be about.

An Alternative Method

If you’re using WordPress as a content management platform, then a more straightforward method is available to you.

This technique is as follows:

1. Download the image you wish to use on your computer. Be sure to optimize the image size as it does add up over time.
2. Open your WordPress Dashboard.
3. On the Dashboard menu to the left, click on Post.
4. Click on Add New, either on the menu or on the button to the right.
5. Click on the + button below the Add Title text.
6. Click on Image. If you can’t see the Image icon, click on Browse All and scroll down until you find it.
7. Upload the image that you selected. Alternatively, if an image is in your media folder, or you know the URL of your image, you can also use that.
8. Once uploaded, click on the Edit Link icon above the image.
9. Type in the URL of where you want the image to link to.
10. Press Enter to apply. You can press Preview on the upper right corner to see the clickable image as it will appear on your webpage.

Best Used in Moderation

Using an HTML clickable image is a great way to spice up a blog or a webpage.

It draws the visitor’s attention and can direct the flow of your website’s traffic to where you want it to go.

Be sure to use it in moderation, though, as too much of anything is never good.