Updated April 6, 2020
Would you like your picture to be clickable? So if someone clicks on it, will they be redirected to a website you specified? In this beginner’s guide, I’m going to show you how to create HTML to insert wherever HTML is accepted. I will also explain how to make an image clickable specifically in WordPress and answer some common questions.
Disclosure: This post contains affiliate links. If you click through and make a purchase, I will earn a commission at no additional cost to you. Read my full disclosure here.
Please note that this is not the method to use if you want to make an image clickable on Facebook, Twitter, Instagram or other social media. Read the FAQs at the end of the post to learn more.
An example of how it works
For this tutorial we use the following picture. Clicking it will take you to the main page for Project 24, my first choice for beginners who want to generate residual income through blogging or on YouTube. (I’m a paying customer.)
Let’s say I wanted to make the above logo clickable like I did on my Tools I Use & Recommend page.
Ready?
7 steps to create a clickable image with HTML
- Select an image to make it clickable
- Optimize the picture
- Upload the image to the web
- Get the image url
- Get the URL of the landing page
- Create the HTML code
- Use the HTML code where you want it to appear
1. Select an image to click on
Use your own picture or buy an archive picture. Be very careful with free pictures.
I buy my pictures from Depositphotos. (Sign up for my Flash Deals list if you’d like to be notified when they get 50% off once or twice a year.)
If you do not use your own picture or one that you bought from a reputable picture site, make sure that you have permission to use it and do not violate other people’s copyrights.
Can I use someone else’s logo?
Be very careful about this. I’m doing this because I’m a partner of Project 24 and use the logo to promote it.
Many companies are happy to use their logo as long as they follow brand guidelines. Find a brand’s guidelines by searching their website or contacting them directly.
2. Optimize the image
Many images, including those taken directly from the camera, are very large – too large for normal web use. Using a file that is too large can slow down your site.
Optimize your picture by resizing and compressing it In front Upload to the web.
First, change size The image so that the actual width and length (usually measured in pixels) is only as large as you need. A good rule of thumb is to use the width of the container in which the image is on your site. For example, if you are reading this post on a desktop, the container in which this text is located is approximately 800 pixels wide. Use a tool like PicResize.
Second, compress the picture. This compresses it and reduces its file size without sacrificing quality on the web. Use a tool like TinyPNG (my preference) or Squoosh to compress your image.
For more information, see Tips on using images on your website.
3. Upload the image to the web
In order to be visible on the Internet, your image must be “hosted” somewhere online. Your picture must live on the Internet. Otherwise, it will not be displayed and is not accessible to Internet users, for example if it is simply saved on your PC.
Where can you host your picture?
If you have a blog or website, host it there. The process of uploading your image to your own website depends on what type of website you have. For example, in WordPress go to Dashboard> Media> Add New.
You don’t have a blog or website yet? No problem. Use a service like Google Drive. Once you’ve signed up for a free account, upload your picture and it will be hosted! How to upload a file drive.
4. Get the image URL
The image URL is the unique web address of your image. Just as your personal home address tells people where you live, your image URL tells the Internet where your image lives.
Every image hosted online has its own URL. We need this to create our HTML code.
How do you find the URL of your picture?
If you have your own blog or website, the location where you can find the URL of your image depends on the platform you use.
For example, in WordPress go to Dashboard> Media> Library. Find your picture and click on it. In the “Attachment details” window, mark and copy the entire code section in the “Copy link” field (make sure you get everything!).
I suggest you open a blank document somewhere on your computer (a Google Doc, a Word document, a text editor, etc.). Paste your image URL there. We’ll use it in a minute.
How do I get my image URL in Google Drive?
5. Get the landing page URL
The landing page URL is simply the page someone should go to when they click on your image. It is the goal.
In my example, when someone clicks the Project 24 logo, I want them to be redirected to them this landing page.
You may already know the URL for the landing page that users should go to. If you’re not sure what it is, open a new tab or window in your web browser (Chrome, Safari, Firefox, etc.) and navigate to the webpage you want users to go to. Mark and copy the web address in the address bar of your browser.
Paste the destination URL into the document you created in step 4.
6. Create the HTML code
Now it’s time to create the HTML code. There are two ways to do this: (1) rewrite the code from scratch or (2) use a tool to generate the code for you. Let us both go through.
This is the basic HTML snippet you’ll use:
Every
Replace “LandingPageURL” and “ImageURL” with those from steps 4 and 5 above. Keep the quotation marks! Just paste all URLs (including https) between them.
Also add alternative text. You will notice a space to enter alternative text in the HTML snippet. Alternate text improves accessibility for those who cannot view images on the web. Alternative text should describe what is in the picture. Learn more about alternative text Here.
In our example, my HTML would look like this:
Note that the image URL was very long and therefore the next line was broken. Don’t worry, you’re just looking for the quotes.
Is there a tool I can use?
Yes, there are many HTML generator tools. Is one HTML5 editor.
You will see a rich text field (with all symbols above) and a code field. If the fields are already filled in, click in one of the fields and select everything. Clear. That should empty the boxes.
In the rich text box, click the Insert / Edit Image icon:
Paste that in the pop-up box image URL in the Source field of the pop-up field. It is also a good idea to describe the Image Description field. This is your alternative text. Click OK.
Your image will appear in the rich text field. HTML is displayed in the code field.
The image is displayed in blue because it is highlighted. Just leave it highlighted. Now click on the link symbol immediately to the left of the image symbol:
You will get a popup window. Paste that Landing page URL in the URL field. You can also set the link to open a new window by choosing Target> New Window.
Click OK.
7. Use the HTML code where you want it to appear
That’s it! You can use the HTML code. Paste it into your sidebar or footer, or wherever HTML is accepted.
It should look something like this:
How do I create 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 not, highlight the image by clicking on it and click on the three dots (More Options)> Show Block Settings. Scroll down to Link Settings> Link to: Custom URL. Add the URL of the landing page to which people should be redirected.
Does this work on Facebook, Twitter, Instagram or other social media platforms?
No. In general, social media platforms don’t accept HTML, so this doesn’t work. The method described above works best for blogs (footers, sidebars, etc.), websites, etc.
First, try to put that on social media Landing page URL directly into your post or tweet. As a result, the selected image is often automatically displayed from the target page.
If this does not work as desired, here are some suggestions:
If you try to display a large image on Facebook, change the image specified on your landing page. Then run the landing page URL from Facebook Release debugger Tool and try again to publish the landing page URL directly in your Facebook post.
Use Twitter cards on Twitter. To use them, you’ll first need to sign up for a Twitter Ads account and enter a credit card number (although you’ll only be charged when you run ads). Once you have a Twitter Ads account, go to Creatives> Cards> Create Card> Website Card. Upload your picture and create your tweet. Publish immediately or plan for the future. Tipping: Make sure the “Sponsored only” checkbox is cleared. Otherwise, it will not be published (unless you pay).
On Instagram, the lack of clickable things is frustrating. The best tool I’ve found to make images clickable is Smart.bio by Tailwind.
You might like it too:
How to start an online business: A budget-friendly checklist
Tips for using images on your website
Note: We are not the author of this content. For the Authentic and complete version,
Check its Original Source
