Don’t you love it when you click on an image and it leads you to a URL that provides additional context and information? Or knowing how to easily grab an image’s URL so you can quickly access it? I love that, too — which is why learning how to get a URL for an image (and learning how to add a URL to an image, for that matter) is a worthwhile task. The good news is that I’m here to help you figure it out.
![Streamline Your Coding: 25 HTML & CSS Hacks [Free Guide]](https://no-cache.hubspot.com/cta/default/53/848be230-f06a-420e-9a24-82b45fe61632.png)
Today, I’ll walk you through two processes you should know for your URL and picture-related tasks. I’ll show you how to get a URL for an image you have on your site and how to add a URL to an image so it redirects to a page when you click it.
To start, we’ll walk through how to get a URL for an image.
Why should you learn how to get a URL for an image?
Great question — and there are a couple of reasons why learning how to get a URL for an image is a good idea. Let's walk you through them now.
It’s an easy way to share an image.
If you’re sending an image and want to make sure it’s accessible to everyone, you can consider uploading it to your content management system (CMS) and getting a URL for the image. By doing this, you can rest assured that everyone you want to share the image with can view it. (As long as they can connect to the internet, that is.)
It’s direct.
Another reason I love getting a URL for an image is because it’s direct. When someone follows the link, they can access that image — and that image alone. It doesn’t point to the website but simply the image itself.
Free Guide: 25 HTML & CSS Coding Hacks
Tangible tips and coding templates from experts to help you code better and faster.
- Coding to Convention
- Being Browser-Friendly
- Minimizing Bugs
- Optimizing Performance
How to Get a URL for an Image
I’ll take you through the step-by-step process of getting a URL for an image now. It’s only a couple of steps, and I know you’ll pick this up quickly!
1. Pull up the image you want to get a URL for.
For this example, I’ll get a URL for this image of a Cavalier King Charles Spaniel from the AKC website. Note that this isn’t my website, but you can follow the same process for a website you own.
2. Right-click on the image so a menu populates.
It should look like this:
3. Look for the ‘Copy Image Address’ option.
Click it.
4. Paste the address you copied into your search bar.
This is what it will look like. Click Enter to go to the page.
Once you've clicked enter, your page should populate. Here's what mine looks like:
You can send that image URL to anyone and they’ll just be directed to the image, not the page you found the image on.
That's it! Give yourself a pat on the back, you did great. And now that you know how to get a URL for an image, it’s time to learn how to add a URL to an image itself. (In other words, how to make sure a URL pops up when visitors click an image.)
Why should you learn how to add a URL to an image?
I’m glad you asked! There are two primary reasons why learning to add a link to an image is worth the energy. It lets you capture your users’ attention and cast a larger net for users to click or tap. Allow me to explain.
Garner more attention.
Think of it this way: Would you rather read lengthy chunks of text without pictures or enjoy graphics interspersed throughout? I prefer the latter, and I’m not alone. Humans can process images in just 13 milliseconds — which is 60,000 times faster than text, according to BRG Communications.
Furthermore, 65% of people are visual learners — which again demonstrates the necessity of using imagery. Imagine a news story without a feature image or a product listing without a picture of the item. One of my journalism professors in college used to tell my class that it didn't matter how good the story was — if there wasn't an image, no one would read it. Descriptions alone aren’t enough; imagery helps compel people to take action.
That doesn’t mean copy is irrelevant, however. Search engines are constantly crawling your website to make sense of your content and determine how — or if — they can share it with users. And because images are traditionally more challenging for search engines to analyze, you should make things easier for them by adding text-based meta descriptions. Also, to adhere to website accessibility best practices, you need alt text.
What does that mean for your website? You should use copy and imagery to most effectively compel your users to convert or return to your website.
Free Guide: 25 HTML & CSS Coding Hacks
Tangible tips and coding templates from experts to help you code better and faster.
- Coding to Convention
- Being Browser-Friendly
- Minimizing Bugs
- Optimizing Performance
To Create Larger Clickable Areas
Adding a clickable link to a website is an excellent idea because it helps streamline customer interaction. Have you ever landed on a website page that features multiple products that each contain an under-image text link? If so, you know that the link text takes up a lot less space than the image does. If you only have a link accessible with the text, you’re creating friction, and, therefore, frustration, for users.
Here’s an example of what to do instead. Clean makeup brand Tower 28 enables you to access the product’s individual page by clicking the product’s name or the image itself. This reduces friction and makes for a more seamless user experience. 
When you leverage image links, you ensure that your users are able to access crucial information via the text and the picture associated with it. This reduces the likelihood your visitors will become frustrated and ultimately abandon your website.
How to Add a Link to Your Image
The first thing that you should keep in mind about this process is that it will vary slightly depending on what content management system (CMS) you are using.
For the sake of this tutorial, I’ll walk you through how to add a link to your image using the CMS in HubSpot's Content Hub. (By the way, if you’re looking to build a website, I highly recommend checking Content Hub out — you can get started for free.)
How to Add a Link to an Image in Content Hub - Website Pages
If you’re using Content Hub to build your website, you’ll be excited to learn that adding a link to an image isn’t as difficult as it may sound. Here’s how.
1. Open Content Hub, and navigate to your Website tab, which you can find under Marketing.
Navigate to your blog or website pages, depending on where you want to add the image. First, I’ll walk you through the process to add an image to a website page and then to a blog post.
2. Navigate to the ‘Add’ tab on the left side of your screen.
It looks like a plus sign. 
Once there, search ‘Image’ in the search bar. There are different types of image modules that pop up. For this tutorial, I’ll add a traditional image.
3. Drag the module you want to add to its correct placement on your website.
When you do so, this is what it will look like.
4. Replace the placeholder image, add alt text, and adjust other appearance settings.
These are all found on the same tab; just scroll down.
5. Scroll to the bottom to add the URL.
Once you’ve adjusted how you want the image to look, you can add a URL.
You’ll also have to decide if you want to open the link in a new tab. Here at HubSpot, we like to do that so the visitor doesn’t lose their place on their current page when clicking a link. I’d recommend checking that box, but it’s ultimately your call. This should update automatically, but it’s always a good idea to save your page manually at this point.
Free Guide: 25 HTML & CSS Coding Hacks
Tangible tips and coding templates from experts to help you code better and faster.
- Coding to Convention
- Being Browser-Friendly
- Minimizing Bugs
- Optimizing Performance
How to Add a Link to an Image in Content Hub - Blog
But what about if you want to add a link to your image with Content Hub on a blog post? Don’t worry — I’ll walk you through that process, too.
1. Open Content Hub, and navigate to your Website tab, which you can find under Marketing.
Navigate to your blog or website pages, depending on where you want to add the image. For this tutorial, let’s walk through the steps of adding an image to a blog post.
2. Create a new post or navigate to the post you want to add the image to.
You can access the Create button in the top right corner of your screen, as shown. (If you have multiple blogs, after clicking Create, you’ll be prompted to select the blog that you want to house the post.)
3. Insert your content. Then, click where you want to add the image.
Navigate to the ‘Insert Image’ icon, as highlighted. Click.
4. Upload or select a recent photo. 
Then click the graphic you want to insert. This will drop it into your blog post.
5. Once the image is in your post, click ‘Edit image.’
.webp?width=650&height=360&name=Screenshot%202024-01-12%20at%201.22.41%20PM%20(1).webp)
In Content Hub, the icon looks like a little pencil.
6. Pick where you want the image to link.
For this example, we'll choose URL. But it's good to know there are other options if you want to try something new.
7. Insert your URL.
Insert your URL in the bar that says ‘URL.’ You’ll also have to decide if you want to open the link in a new window which, again, I highly recommend. Lastly, you can preview the link to make sure it’s the one you want. Click ‘Apply’ to save.
And there you have it: You've successfully added a URL to an image in a blog post!
How to Make a Picture Into a Link Using HTML
Phew, that was a lot of steps! You might be wondering how these two processes connect, and it’s finally time for me to show you. In this next tutorial, I’ll demonstrate how to get a link for your image using HTML — and how to add a URL for it to redirect to.
If you're a visual learner, this video tutorial will help:
Or, if you want step-by-step directions, follow along as I walk you through these instructions.
Step 1: Select your image.
First, find the image you want to make a link. If it’s an image of a product on your website, chances are you already have several pictures. I recommend using the one that best showcases the product.
If you don’t have a photo, either take and upload a high-quality photo or use an existing web image. When it comes to repurposing images already on the web, however, be sure to either pay for image rights or use a license-free stock image. Otherwise, you can get in trouble for stealing someone’s image.
Below is an example of an image that showcases the HubSpot flywheel. This can be turned into a link to a landing page on HubSpot's website:
Step 2: Optimize size and scale.
Before uploading your photo to your web hosting server, I recommend optimizing its size and scale. Larger image file sizes will slow down loading times and may not scale properly. Start by looking at the size of any existing images on your site to inform your image size guidelines. Then, compress the image if necessary.
For example, my team at HubSpot loves to use Squoosh, a free compression tool from Google. After uploading your image, you can adjust the quality based on what you want the final file size to be and choose the output format. Generally, the JPEG format is best for images with lots of detail (like photographs), while PNGs are better suited for icons, images of text, and graphics. At HubSpot, you may have noticed we use WebP format.
Squoosh also lets you directly compare the quality of your uncompressed image to the quality of your compressed image.
As you can see from the example above, our compressed photo may not be as crisp, but this probably won't be noticeable to visitors if the image link is small enough on the screen. Plus, I think visitors care more about load time than if the image is as crisp as can be.
Ultimately, how much you want to compress your image is your call, but you'll typically avoid significant pixelation by keeping the quality above 70%.
Free Guide: 25 HTML & CSS Coding Hacks
Tangible tips and coding templates from experts to help you code better and faster.
- Coding to Convention
- Being Browser-Friendly
- Minimizing Bugs
- Optimizing Performance
Step 3: Upload your image and get the URL.
Next, you need to upload your image to your web server. This may be through your website builder or content management system, like Content Hub. Or it may be through a free image hosting site like ImgBB.
Regardless of how your image is hosted, it must be uploaded onto the web so you can create its location URL — the place where your HTML code will “look” for your image to display it.
Let's take the flywheel image above, for example. This was uploaded to the HubSpot server and embedded on a landing page. Let's say you want to embed it as a clickable link in an external blog post. That way, readers who click on the image will be driven to HubSpot's website. In that case, you can go to that landing page, right-click the image, and select Copy Image Address.
This is the image address or location URL: https://www.hubspot.com/hs-fs/hubfs/HubSpot-English-Flywheel-Jul-27-2020-04-17-18-68-PM.png?width=1360&name=HubSpot-English-Flywheel-Jul-27-2020-04-17-18-68-PM.png. We'll use it later in our HTML.
Step 4: Specify your destination URL.
Next, you need a destination URL, which specifies where your link will send users when they click on your image, such as a specific product or checkout page on your website.
As discussed above, let's make the destination URL "https://www.hubspot.com/flywheel".
Step 5: Create your HTML.
Now it’s time to create your HTML code. Here’s the basic template:
Let's break this down:
-
The <a> and </a> tags represent a link.
-
The anchor element (<a>) contains an href attribute. Replace "ProductPageURL" with the URL of the page you want people to be directed to when they click on the image.
-
The <img> tag represents an image.
-
The image element <img> contains a source attribute. Replace "ImageURL" with the URL of your image.
-
It also contains an alt attribute. Replace the placeholder text with actual text describing the image.
It’s important to fill out the alt text description, which can be read by screen readers used by folks with visual impairments, and will also display if the image cannot be loaded. Image alt text can also improve your SEO. As a result, simple and accurate alt text is a critical part of HTML image links.
Here's how the HTML code snippet for the HubSpot flywheel image might look:
Step 6: Paste your code as needed.
With your customized HTML code, you can now paste your linked image onto any page you have admin access to and that supports HTML.
If you’ve followed the steps correctly, the result should be a clickable image that takes users to a destination URL.
For example, here's the HubSpot flywheel image turned into a link in CodePen:
See the Pen Making a Picture into a Link by HubSpot (@hubspot) on CodePen.
Note: Clicking on the image in the CodePen module will result in an error message because it can't load an entire web page in the module. But if you hover over the image, you'll see the URL appear in the bottom-left corner of your screen. You can also right-click the image and select Open Link in a New Tab. The HubSpot Flywheel landing page will successfully open in the new tab.
Best Practices for Linking Images
Humans generally prefer the path of least resistance. It’s why we want faster internet, and why content algorithms are designed to give us the content we want when we want it.
These low-effort expectations also apply to websites. Sites that are aesthetically pleasing, easy to navigate, and comprehendible are most likely to capture visitor attention and convert.
That’s why I recommend these five best practices for linking graphics on your website.
Simple is best.
Links and images should be logically connected — the image should tell users where the link will take them before they click.
For example, if your image is a picture of a specific clothing item, but the link takes users to the general category, this will result in frustration. Instead, consider using an image containing several clothing items to indicate a link to a category page. Here's an example:
.webp?width=450&height=565&name=Image%20of%20several%20bags%20linked%20to%20category%20page%20is%20example%20of%20linking%20image%20best%20practice%20(1).webp)
Here, the rule for links-as-pictures is simple: What you see is what you get.
Offer a backup link.
Classic text hyperlinks look somewhat outdated today, thanks to their garish blue color and underline.
But there's a catch. Despite substantive improvements in HTML and other markup languages that make more subtle links possible, many users are conditioned to recognize the traditional blue link format.
As a result, it’s worth offering a familiar, text-based backup to any image link that users will instantly understand.
Free Guide: 25 HTML & CSS Coding Hacks
Tangible tips and coding templates from experts to help you code better and faster.
- Coding to Convention
- Being Browser-Friendly
- Minimizing Bugs
- Optimizing Performance
Don't go overboard.
Adding too many links to a page will spell disaster, and this goes double for images. Not every picture needs its own link because not every piece of content on your site needs to link out to other pages or resources.
For example, in the blog post below, the image is not linked because the heading is linked to the page where the image is featured:
Prioritize purpose when deciding what you want to link. Before you make any image into a link, ask a simple question: Why? If there’s no compelling reason, don’t make the change.
Review your links for relevancy.
If you're not reviewing your links regularly, you risk frustrating customers if they encounter outdated information. For example, if product lineups or prices change, old links may be out of date and send users to pages that are no longer relevant or return 404 errors.
This applies to all your page links, not solely image links or text links. Regular review helps ensure links are always active and applicable.
Open a new tab.
This is more of a personal or organizational preference, but I highly recommend that you set it up so that a new tab opens when a user clicks an image-as-a-link. This helps ensure they’ll come back to the page they’re on, which keeps your website’s bounce rate low. Plus, it reduces the frustration users experience when they want to continue reading the first page and can’t find it again.
Make the Most of Links on Your Site
You’re officially an expert in all things image-and-URL related. Give yourself a pat on the back — there’s a lot to learn about how to get a URL for an image and how to add a link to a picture, but you did a great job. Now, you can get started adding this functionality to your own website, and see how it enriches the user experience for your visitors.
Editor's note: This post was originally published in December 2020 and has been updated for comprehensiveness.
![How to Embed Google Map in HTML [Step-By-Step Guide]](https://blog.hubspot.com/hubfs/Google%20Drive%20Integration/How%20to%20Embed%20Google%20Map%20in%20HTML%20%5BStep-By-Step%20Guide%5D-2.jpeg)
![How to Create an HTML Tooltip [+ Code Templates]](https://blog.hubspot.com/hubfs/Google%20Drive%20Integration/How%20to%20Create%20an%20HTML%20Tooltip%20%5B+%20Code%20Templates%5D.jpeg)
![How to Make an HTML Text Box [Examples]](https://blog.hubspot.com/hubfs/html%20text%20box.jpg)
![How to Create Radio Buttons in HTML [+ Examples]](https://blog.hubspot.com/hubfs/Google%20Drive%20Integration/How%20to%20Create%20Radio%20Buttons%20in%20HTML%20%5B+%20Examples%5D.jpeg)
